@use '_focus' as *;
@use '_helpers' as *;
@use '_high-contrast' as *;
@use '_hover' as *;





@mixin link-variant(
  $content-color,
  $background-color-hover,
  $content-color-hover,
  $theme: 'light'
) {
  & {
    color: $content-color;
  }

  &:link,
  &:visited {
    color: $content-color;
  }

  &:active {
    background-color: $background-color-hover;
    color: $content-color-hover;
  }

  @include hover-media-query {
    &:hover {
      background-color: $background-color-hover;
      color: $content-color-hover;
      @include high-contrast-media-query {
        background-color: Canvas;
      }
    }
  }

  &[href^='http://']::after,
  &[href^='https://']::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }

  &[href^='#']::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
  }

  @include high-contrast-media-query {
    &[href^='http://']::after,
    &[href^='https://']::after {
      forced-color-adjust: none;
      content: '';
      background-color: LinkText;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
    }

    &[href^='#']::after {
      forced-color-adjust: none;
      content: '';
      background-color: LinkText;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
    }
  }

  
  
  @include focus($theme, $offset: 0);
}


@mixin link-underline {
  text-decoration-skip-ink: auto;
  text-decoration-line: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}