.button {
    --button-fill: var(--action-primary);
    --button-fill-selected: var(--action-selected);
    --fill: var(--button-fill);
    --button-bg: var(--button-fill);
    --button-ink: var(--text-on-colour);
    --button-darken: lch(from var(--button-fill) calc((25 - l) * infinity) 0 0);
    --button-state: var(--button-darken);
    --button-ink-state: var(--button-ink);

    min-inline-size: var(--control-md);
    inline-size: fit-content;
    min-block-size: var(--control-md);
    border: 2px solid var(--button-fill);
    border-radius: 0.25rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--button-ink);
    background: var(--button-bg);
    cursor: pointer;

    > svg {
        flex-shrink: 0;
        block-size: var(--icon-sm);
        inline-size: auto;
    }

    > input {
        flex-shrink: 0;
        margin: 0;
        inline-size: 1em;
        block-size: 1em;
        border: 2px solid currentColor;
        border-radius: 0.25rem;
        padding: 0.125em;
        appearance: none;
        color: inherit;
        outline: none;
        cursor: inherit;

        &[type="radio"] { border-radius: 50% }
        &[type="radio"]:checked { background: currentColor content-box }
        &[type="checkbox"]:checked {
            background: currentColor;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.3 5.95l2.7 2.7 5.1-5.7' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat exclude, linear-gradient(black 0 0);
        }
    }

    &:where(:hover, :focus-visible, :has(> input:hover, > input:focus-visible)) {
        color: color-mix(in srgb, var(--button-ink-state) 12%, var(--button-ink));
        background: color-mix(in srgb, var(--button-state) 12%, var(--button-bg));
    }
    &:where(:active, :has(> input:active)) {
        color: color-mix(in srgb, var(--button-ink-state) 24%, var(--button-ink));
        background: color-mix(in srgb, var(--button-state) 24%, var(--button-bg));
    }
    &:has(> input:focus-visible) {
        outline: var(--focus-outline-width) solid var(--border-focus);
        outline-offset: var(--focus-outline-offset);
    }

    &.button--pill { border-radius: 999px }
    &.button--stretch { inline-size: 100% }
    &.button--icon { padding: 0 }

    &.color--black { --button-fill: var(--action-primary) }
    &.color--white {
        --button-fill: var(--surface-raised);
        --button-ink: var(--text-on-field);
    }
    &.is-primary { --button-fill: var(--action-brand) }
    &.is-error {
        --button-fill: var(--action-danger);
        --button-fill-selected: var(--action-danger);
    }

    &.button--outlined {
        --button-bg: transparent;
        --button-ink: var(--button-fill);
        --button-state: var(--button-fill);
        --button-ink-state: lch(from var(--button-fill) calc((l - 49.5) * infinity) 0 0);
    }

    &.button--plain { border-color: transparent }

    &:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]), :has(> input:checked)) {
        --button-fill: var(--button-fill-selected);
        --button-bg: var(--button-fill);
        --button-ink: var(--text-on-colour);
        --button-state: var(--button-darken);
        --button-ink-state: var(--button-ink);
    }

    &:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) {
        --button-fill: var(--action-disabled);
        --button-bg: var(--button-fill);
        --button-ink: var(--text-on-colour);
        --button-state: var(--button-fill);
        --button-ink-state: var(--button-ink);

        pointer-events: none;
    }
}

.link-button {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    min-block-size: var(--control-md);
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.button-group {
    display: grid;
    gap: 0.75rem;
}