@layer components {
    .button {
        /* The hover background. Defaults to a neutral wash (for plain
           toolbar/header icon buttons); each style/role modifier below
           overrides this one property instead of re-declaring :hover. */
        --button-hover-bg: var(--tertiary-system-fill);
        /* The pressed feedback, fired on :active for both pointer and touch.
           Background-bearing styles deepen --button-pressed-bg; transparent
           text styles instead fade the label via --button-pressed-opacity.
           Each modifier overrides only the one it needs. */
        --button-pressed-bg: var(--secondary-system-fill);
        --button-pressed-opacity: 1;
        /* Buttons size by height + inline padding, identical for icon-only,
           text, and icon+text content, so they look right standalone and in a
           toolbar. Size modifiers below set the per-size value. */
        --button-padding-inline: 1rem;

        align-items: center;
        border: none;
        display: flex;
        font-weight: 600;
        gap: 0.5rem;
        justify-content: center;
        padding-inline: var(--button-padding-inline);
        transition: background-color, opacity;
        transition-duration: 150ms;
        transition-timing-function: ease;
        cursor: pointer;
        background-color: transparent;

        @media (hover: hover) {
            &:not(:disabled):not(:has(:disabled)):hover {
                background-color: var(--button-hover-bg);
            }
        }

        &:not(:disabled):not(:has(:disabled)):active {
            background-color: var(--button-pressed-bg);
            opacity: var(--button-pressed-opacity);
        }
    }

    /* An icon-only button (a single icon, no text label) stays square: drop the
       inline padding and lock a 1:1 ratio so the icon sits centred in a circle.
       The modifier is computed by the component, not guessed from the DOM. */
    .button--icon-only {
        aspect-ratio: 1;
        padding-inline: 0;
    }

    .button--size-small {
        font-size: var(--font-size-footnote);
        height: var(--control-block-size-small);
        border-radius: calc(var(--control-block-size-small) / 2);
        gap: 0.375rem;
        --button-padding-inline: 0.75rem;
    }

    .button--size-small svg {
        width: calc(var(--control-block-size-small) / 2);
        height: calc(var(--control-block-size-small) / 2);
    }

    .button--size-normal {
        font-size: var(--font-size-callout);
        height: var(--control-block-size);
        border-radius: calc(var(--control-block-size) / 2);
        --button-padding-inline: 1rem;
    }

    .button--size-normal svg {
        width: var(--button-icon-size, calc(var(--control-block-size) / 2));
        height: var(--button-icon-size, calc(var(--control-block-size) / 2));
    }

    .button--size-large {
        font-size: 1.125rem;
        height: var(--control-block-size-large);
        border-radius: calc(var(--control-block-size-large) / 2);
        --button-padding-inline: 1.25rem;
    }

    .button--size-large svg {
        width: calc(var(--control-block-size-large) / 2);
        height: calc(var(--control-block-size-large) / 2);
    }

    .button--style-plain {
        color: var(--label);
        --button-hover-bg: transparent;
        --button-pressed-bg: transparent;
        --button-pressed-opacity: 0.5;
    }

    .button--style-bordered-prominent {
        background-color: var(--tint);
        box-shadow: none;
        color: var(--tint-label);
        --button-hover-bg: var(--tint);
        --button-pressed-bg: var(--tint-pressed);
    }

    .button--style-bordered {
        background-color: var(--tertiary-system-fill);
        color: var(--tint);
        --button-hover-bg: var(--secondary-system-fill);
        --button-pressed-bg: var(--system-fill);

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: var(--tint-hover);
            }
        }
    }

    .button--style-borderless {
        padding-inline: 0;
        color: var(--tint);
        --button-hover-bg: transparent;
        --button-pressed-bg: transparent;
        --button-pressed-opacity: 0.5;

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: var(--tint-hover);
            }
        }
    }

    .button--style-link {
        padding-inline: 0;
        color: var(--tint);
        --button-hover-bg: transparent;
        --button-pressed-bg: transparent;
        --button-pressed-opacity: 0.5;

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: var(--tint-hover);
            }
        }
    }

    .button--role-destructive {
        color: var(--system-red);

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: oklch(from var(--system-red) calc(l + 0.06) c h);
            }
        }
    }

    .button--style-bordered-prominent.button--role-destructive {
        background-color: var(--system-red);
        color: oklch(100% 0% 0deg);
        --button-hover-bg: var(--system-red);
        --button-pressed-bg: oklch(from var(--system-red) calc(l - 0.08) c h);

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: oklch(100% 0% 0deg);
            }
        }
    }

    /* Compact density (base.css): a bordered button is a macOS push button —
       an opaque raised surface with a hairline edge and a small shadow, the
       label in the label colour — so it reads on grouped panels too. */
    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .button--style-bordered {
            --button-hover-bg: var(--tertiary-system-background);
            --button-pressed-bg: var(--secondary-system-background);

            background-color: var(--tertiary-system-background);
            box-shadow:
                0 0 0 0.5px
                    light-dark(oklch(0% 0 0deg / 18%), oklch(100% 0 0deg / 12%)),
                0 1px 1px
                    light-dark(oklch(0% 0 0deg / 8%), oklch(0% 0 0deg / 30%));
            font-weight: 500;

            &:not(.button--role-destructive) {
                color: var(--label);

                @media (hover: hover) {
                    &:hover:not([disabled]) {
                        color: var(--label);
                    }
                }
            }
        }
    }

    /* One disabled rule for every style and role, in both densities: the
       label drops to the tertiary label colour, and a style with a fill
       drops to the quaternary fill. Destructive is no exception. */
    :is(.button, .app .button):is(:disabled, :has(:disabled)) {
        cursor: default;
        color: var(--tertiary-label);
    }

    :is(
            .button--style-bordered-prominent,
            .button--style-bordered,
            .app .button--style-bordered
        ):is(:disabled, :has(:disabled)) {
        background-color: var(--quaternary-system-fill);
        box-shadow: none;
    }
}