// ==========================================================================
// Custom Mixins
// ==========================================================================

// WCAG 2.2 AA focus style (SC 2.4.11 Focus Appearance)
// Supports either:
// 1) color + width, or
// 2) a full outline shorthand value.
// @param {Color} $color - outline color (default: --hks-primary)
// @param {Length} $offset - outline-offset (default: 2px)
// @param {Length} $width - outline-width (default: 2px)
// @param {List|String|null} $outline - full outline shorthand, e.g. `2px solid currentColor`
@mixin focus-visible(
  $color: var(--hks-primary),
  $offset: 2px,
  $width: 2px,
  $outline: null
) {
  &:focus {
    box-shadow: none;
  }

  &:focus-visible {
    @if $outline != null {
      outline: $outline;
    } @else {
      outline: $width solid $color;
    }
    outline-offset: $offset;
    box-shadow: none;
  }
}

// ============================================
// TOOLS — Functions & Mixins
// ============================================
// Shorthand helpers. These reference the maps from _settings.scss.
//
// RULE: If Bootstrap has a variable for it, use it directly.
// Helpers are only for our custom maps ($spacers extended,
// $font-size-scale, $line-height-scale, $radius-scale).

// --- Spacing (wraps Bootstrap's $spacers) ---
@function sp($key) {
  @if map-has-key($spacers, $key) {
    @return map-get($spacers, $key);
  }
  @warn "Unknown spacer key: #{$key}. Available: #{map-keys($spacers)}";
  @return 0;
}

// --- Font size (custom scale) ---
@function fs($key) {
  @if map-has-key($font-size-scale, $key) {
    @return map-get($font-size-scale, $key);
  }
  @warn "Unknown font-size key: #{$key}";
  @return 1rem;
}

// --- Line height (custom scale) ---
@function lh($key) {
  @if map-has-key($line-height-scale, $key) {
    @return map-get($line-height-scale, $key);
  }
  @warn "Unknown line-height key: #{$key}";
  @return 1.5;
}

// --- Border radius (custom scale) ---
@function radius($key) {
  @if map-has-key($radius-scale, $key) {
    @return map-get($radius-scale, $key);
  }
  @warn "Unknown radius key: #{$key}";
  @return 0;
}

// --- Breakpoint mixin ---
// Bootstrap has its own breakpoint mixins, but they require
// the full Bootstrap import. This standalone version works
// in files imported before Bootstrap.
@mixin bp($name) {
  $bp-values: (
    sm: 576px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
    xxl: 1600px,
  );
  $value: map-get($bp-values, $name);
  @if $value {
    @media (min-width: $value) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$name}";
  }
}

// --- Dynamic underline hover ---
// Animated underline via pseudo element. Works for inline links.
@mixin dynamic-underline-hover(
  $color: currentColor,
  $thickness: 2px,
  $offset: 0.08em,
  $duration: 0.22s
) {
  position: relative;
  text-decoration: none;
  display: inline-block;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(#{$offset} * -1);
    height: $thickness;
    background-color: $color;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform $duration ease;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &:hover::after,
  &:focus-visible::after {
    transform: scaleX(1);
  }
}

@mixin link-dynamic($variant: default) {
  display: inline-block;
  padding-block: 0.25rem; // tap target without inline-flex
  text-decoration: none;
  font-size: inherit;

  @include dynamic-underline-hover(
    $color: currentColor,
    $thickness: 1px,
    $offset: 0.1em
  );

  @include focus-visible();

  @if $variant == default {
    color: $link-color;

    &:visited {
      color: $link-color-visited;
    }
  } @else if $variant == inverse {
    color: $color-text-inverse;

    &:visited {
      color: rgba($color-text-inverse, 0.8);
    }
  } @else if $variant == muted {
    color: $color-text-muted;

    &:visited {
      color: $color-text-muted;
    }
  }
}