.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: var(--control-min-size);
    min-block-size: var(--control-min-size);
    max-inline-size: 100%;
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), translate var(--dur-fast) var(--ease-standard);
    cursor: pointer;
}
.button--primary { background: var(--color-accent); color: var(--color-on-accent); }
.button--outline { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.button--icon {
    inline-size: var(--control-min-size);
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    line-height: var(--line-height-control);
}
.button--icon[aria-expanded="true"] { background: var(--color-interaction); }
.button--secondary {
    min-block-size: 2.875rem;
    gap: 0.625rem;
    padding: 0.625rem var(--space-8);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--button-background, var(--color-secondary));
    color: var(--color-on-accent);
    font-size: var(--fs-body-large);
    line-height: var(--line-height-control);
}
.button--block { inline-size: 100%; }
.button--selection { --button-background: var(--color-selection-action); inline-size: 100%; }
.button[hidden] { display: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: var(--button-disabled-opacity, 0.5); cursor: not-allowed; }
.button--inactive:disabled { opacity: 1; cursor: default; }

.button--brand { --button-background: var(--color-brand-action); --button-background-hover: var(--color-brand-action-hover); min-block-size: 3rem; inline-size: min(100%, 18rem); }

.button--light { --button-background: var(--color-background); --button-background-hover: var(--color-interaction); color: var(--color-text); min-block-size: 3rem; font-size: clamp(var(--fs-small), 1.25vw, var(--fs-body-large)); padding-inline: clamp(var(--space-2), 1.666667vw, var(--space-6)); }
.button--icon-light { inline-size: 3rem; block-size: 3rem; flex-shrink: 0; border: 0; border-radius: var(--radius-round); padding: var(--space-2); color: var(--color-text); background: var(--color-background); }
.button--icon-light:disabled { opacity: 1; cursor: default; }

.button--wheel { border: 0; padding: 0; background: transparent; color: var(--color-brand-action); font-family: var(--font-heading); font-size: var(--fs-secondary-max); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: -0.02em; }
.button--tab { border: 0; padding: var(--space-3) 0; background: transparent; color: var(--color-case-description); font-size: var(--fs-small); line-height: var(--line-height-control); text-align: start; }
.button--tab[aria-selected="true"] { color: var(--color-brand-action); }
.button--icon-outline { inline-size: 3rem; block-size: 3rem; padding: var(--space-2); border-color: var(--color-brand-action); border-radius: var(--radius-round); color: var(--color-brand-action); background: transparent; }
.button--fit { inline-size: auto; }

/* --button-wide-size can adjust the standard CTA width for a composition. */
.button--wide { inline-size: min(100%, var(--button-wide-size, 18rem)); font-size: var(--fs-body-large); }
@media (width < 48rem) { .button--compact { padding-inline: var(--space-4); } }

.button--media-preview { inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; color: var(--color-on-accent); cursor: pointer; }

/* One interaction contract for links, actions and submit buttons.
   Disabled controls retain their resting appearance. */
.button:not(.button--media-preview):not(.button--wheel):not(.button--tab):not(:disabled):not([aria-disabled="true"]):focus-visible {
    translate: 0 var(--button-hover-offset);
    box-shadow: var(--shadow-button-hover);
}
.button:is(.button--primary, .button--secondary, .button--brand, .button--light, .button--outline, .button--icon, .button--icon-light, .button--icon-outline):not(:disabled):not([aria-disabled="true"]):focus-visible {
    background: var(--color-button-hover);
    border-color: var(--color-button-hover);
    color: var(--color-button-hover-copy, var(--color-on-accent));
}
.button:is(.button--wheel, .button--tab):not(:disabled):not([aria-disabled="true"]):focus-visible {
    color: var(--color-button-hover);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
    box-shadow: none;
}
.button--media-preview:not(:disabled):focus-visible {
    translate: none;
    box-shadow: none;
    background: var(--color-button-media-hover);
}
@media (hover: hover) and (pointer: fine) {
    .button:not(.button--media-preview):not(.button--wheel):not(.button--tab):not(:disabled):not([aria-disabled="true"]):hover {
        translate: 0 var(--button-hover-offset);
        box-shadow: var(--shadow-button-hover);
    }
    .button:is(.button--primary, .button--secondary, .button--brand, .button--light, .button--outline, .button--icon, .button--icon-light, .button--icon-outline):not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--color-button-hover);
        border-color: var(--color-button-hover);
        color: var(--color-button-hover-copy, var(--color-on-accent));
    }
    .button:is(.button--wheel, .button--tab):not(:disabled):not([aria-disabled="true"]):hover {
        color: var(--color-button-hover);
        text-decoration: underline;
        text-underline-offset: var(--space-1);
        box-shadow: none;
    }
    .button--media-preview:not(:disabled):hover {
        translate: none;
        box-shadow: none;
        background: var(--color-button-media-hover);
    }
}
@media (prefers-reduced-motion: reduce) {
    .button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) { translate: none; }
}