/* =====================================================================
   OSE · Button  (styles/components/button.css)
   ---------------------------------------------------------------------
   Pill-shaped action. Same classes on <button> and <a>.

     <button type="button" class="btn btn--primary">Đăng ký tư vấn</button>

     <a class="btn btn--secondary btn--lg" href="/khoa-hoc/">
       Xem khoá học
       <span class="btn__icon btn__icon--arrow" aria-hidden="true"></span>
     </a>

     <button type="button" class="btn btn--ghost btn--icon" aria-label="Gọi ngay">
       <span class="btn__icon btn__icon--phone" aria-hidden="true"></span>
     </button>

   Variants  .btn--primary (default: navy fill, cream text; flips to a cream
             fill with mint hover inside data-surface="navy" / "night")
             .btn--secondary (hairline outline that darkens to the text
             colour on hover) · .btn--ghost (no border)
   Type      the UI family and weight (--btn-font-*), never the heading's.
   Sizes     .btn--sm · .btn--md (default) · .btn--lg   all >= the 44px tap min;
             lg is taller with more padding, not bigger text
   Shape     .btn--icon   round icon-only button, needs an aria-label
   Width     .btn--full (always 100%) · .btn--full-phone (100% below 48em)
   Icons     .btn__icon + one of --arrow --phone --chat --check --plus --close,
             a CSS mask painted in currentColor. A trailing --arrow nudges on
             hover (the distance collapses to 0 under reduced motion).
   States    hover (hover-capable pointers only) · focus-visible (ring) ·
             active (a darker fill or wash: colour only, nothing scales) ·
             disabled: :disabled on <button>;
             on <a> remove href and add role="link" aria-disabled="true".
   JS        none.
   ===================================================================== */

@layer components {
  .btn {
    /* size knobs (md) */
    --_height: var(--btn-md-height);
    --_padding-inline: var(--btn-md-padding-inline);
    --_font-size: var(--btn-md-font-size);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-block-size: var(--_height);
    min-inline-size: var(--_height);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--_padding-inline);
    border: var(--btn-border-width) solid var(--_border);
    border-radius: var(--btn-radius);
    background-color: var(--_bg);
    color: var(--_text);
    font-family: var(--btn-font-family);
    font-size: var(--_font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-leading);
    letter-spacing: var(--btn-tracking);
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--btn-duration) var(--btn-ease),
      border-color var(--btn-duration) var(--btn-ease),
      color var(--btn-duration) var(--btn-ease),
      box-shadow var(--btn-duration) var(--btn-ease);
  }

  /* ---- Variants: colour knobs per state ------------------------------ */

  .btn,
  .btn--primary {
    --_bg: var(--btn-primary-bg);
    --_text: var(--btn-primary-text);
    --_border: var(--btn-primary-border);
    --_bg-hover: var(--btn-primary-bg-hover);
    --_text-hover: var(--btn-primary-text-hover);
    --_border-hover: var(--btn-primary-border-hover);
    --_bg-active: var(--btn-primary-bg-active);
    --_text-active: var(--btn-primary-text-active);
    --_border-active: var(--btn-primary-border-active);
    --_bg-focus: var(--btn-primary-bg-focus);
    --_text-focus: var(--btn-primary-text-focus);
    --_border-focus: var(--btn-primary-border-focus);
    --_bg-disabled: var(--btn-primary-bg-disabled);
    --_text-disabled: var(--btn-primary-text-disabled);
    --_border-disabled: var(--btn-primary-border-disabled);
  }

  .btn--secondary {
    --_bg: var(--btn-secondary-bg);
    --_text: var(--btn-secondary-text);
    --_border: var(--btn-secondary-border);
    --_bg-hover: var(--btn-secondary-bg-hover);
    --_text-hover: var(--btn-secondary-text-hover);
    --_border-hover: var(--btn-secondary-border-hover);
    --_bg-active: var(--btn-secondary-bg-active);
    --_text-active: var(--btn-secondary-text-active);
    --_border-active: var(--btn-secondary-border-active);
    --_bg-focus: var(--btn-secondary-bg-focus);
    --_text-focus: var(--btn-secondary-text-focus);
    --_border-focus: var(--btn-secondary-border-focus);
    --_bg-disabled: var(--btn-secondary-bg-disabled);
    --_text-disabled: var(--btn-secondary-text-disabled);
    --_border-disabled: var(--btn-secondary-border-disabled);
  }

  .btn--ghost {
    --_bg: var(--btn-ghost-bg);
    --_text: var(--btn-ghost-text);
    --_border: var(--btn-ghost-border);
    --_bg-hover: var(--btn-ghost-bg-hover);
    --_text-hover: var(--btn-ghost-text-hover);
    --_border-hover: var(--btn-ghost-border-hover);
    --_bg-active: var(--btn-ghost-bg-active);
    --_text-active: var(--btn-ghost-text-active);
    --_border-active: var(--btn-ghost-border-active);
    --_bg-focus: var(--btn-ghost-bg-focus);
    --_text-focus: var(--btn-ghost-text-focus);
    --_border-focus: var(--btn-ghost-border-focus);
    --_bg-disabled: var(--btn-ghost-bg-disabled);
    --_text-disabled: var(--btn-ghost-text-disabled);
    --_border-disabled: var(--btn-ghost-border-disabled);
  }

  /* ---- Sizes ---------------------------------------------------------- */

  .btn--sm {
    --_height: var(--btn-sm-height);
    --_padding-inline: var(--btn-sm-padding-inline);
    --_font-size: var(--btn-sm-font-size);
  }

  .btn--md {
    --_height: var(--btn-md-height);
    --_padding-inline: var(--btn-md-padding-inline);
    --_font-size: var(--btn-md-font-size);
  }

  .btn--lg {
    --_height: var(--btn-lg-height);
    --_padding-inline: var(--btn-lg-padding-inline);
    --_font-size: var(--btn-lg-font-size);
  }

  /* ---- Shape & width -------------------------------------------------- */

  .btn--icon {
    inline-size: var(--_height);
    block-size: var(--_height);
    padding: 0;
  }

  .btn--full,
  .btn--full-phone {
    display: flex;
    inline-size: 100%;
  }

  @media (min-width: 48em) {
    .btn--full-phone {
      display: inline-flex;
      inline-size: auto;
    }
  }

  /* ---- Icon (CSS mask in currentColor) -------------------------------- */

  .btn__icon {
    --_icon: var(--btn-arrow-icon);
    flex: none;
    inline-size: var(--btn-icon-size);
    block-size: var(--btn-icon-size);
    background-color: currentColor;
    -webkit-mask-image: var(--_icon);
    mask-image: var(--_icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    forced-color-adjust: none; /* keep the glyph painted in the forced text colour */
    transition: transform var(--btn-duration) var(--btn-ease);
  }

  .btn__icon--arrow { --_icon: var(--btn-arrow-icon); }
  .btn__icon--phone { --_icon: var(--btn-phone-icon); }
  .btn__icon--chat { --_icon: var(--btn-chat-icon); }
  .btn__icon--check { --_icon: var(--btn-check-icon); }
  .btn__icon--plus { --_icon: var(--btn-plus-icon); }
  .btn__icon--close { --_icon: var(--btn-close-icon); }

  /* ---- States (order matters: focus < hover < active < disabled) ------ */

  .btn:focus-visible {
    border-color: var(--_border-focus);
    background-color: var(--_bg-focus);
    color: var(--_text-focus);
    box-shadow: var(--btn-focus-ring);
  }

  @media (hover: hover) {
    .btn:hover {
      border-color: var(--_border-hover);
      background-color: var(--_bg-hover);
      color: var(--_text-hover);
    }

    .btn:hover .btn__icon--arrow {
      transform: translateX(var(--btn-icon-nudge));
    }
  }

  .btn:active {
    border-color: var(--_border-active);
    background-color: var(--_bg-active);
    color: var(--_text-active);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    border-color: var(--_border-disabled);
    background-color: var(--_bg-disabled);
    color: var(--_text-disabled);
    cursor: not-allowed;
  }

  .btn:disabled .btn__icon--arrow,
  .btn[aria-disabled="true"] .btn__icon--arrow {
    transform: none;
  }

  @media (forced-colors: active) {
    .btn:disabled,
    .btn[aria-disabled="true"] {
      border-color: GrayText;
      color: GrayText;
    }
  }
}