/*
 * HOSTREND BUTTON COMPONENT v2.0
 *
 * Rules:
 * - All button variants use a fixed 16px radius.
 * - Standard buttons are solid/no gradient.
 * - Gradient is an explicit variant for main/hero CTAs only.
 * - Visual styling consumes global design-system tokens only.
 * - Button artwork comes from the centralized icon library.
 * - Depth is intentionally subtle: light highlight + soft elevation.
 */

.host-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-icon-gap);
    box-sizing: border-box;
    min-height: var(--button-height-md);
    padding: 0 var(--button-padding-md);
    border: var(--border-width-control) solid var(--button-border-default);
    border-radius: var(--button-radius);
    font-family: var(--font-primary);
    font-size: var(--font-button);
    font-weight: var(--button-font-weight);
    line-height: var(--line-button);
    letter-spacing: var(--tracking-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    color: var(--button-color-primary-text);
    background: var(--button-color-primary-bg);
    box-shadow: var(--button-shadow-default);
    transition: var(--button-transition);
}

.host-button,
.host-button::before,
.host-button::after {
    transform-origin: center;
}

.host-button:hover:not(:disabled):not(.is-disabled) {
    transform: var(--button-hover-lift);
}

.host-button:active:not(:disabled):not(.is-disabled) {
    transform: var(--button-press-transform);
}


/* Stable-position variant for inline lead-capture CTAs and other controls that must not lift. */
.host-button--no-lift,
.host-button--no-lift:hover:not(:disabled):not(.is-disabled),
.host-button--no-lift:active:not(:disabled):not(.is-disabled) {
    transform: none !important;
}
.host-button--no-lift {
    transition-property: color, background-color, border-color, box-shadow;
}

.host-button__text,
.host-button__loading-text {
    display: inline-flex;
    align-items: center;
}

.host-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    min-width: var(--button-icon-size);
    min-height: var(--button-icon-size);
    flex: 0 0 var(--button-icon-size);
    line-height: 0;
}

.host-button__icon--library svg,
.host-button__library-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    color: currentColor;
}

.host-button__icon--library svg {
    fill: currentColor;
    stroke: none;
}

/* Arrow icons are progressive: hidden at rest and revealed on interaction. */
.host-button__icon--hover-reveal {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden;
    opacity: 0;
    margin-inline-start: calc(-1 * var(--button-icon-gap));
    transform: translateX(-4px);
    transition: width var(--motion-fast) var(--ease-standard),
                flex-basis var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard),
                margin-inline-start var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}

.host-button:hover:not(:disabled):not(.is-disabled) .host-button__icon--hover-reveal,
.host-button:focus-visible .host-button__icon--hover-reveal {
    width: var(--button-icon-size) !important;
    min-width: var(--button-icon-size) !important;
    max-width: var(--button-icon-size) !important;
    flex-basis: var(--button-icon-size) !important;
    margin-inline-start: 0;
    opacity: 1;
    transform: translateX(0);
}

.host-button__library-svg--flip-x {
    transform: scaleX(-1);
}

.host-button__icon--state-active {
    display: none;
}

.host-button[aria-expanded="true"] .host-button__icon--state-menu {
    display: none;
}

.host-button[aria-expanded="true"] .host-button__icon--state-active {
    display: inline-flex;
}

/* -------------------------------------------------------------------------
   SIZES — all variants retain the same 16px radius
   ------------------------------------------------------------------------- */

.host-button--xs {
    min-height: var(--button-height-xs);
    padding-inline: var(--button-padding-xs);
    font-size: var(--font-button-xs);
}

.host-button--small {
    min-height: var(--button-height-sm);
    padding-inline: var(--button-padding-sm);
    font-size: var(--font-button-small);
}

.host-button--medium {
    min-height: var(--button-height-md);
    padding-inline: var(--button-padding-md);
    font-size: var(--font-button);
}

.host-button--large {
    min-height: var(--button-height-lg);
    padding-inline: var(--button-padding-lg);
    font-size: var(--font-button);
}

.host-button--xl {
    min-height: var(--button-height-xl);
    padding-inline: var(--button-padding-xl);
    font-size: var(--font-button);
}

.host-button--hero {
    min-height: var(--button-height-hero);
    padding-inline: var(--button-padding-hero);
    font-size: var(--font-button);
}

.host-button--radius-default {
    border-radius: var(--button-radius);
}

/* -------------------------------------------------------------------------
   PRIMARY — solid only, no gradient
   ------------------------------------------------------------------------- */

.host-button--primary {
    color: var(--button-color-primary-text);
    background: var(--button-color-primary-bg);
    border-color: var(--button-border-primary);
    box-shadow: var(--button-shadow-default);
}

.host-button--primary:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-primary-hover-text);
    background: var(--button-color-primary-hover-bg);
    border-color: var(--button-border-primary-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--primary:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-primary-active-text);
    background: var(--button-color-primary-active-bg);
    border-color: var(--button-border-primary-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   SECONDARY — light surface, no gradient
   ------------------------------------------------------------------------- */

.host-button--secondary {
    color: var(--button-color-secondary-text);
    background: var(--button-color-secondary-bg);
    border-color: var(--button-border-secondary);
    box-shadow: var(--button-shadow-default);
}

.host-button--secondary:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-secondary-hover-text);
    background: var(--button-color-secondary-hover-bg);
    border-color: var(--button-border-secondary-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--secondary:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-secondary-active-text);
    background: var(--button-color-secondary-active-bg);
    border-color: var(--button-border-secondary-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   OUTLINE
   ------------------------------------------------------------------------- */

.host-button--outline {
    color: var(--button-color-outline-text);
    background: var(--button-color-outline-bg);
    border-color: var(--button-border-outline);
    box-shadow: var(--button-shadow-outline);
}

.host-button--outline:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-outline-hover-text);
    background: var(--button-color-outline-hover-bg);
    border-color: var(--button-border-outline-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--outline:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-outline-active-text);
    background: var(--button-color-outline-active-bg);
    border-color: var(--button-border-outline-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   TERTIARY
   ------------------------------------------------------------------------- */

.host-button--tertiary {
    color: var(--button-color-tertiary-text);
    background: var(--button-color-tertiary-bg);
    border-color: var(--button-border-tertiary);
    box-shadow: var(--button-shadow-none);
}

.host-button--tertiary:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-tertiary-hover-text);
    background: var(--button-color-tertiary-hover-bg);
    border-color: var(--button-border-tertiary-hover);
    box-shadow: var(--button-shadow-none);
}

.host-button--tertiary:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-tertiary-active-text);
    background: var(--button-color-tertiary-active-bg);
    border-color: var(--button-border-tertiary-active);
    box-shadow: var(--button-shadow-none);
}

/* -------------------------------------------------------------------------
   TEXT
   ------------------------------------------------------------------------- */

.host-button--text {
    min-width: auto;
    min-height: var(--button-height-sm);
    padding-inline: var(--button-padding-text);
    color: var(--button-color-text-text);
    background: var(--button-color-text-bg);
    border-color: var(--button-border-text);
    box-shadow: var(--button-shadow-none);
}

.host-button--text:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-text-hover-text);
    background: var(--button-color-text-hover-bg);
    border-color: var(--button-border-text-hover);
    box-shadow: var(--button-shadow-none);
}

.host-button--text:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-text-active-text);
    background: var(--button-color-text-active-bg);
    border-color: var(--button-border-text-active);
}

/* -------------------------------------------------------------------------
   ICON BUTTON — rounded rectangle, not circular
   ------------------------------------------------------------------------- */

.host-button--icon {
    width: var(--button-height-md);
    min-width: var(--button-height-md);
    max-width: var(--button-height-md);
    height: var(--button-height-md);
    padding: 0;
    flex: 0 0 var(--button-height-md);
    color: var(--button-color-icon-text);
    background: var(--button-color-icon-bg);
    border-color: var(--button-border-icon);
    box-shadow: var(--button-shadow-default);
}

.host-button--icon:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-icon-hover-text);
    background: var(--button-color-icon-hover-bg);
    border-color: var(--button-border-icon-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--icon:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-icon-active-text);
    background: var(--button-color-icon-active-bg);
    border-color: var(--button-border-icon-active);
    box-shadow: var(--button-shadow-active);
}

.host-button--icon-only {
    width: var(--button-icon-button-size);
    min-width: var(--button-icon-button-size);
    max-width: var(--button-icon-button-size);
    height: var(--button-icon-button-size);
    min-height: var(--button-icon-button-size);
    max-height: var(--button-icon-button-size);
    padding: 0;
    flex: 0 0 var(--button-icon-button-size);
    gap: 0;
}

.host-button--icon-only .host-button__icon {
    width: var(--button-icon-only-size);
    min-width: var(--button-icon-only-size);
    max-width: var(--button-icon-only-size);
    height: var(--button-icon-only-size);
    min-height: var(--button-icon-only-size);
    max-height: var(--button-icon-only-size);
    flex-basis: var(--button-icon-only-size);
}

/* -------------------------------------------------------------------------
   LIGHT — white/light surface CTA
   ------------------------------------------------------------------------- */

.host-button--light {
    color: var(--button-color-light-text);
    background: var(--button-color-light-bg);
    border-color: var(--button-border-light);
    box-shadow: var(--button-shadow-default);
}

.host-button--light:hover:not(:disabled):not(.is-disabled),
.host-button--light:focus-visible {
    color: var(--button-color-light-hover-text);
    background: var(--button-color-light-hover-bg);
    border-color: var(--button-border-light-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--light:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-light-active-text);
    background: var(--button-color-light-active-bg);
    border-color: var(--button-border-light-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   WHITE OUTLINE — white-on-dark CTA
   ------------------------------------------------------------------------- */

.host-button--white-outline {
    color: var(--color-white);
    background: transparent;
    border-color: var(--color-white);
    box-shadow: var(--button-shadow-default);
}

.host-button--white-outline:hover:not(:disabled):not(.is-disabled),
.host-button--white-outline:focus-visible {
    color: var(--color-dark);
    background: var(--color-white);
    border-color: var(--color-white);
    box-shadow: var(--button-shadow-hover);
}

.host-button--white-outline:active:not(:disabled):not(.is-disabled) {
    color: var(--color-dark);
    background: var(--color-white);
    border-color: var(--color-white);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   MENU OUTLINE — header/menu control
   ------------------------------------------------------------------------- */

.host-button--menu-outline {
    color: var(--button-color-menu-text);
    background: var(--button-color-menu-bg);
    border-color: var(--button-border-menu);
    box-shadow: var(--button-shadow-none);
}

.host-button--menu-outline:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-menu-hover-text);
    background: var(--button-color-menu-hover-bg);
    border-color: var(--button-border-menu-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--menu-outline:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-menu-active-text);
    background: var(--button-color-menu-active-bg);
    border-color: var(--button-border-menu-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   GRADIENT — explicit marketing / hero CTA only
   ------------------------------------------------------------------------- */

.host-button--gradient {
    color: var(--button-color-gradient-text);
    background: var(--button-color-gradient-bg);
    border-color: var(--button-border-gradient);
    box-shadow: var(--button-shadow-gradient);
}

.host-button--gradient:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-gradient-hover-text);
    background: var(--button-color-gradient-hover-bg);
    border-color: var(--button-border-gradient-hover);
    box-shadow: var(--button-shadow-gradient-hover);
}

.host-button--gradient:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-gradient-active-text);
    background: var(--button-color-gradient-active-bg);
    border-color: var(--button-border-gradient-active);
    box-shadow: var(--button-shadow-gradient-active);
}

/* -------------------------------------------------------------------------
   DESTRUCTIVE
   ------------------------------------------------------------------------- */

.host-button--destructive {
    color: var(--button-color-destructive-text);
    background: var(--button-color-destructive-bg);
    border-color: var(--button-border-destructive);
    box-shadow: var(--button-shadow-default);
}

.host-button--destructive:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-destructive-hover-text);
    background: var(--button-color-destructive-hover-bg);
    border-color: var(--button-border-destructive-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--destructive:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-destructive-active-text);
    background: var(--button-color-destructive-active-bg);
    border-color: var(--button-border-destructive-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   HEADER SIGN UP — reusable header auth outline/glass state
   ------------------------------------------------------------------------- */

.host-button--header-signup {
    color: var(--button-color-header-signup-text);
    background: var(--button-color-header-signup-bg);
    border-color: var(--button-border-header-signup);
    box-shadow: var(--button-shadow-none);
    -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
    backdrop-filter: blur(var(--button-header-auth-blur));
    transition: var(--button-header-auth-transition);
}

.host-button--header-signup:hover:not(:disabled):not(.is-disabled),
.host-button--header-signup:focus-visible {
    color: var(--button-color-header-signup-hover-text);
    background: var(--button-color-header-signup-hover-bg);
    border-color: var(--button-border-header-signup-hover);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

.host-button--header-signup:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-header-signup-active-text);
    background: var(--button-color-header-signup-active-bg);
    border-color: var(--button-border-header-signup-active);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

/* -------------------------------------------------------------------------
   HEADER LOG IN — reusable translucent-white auth state
   ------------------------------------------------------------------------- */

.host-button--header-login {
    color: var(--button-color-header-login-text);
    background: var(--button-color-header-login-bg);
    border-color: var(--button-border-header-login);
    box-shadow: var(--button-shadow-none);
    -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
    backdrop-filter: blur(var(--button-header-auth-blur));
    transition: var(--button-header-auth-transition);
}

.host-button--header-login:hover:not(:disabled):not(.is-disabled),
.host-button--header-login:focus-visible {
    color: var(--button-color-header-login-hover-text);
    background: var(--button-color-header-login-hover-bg);
    border-color: var(--button-border-header-login-hover);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

.host-button--header-login:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-header-login-active-text);
    background: var(--button-color-header-login-active-bg);
    border-color: var(--button-border-header-login-active);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

/* LOCKED HEADER AUTH STATE — restore the original approved behavior.
   Top/transparent header: Sign up = outlined/glass, Log in = white.
   Revealed white header: Sign up = standard outline, Log in = primary solid. */
.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-signup {
    color: var(--button-color-header-signup-text);
    background: var(--button-color-header-signup-bg);
    border-color: var(--button-border-header-signup);
    box-shadow: var(--button-shadow-none);
    -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
    backdrop-filter: blur(var(--button-header-auth-blur));
}

.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-signup:hover:not(:disabled):not(.is-disabled),
.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-signup:focus-visible {
    color: var(--button-color-header-signup-hover-text);
    background: var(--button-color-header-signup-hover-bg);
    border-color: var(--button-border-header-signup-hover);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-login {
    color: var(--button-color-header-login-text);
    background: var(--button-color-header-login-bg);
    border-color: var(--button-border-header-login);
    box-shadow: var(--button-shadow-none);
    -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
    backdrop-filter: blur(var(--button-header-auth-blur));
}

.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-login:hover:not(:disabled):not(.is-disabled),
.hr-header--dark-top:not(.is-scroll-solid) .host-button--header-login:focus-visible {
    color: var(--button-color-header-login-hover-text);
    background: var(--button-color-header-login-hover-bg);
    border-color: var(--button-border-header-login-hover);
    box-shadow: var(--button-shadow-none);
    transform: none;
}

.hr-header.is-scroll-solid .host-button--header-signup {
    color: var(--button-color-outline-text);
    background: var(--button-color-outline-bg);
    border-color: var(--button-border-outline);
    box-shadow: var(--button-shadow-outline);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hr-header.is-scroll-solid .host-button--header-signup:hover:not(:disabled):not(.is-disabled),
.hr-header.is-scroll-solid .host-button--header-signup:focus-visible {
    color: var(--button-color-outline-hover-text);
    background: var(--button-color-outline-hover-bg);
    border-color: var(--button-border-outline-hover);
    box-shadow: var(--button-shadow-hover);
    transform: none;
}

.hr-header.is-scroll-solid .host-button--header-login {
    color: var(--button-color-primary-text);
    background: var(--button-color-primary-bg);
    border-color: var(--button-border-primary);
    box-shadow: var(--button-shadow-default);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hr-header.is-scroll-solid .host-button--header-login:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-primary-hover-text);
    background: var(--button-color-primary-hover-bg);
    border-color: var(--button-border-primary-hover);
    box-shadow: var(--button-shadow-hover);
}

/* -------------------------------------------------------------------------
   CONTRAST — white/light CTA on dark or brand surfaces
   ------------------------------------------------------------------------- */

.host-button--contrast {
    color: var(--button-color-contrast-text);
    background: var(--button-color-contrast-bg);
    border-color: var(--button-border-contrast);
    box-shadow: var(--button-shadow-default);
}

.host-button--contrast:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-color-contrast-hover-text);
    background: var(--button-color-contrast-hover-bg);
    border-color: var(--button-border-contrast-hover);
    box-shadow: var(--button-shadow-hover);
}

.host-button--contrast:active:not(:disabled):not(.is-disabled) {
    color: var(--button-color-contrast-active-text);
    background: var(--button-color-contrast-active-bg);
    border-color: var(--button-border-contrast-active);
    box-shadow: var(--button-shadow-active);
}

/* -------------------------------------------------------------------------
   FOCUS / DISABLED / LOADING
   ------------------------------------------------------------------------- */

.host-button:focus-visible {
    outline: none;
    box-shadow: var(--button-shadow-focus);
}

.host-button:disabled,
.host-button.is-disabled {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: var(--button-shadow-none) !important;
}

.host-button.is-loading {
    cursor: wait;
    pointer-events: none;
    transform: none !important;
}

.host-button__spinner {
    width: var(--button-spinner-size);
    height: var(--button-spinner-size);
    flex: 0 0 var(--button-spinner-size);
    border: var(--button-spinner-border-width) solid var(--button-spinner-track);
    border-top-color: currentColor;
    border-radius: var(--radius-circle);
    animation: host-button-spin var(--motion-spin-duration) var(--ease-linear) infinite;
}

@keyframes host-button-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   BUTTON GROUP
   ------------------------------------------------------------------------- */

.host-button-group {
    display: flex;
    align-items: center;
    gap: var(--button-group-gap);
    row-gap: var(--button-group-gap);
    column-gap: var(--button-group-gap);
    flex-wrap: wrap;
}

.host-button-group--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--button-group-gap);
    width: 100%;
}

.host-button-group--stacked .host-button {
    width: 100%;
}

.host-button-group--mobile-stack {
    display: flex;
    align-items: stretch;
    gap: var(--button-group-gap);
    row-gap: var(--button-group-gap);
    column-gap: var(--button-group-gap);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .host-button--hero {
        min-height: var(--button-height-xl);
        padding-inline: var(--button-padding-xl);
    }
}

@media (max-width: 767px) {
    .host-button {
        min-height: var(--button-height-md);
        font-size: var(--font-button);
    }

    .host-button--xs {
        min-height: var(--button-height-xs);
        padding-inline: var(--button-padding-xs);
        font-size: var(--font-button-xs);
    }

    .host-button--small {
        min-height: var(--button-height-sm);
        padding-inline: var(--button-padding-sm);
        font-size: var(--font-button-small);
    }

    .host-button--medium {
        min-height: var(--button-height-md);
        padding-inline: var(--button-padding-md-mobile);
    }

    .host-button--large {
        min-height: var(--button-height-lg-mobile);
        padding-inline: var(--button-padding-lg-mobile);
    }

    .host-button--xl {
        min-height: var(--button-height-xl-mobile);
        padding-inline: var(--button-padding-xl-mobile);
    }

    .host-button--hero {
        min-height: var(--button-height-hero-mobile);
        padding-inline: var(--button-padding-hero-mobile);
    }

    .host-button--icon-only {
        width: var(--button-icon-button-size-mobile);
        min-width: var(--button-icon-button-size-mobile);
        max-width: var(--button-icon-button-size-mobile);
        height: var(--button-icon-button-size-mobile);
        min-height: var(--button-icon-button-size-mobile);
        max-height: var(--button-icon-button-size-mobile);
        flex-basis: var(--button-icon-button-size-mobile);
    }

    .host-button-group--mobile-stack {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .host-button-group--mobile-stack .host-button {
        width: 100%;
        min-width: 100%;
        flex: 0 0 auto;
    }
}

@media (max-width: 380px) {
    .host-button {
        font-size: var(--font-button-small);
    }
}

@media (prefers-reduced-motion: reduce) {
    .host-button,
    .host-button:hover,
    .host-button:active,
    .host-button:focus-visible {
        transition: none;
        transform: none !important;
    }

    .host-button__spinner {
        animation: none;
    }

    .host-button__icon--hover-reveal {
        transition: none;
    }
}