// Links Customizations - SDGA Custom Enhancements
// Following Bootstrap 5.3 recommended practices

// ============================================
// LINK COLOR VARIANTS - Using Sass map and @each loop
// ============================================

// Define link color variants with their shades
$link-variants: (
  "primary": (base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
    base-decoration: rgba($primary-600, var(--#{$prefix}link-decoration-opacity, 1)),
    hover: rgba($primary-400, var(--#{$prefix}link-opacity, 1)),
    hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
    active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1))),
  "neutral": (base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
    base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
    hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
    hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
    active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)))
);

$on-primary-link-variants: (
  "primary": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6))),
  "neutral": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)))
);

// Generate link variant classes

@each $name, $colors in $link-variants {
  .link-#{$name} {
    color: map-get($colors, base) !important;
    text-decoration-color: map-get($colors, base-decoration) !important;

    &:visited,
    &:focus-visible {
      color: map-get($colors, base) !important;
      text-decoration-color: map-get($colors, base-decoration) !important;
    }

    &:hover,
    &:focus {
      color: map-get($colors, hover) !important;
      text-decoration-color: map-get($colors, hover-decoration) !important;
    }

    &:active {
      color: map-get($colors, active) !important;
      text-decoration-color: map-get($colors, active-decoration) !important;
    }

    &.disabled {
      color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
      text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
      pointer-events: none;
    }
  }
}

.on-primary {
  @each $name, $colors in $on-primary-link-variants {
    .link-#{$name} {
      color: map-get($colors, base) !important;
      text-decoration-color: map-get($colors, base-decoration) !important;

      &:visited,
      &:focus-visible {
        color: map-get($colors, base) !important;
        text-decoration-color: map-get($colors, base-decoration) !important;
      }

      &:hover,
      &:focus {
        color: map-get($colors, hover) !important;
        text-decoration-color: map-get($colors, hover-decoration) !important;
      }

      &:active {
        color: map-get($colors, active) !important;
        text-decoration-color: map-get($colors, active-decoration) !important;
      }

      &.disabled {
        color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
        text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
        pointer-events: none;
      }
    }
  }
}