// ==========================================================================
// Button Component
// Optical vertical centering for Open Sans + custom variants
//
// Open Sans ascenders are taller than descenders, so text appears
// shifted upward. We compensate with asymmetric padding via CSS vars.
// ==========================================================================

// Optical correction factor for Open Sans vertical centering
// Increase --hks-btn-offset to push text down more

:root {
}
.btn {
  --hks-btn-offset: 0.05em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  padding-top: calc(var(--hks-btn-padding-y) - var(--hks-btn-offset));
  padding-bottom: calc(var(--hks-btn-padding-y) + var(--hks-btn-offset));

  @include media-breakpoint-up(lg) {
    // --hks-btn-padding-y: 0.5rem;
    // --hks-btn-padding-x: 1.25rem;
    gap: 0.7em;
  }

  @include focus-visible;
  // Consistent focus ring across all variants
  &:focus-visible {
    box-shadow: none; // remove Bootstrap's default focus shadow
  }
  // Subtle press feedback
  &:active {
    transform: scale(0.98);
  }
}

.btn-icon {
  --hks-btn-offset: 0;
}

// ============================================
// CUSTOM BUTTON VARIANTS
// ============================================
// Variants Bootstrap doesn't ship. These follow Bootstrap's
// naming pattern (.btn-*) so they feel native.

// --- Ghost ---
// No background, no border. For tertiary/low-emphasis actions.
// Differs from .btn-link: ghost has padding and hover background,
// btn-link looks like a text link.

// --- Outline Reverse ---
// White outline button for use on dark backgrounds.
// Use inside .t-dark sections.
.btn-ghost {
  --hks-btn-color: #{$body-color};
  --hks-btn-bg: transparent;
  --hks-btn-border-color: transparent;
  --hks-btn-hover-color: #{$body-color};
  --hks-btn-hover-bg: rgba(#{$black}, 0.06);
  --hks-btn-hover-border-color: transparent;
  --hks-btn-active-color: #{$body-color};
  --hks-btn-active-bg: rgba(#{$black}, 0.1);
  --hks-btn-active-border-color: transparent;
}

.btn-outline-reverse {
  --hks-btn-color: #{$white};
  --hks-btn-bg: transparent;
  --hks-btn-border-color: rgba(#{$white}, 0.5);
  --hks-btn-hover-color: #{$black};
  --hks-btn-hover-bg: #{$white};
  --hks-btn-hover-border-color: #{$white};
  --hks-btn-active-color: #{$black};
  --hks-btn-active-bg: rgba(#{$white}, 0.9);
  --hks-btn-active-border-color: rgba(#{$white}, 0.9);
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn-link {
  text-decoration: none;
  font-weight: 700;
  @include dynamic-underline-hover();
  display: flex !important; // Override Bootstrap's inline-block for .btn-link
}

.btn-primary {
  --hks-btn-color: #{$btn-primary-color};
  --hks-btn-bg: #{$btn-primary-bg};
  --hks-btn-border-color: #{$btn-primary-border-color};
  --hks-btn-hover-color: #{$btn-primary-hover-color};
  --hks-btn-hover-bg: #{$btn-primary-hover-bg};
  --hks-btn-hover-border-color: #{$btn-primary-hover-border-color};
  --hks-btn-focus-shadow-rgb: #{$btn-primary-focus-shadow-rgb};
  --hks-btn-active-color: #{$btn-primary-active-color};
  --hks-btn-active-bg: #{$btn-primary-active-bg};
  --hks-btn-active-border-color: #{$btn-primary-active-border-color};
  --hks-btn-disabled-color: #{$btn-primary-disabled-color};
  --hks-btn-disabled-bg: #{$btn-primary-disabled-bg};
  --hks-btn-disabled-border-color: #{$btn-primary-disabled-border-color};
}

.btn-secondary {
  --hks-btn-color: #{$primary};
  --hks-btn-bg: #{$primary-15};
  --hks-btn-border-color: #{$primary-15};
  --hks-btn-hover-color: #{$primary};
  --hks-btn-hover-bg: #{$primary-30};
  --hks-btn-hover-border-color: #{$primary-30};
  --hks-btn-focus-shadow-rgb: 154, 68, 97;
  --hks-btn-active-color: {$primary};
  --hks-btn-active-bg: #{$primary-30};
  --hks-btn-active-border-color: #{$primary-30};
  --hks-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --hks-btn-disabled-color: #ffffff;
  --hks-btn-disabled-bg: #{$primary-15};
  --hks-btn-disabled-border-color: #{$primary-15};
}

.btn-tertiary {
  --hks-btn-color: #fff;
  --hks-btn-bg: #{$primary};
  --hks-btn-border-color: #{$primary};
  --hks-btn-hover-color: #{$white};
  --hks-btn-hover-bg: #{mix($primary, #fff, 95%)};
  --hks-btn-hover-border-color: #{mix($primary, #fff, 95%)};
  --hks-btn-focus-shadow-rgb: #{$btn-primary-focus-shadow-rgb};
  --hks-btn-active-color: #{$btn-primary-active-color};
  --hks-btn-active-bg: #{mix($primary, #fff, 95%)};
  --hks-btn-active-border-color: #{mix($primary, #fff, 95%)};
  --hks-btn-disabled-color: #{$btn-primary-disabled-color};
  --hks-btn-disabled-bg: #{$btn-primary-disabled-bg};
  --hks-btn-disabled-border-color: #{$btn-primary-disabled-border-color};
}

// ============================================
// BUTTON WITH ICON + TEXT
// ============================================
//
// THE KEY DECISION:
//
// We do NOT use modifier classes like .btn--has-icon or
// .btn-icon-text. Instead, we make .btn flexbox-ready and
// let the icon SVG inside handle itself. If there's an icon
// inside a .btn, it just works. No extra class on the button.
//
// WHY: In practice, you'd forget the modifier half the time,
// and the icon should work regardless. The button doesn't need
// to "know" it has an icon — the icon styles itself.
//
// MARKUP:
// <button class="btn btn-primary">
//   <svg class="btn-icon" ...>...</svg>
//   Get started
// </button>
//
// <button class="btn btn-secondary">
//   Download
//   <svg class="btn-icon" ...>...</svg>
// </button>

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  .btn-sm & {
    width: 1em;
    height: 1em;
  }
  .btn-lg & {
    width: 1.3em;
    height: 1.3em;
  }
}

// ============================================
// ICON-ONLY BUTTON
// ============================================
//
// A button that contains ONLY an icon, no visible text.
// This DOES need a class because we need to override padding
// to make it square, and we need to enforce aria-label.
//
// MARKUP:
// <button class="btn btn-primary btn-icon-only" aria-label="Close">
//   <svg class="btn-icon" ...>...</svg>
// </button>

.btn-icon-only {
  display: flex !important;
  padding: $btn-padding-y;
  aspect-ratio: 1;
  justify-content: center;
  gap: 0;

  &.btn-sm {
    padding: $btn-padding-y-sm;
  }
  &.btn-lg {
    padding: $btn-padding-y-lg;
  }
}