/**
 * Global buttons.
 * Inline, sized to the label. Not Uncode's .btn, which stretches in columns.
 */

a.graniteandgreen-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding-block: var(--graniteandgreen-spacing-md);
    padding-inline: var(--graniteandgreen-spacing-lg);
    border: var(--graniteandgreen-border-width) solid transparent;
    border-radius: var(--graniteandgreen-border-radius-sm);
    font-weight: var(--graniteandgreen-font-weight-normal);
    line-height: var(--graniteandgreen-line-height-tight);
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

a.graniteandgreen-button--solid {
    border-color: rgba(var(--graniteandgreen-color-copper), 1);
    background: rgba(var(--graniteandgreen-color-copper), 1);
    color: rgba(var(--graniteandgreen-color-white), 1);
}

.style-light a.graniteandgreen-button--solid:is(:hover, :focus),
.style-dark a.graniteandgreen-button--solid:is(:hover, :focus) {
    border-color: rgba(var(--graniteandgreen-color-copper), 1);
    background: transparent;
    color: rgba(var(--graniteandgreen-color-copper), 1);
}

a.graniteandgreen-button--ghost {
    border-color: rgba(var(--graniteandgreen-color-light), 0.7);
    background: transparent;
    color: rgba(var(--graniteandgreen-color-light), 1);
}

.style-light a.graniteandgreen-button--ghost:is(:hover, :focus),
.style-dark a.graniteandgreen-button--ghost:is(:hover, :focus) {
    border-color: rgba(var(--graniteandgreen-color-light), 1);
    background: rgba(var(--graniteandgreen-color-light), 0.12);
    color: rgba(var(--graniteandgreen-color-light), 1);
}

a.graniteandgreen-button:focus-visible {
    outline: var(--graniteandgreen-border-width) solid rgba(var(--graniteandgreen-color-light), 1);
    outline-offset: var(--graniteandgreen-spacing-xs);
}