@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: light-dark(
            oklch(85% 0% 0deg / 50%),
            oklch(50% 0% 0deg / 50%)
        );
        /* 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;

        &:disabled,
        &:has(:disabled) {
            cursor: default;
            opacity: 0.75;
        }

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

    /* 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: 0.8125rem;
        height: 2rem;
        border-radius: 1rem;
        gap: 0.375rem;
        --button-padding-inline: 0.75rem;
    }

    .button--size-small svg {
        width: 1rem;
        height: 1rem;
    }

    .button--size-normal {
        font-size: 1rem;
        height: 3rem;
        border-radius: 1.5rem;
        --button-padding-inline: 1rem;
    }

    .button--size-normal svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .button--size-large {
        font-size: 1.125rem;
        height: 3.5rem;
        border-radius: 1.75rem;
        --button-padding-inline: 1.25rem;
    }

    .button--size-large svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .button--style-plain {
        color: light-dark(oklch(0% 0% 0deg), oklch(100% 0% 0deg));
        --button-hover-bg: transparent;
    }

    .button--style-bordered-prominent {
        background-color: oklch(50% 50% var(--hue));
        box-shadow: none;
        color: oklch(100% 0% 0deg);
        --button-hover-bg: oklch(60% 50% var(--hue));
    }

    .button--style-bordered {
        background-color: light-dark(
            oklch(95% 0% 0deg / 60%),
            oklch(50% 0% 0deg / 25%)
        );
        color: oklch(60% 50% var(--hue));
        --button-hover-bg: light-dark(
            oklch(96% 0% 0deg / 70%),
            oklch(50% 0% 0deg / 50%)
        );

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: oklch(70% 50% var(--hue));
            }
        }
    }

    .button--style-borderless {
        padding-inline: 0;
        color: oklch(60% 50% var(--hue));
        --button-hover-bg: transparent;

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: oklch(70% 50% var(--hue));
            }
        }
    }

    .button--style-link {
        padding-inline: 0;
        color: oklch(60% 50% var(--hue));
        text-decoration: underline;
        --button-hover-bg: transparent;

        @media (hover: hover) {
            &:hover:not([disabled]) {
                color: oklch(70% 50% var(--hue));
            }
        }
    }

    .button--role-destructive {
        color: oklch(60% 100% 45deg);

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