/* Styles for Button component */
@layer components {
    .button {
        /* Composition: icon and label on one baseline. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);

        padding-block: 0.9em;
        padding-inline: var(--space-m);
        border: 1px solid transparent;
        border-radius: var(--radius-none);

        font-family: var(--font-body);
        font-size: var(--size-step--1);
        font-weight: 600;
        letter-spacing: 0.14em;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;

        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-jab),
            border-color var(--duration-fast) var(--ease-jab),
            color var(--duration-fast) var(--ease-jab),
            translate var(--duration-fast) var(--ease-jab);

        & .button__icon {
            font-size: 1.25em;
            flex: none;
        }

        /* The design asks for a punch, not a bounce: move, never scale. */
        &:hover {
            translate: 0 -2px;
        }

        &:active {
            translate: 0 0;
        }

        &[data-wide="true"] {
            width: 100%;
        }

        /* Exception: gold plate, black type. The single loudest element around. */
        &[data-variant="primary"] {
            background-color: var(--color-accent);
            color: var(--color-on-accent);
            border-color: var(--color-accent);

            &:hover {
                background-color: var(--color-accent-soft);
                border-color: var(--color-accent-soft);
            }
        }

        /* Exception: outline, gold only on hover. */
        &[data-variant="secondary"] {
            background-color: transparent;
            color: var(--color-text);
            border-color: var(--color-border-strong);

            &:hover {
                border-color: var(--color-accent);
                color: var(--color-accent);
            }
        }

        /* Exception: text only, for the least important action in a group. */
        &[data-variant="tertiary"] {
            padding-inline: 0;
            padding-block: 0.4em;
            background-color: transparent;
            color: var(--color-text);
            text-decoration: underline;
            text-decoration-color: var(--color-accent);
            text-decoration-thickness: 1px;
            text-underline-offset: 0.4em;

            &:hover {
                color: var(--color-accent);
            }
        }
    }

    @media (prefers-color-scheme: light) {
        /* Gold on a light background is dark enough to carry white type, but the
           plate needs a firmer edge or it dissolves into the concrete. */
        .button[data-variant="primary"] {
            border-color: color-mix(in srgb, var(--color-accent) 70%, black);
        }
    }
}