@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Link';

$linkBaseClass: '#{constants.$prefix}link';

$appearances: (
  'primary': (
    'color': tokens.$bm-sem-color-link-primary,
    'hover-color': tokens.$bm-comp-link-color-primary-hover,
    'active-color': tokens.$bm-comp-link-color-primary-active,
  ),
  'secondary': (
    'color': tokens.$bm-sem-color-link-secondary,
    'hover-color': tokens.$bm-comp-link-color-secondary-hover,
    'active-color': tokens.$bm-comp-link-color-secondary-active,
  ),
);

$sizes: (
  sm: (
    text: tokens.$bm-comp-link-typo-sm,
    icon: tokens.$bm-comp-link-size-sm-icon,
  ),
  md: (
    text: tokens.$bm-comp-link-typo-md,
    icon: tokens.$bm-comp-link-size-md-icon,
  ),
  lg: (
    text: tokens.$bm-comp-link-typo-lg,
    icon: tokens.$bm-comp-link-size-lg-icon,
  ),
  xl: (
    text: tokens.$bm-comp-link-typo-xl,
    icon: tokens.$bm-comp-link-size-xl-icon,
  ),
);

.#{$linkBaseClass} {
  outline: none;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  border: tokens.$bm-sem-border-width-focus solid transparent;
  margin: calc(#{tokens.$bm-sem-border-width-focus} * -1);

  &:hover {
    text-decoration: underline;
  }

  &:focus,
  &:focus-visible {
    outline: none;
    border-radius: tokens.$bm-sem-radius-focus-md;
    border: tokens.$bm-sem-border-width-focus solid tokens.$bm-sem-color-border-focus;
  }

  &--disabled {
    cursor: not-allowed;
    opacity: tokens.$bm-sem-opacity-disabled;
    text-decoration: none !important;

    &:focus,
    &:focus-visible {
      border: tokens.$bm-sem-border-width-focus solid transparent;
    }
  }

  &--hide-underline {
    text-decoration: none;
  }

  @each $size, $sizeValue in $sizes {
    $textSize: map.get($sizeValue, 'text');
    $iconSize: map.get($sizeValue, 'icon');

    &--#{$size} {
      font: $textSize;

      // Gap only needed when we have size
      // otherwise it's an inhered link
      // shouldn't  render with an icon or gap
      gap: tokens.$bm-comp-link-space-gap;
    }

    &--#{$size} &__icon,
    &--#{$size} ::slotted([slot='iconBefore']),
    &--#{$size} ::slotted([slot='iconAfter']) {
      flex-shrink: 0;
      width: $iconSize;
      height: $iconSize;
    }
  }

  @each $state, $colors in $appearances {
    $defaultColor: map.get($colors, 'color');
    $hoverColor: map.get($colors, 'hover-color');
    $activeColor: map.get($colors, 'active-color');

    &--#{$state} {
      color: $defaultColor;

      &:not(&--disabled):hover {
        color: $hoverColor;
      }

      &:not(&--disabled):active {
        color: $activeColor;
      }
    }
  }

  &--body-bold {
    font-weight: tokens.$bm-sem-font-weight-body-bold;
  }
}