.button {
    --ground: white;
    --button-accent: var(--operator-accent);
    --button-border: var(--operator-border);

    inline-size: fit-content;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    display: inline-grid;
    grid-auto-flow: column;
    place-content: center;
    gap: 0.25em;
    border: 1px solid var(--button-border);
    border-radius: var(--operator-radius);
    padding: 0.5em 0.75em;
    background: var(--ground);
    color: var(--ink-primary);
    text-decoration: none;
    font-size: var(--size-body);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;

    &:hover {
        --button-border: var(--button-accent);

        background: var(--operator-bg-subtle);
    }

    &:focus-visible { outline: 2px solid var(--operator-accent) }

    &[data-selected] {
        --ground: hsl(from var(--button-accent) h s calc(l + 40));
        --button-border: var(--button-accent);

        color: var(--button-accent);
        font-weight: var(--weight-answer);
    }

    &.quiet {
        --ground: inherit;
        --button-border: transparent;

        background: none;
        color: var(--ink-muted);

        &:hover { background: var(--tint) }
    }

    &:has(> svg:only-child) { padding: 0 }

    svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}