a {
  color: inherit;
  text-decoration: none;

  //prevent wraping for mail and telephone links
  &[href^="mailto:"],
  &[href^="tel:"] {
    white-space: nowrap;
  }
  &:focus-visible {
    outline: $outline-width solid color("utility-focus");
    outline-offset: $outline-offset;
  }
}

@function link-shadow($num-shadows, $color) {
  $factor: 0.02;
  $shadow-string: "";

  @for $i from 1 through $num-shadows {
    $shadow-string: $shadow-string + "#{$i * $factor}em 0 #{color($color)}, #{$i * $factor * -1}em 0 #{color($color)}";
    @if $i != $num-shadows {
      $shadow-string: $shadow-string + ", ";
    }
  }

  @return $shadow-string;
}

a.a--text-link {
  background-image: linear-gradient(color("border-text-link"), color("border-text-link")), linear-gradient(color("border-text-link"), color("border-text-link"));
  background-size: 50% $width-border, 50% $width-border;
  background-repeat: no-repeat;
  background-position: $link-underline-horizontal-indent $link-underline-position-vertical, calc(100% - #{$link-underline-horizontal-indent}) $link-underline-position-vertical;
  transition: background-size 100ms ease-out, color 50ms ease-in 25ms;

  word-break: break-word; //in the off very long words (e.g. complete URLs) in link text, it is broken on to multiple lines, otherwise links break lines at spaces

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  text-shadow: #{link-shadow(5, "background")};

  &:hover {
    color: color("foreground-theme");
    background-size: 0% $width-border, 0% $width-border;
  }

   &:focus-visible {
     outline: $outline-width solid color("utility-focus");
     outline-offset: $outline-offset;
   }

  &:active {
    color: color("foreground-theme-hover");
    background-size: 50% $width-border, 50% $width-border;
    background-image: linear-gradient(color("foreground-theme-hover"), color("foreground-theme-hover")), linear-gradient(color("foreground-theme-hover"), color("foreground-theme-hover"));
  }
} 

h1,
h2,
h3,
h4,
p,
ul,
ol,
table,
blockquote,
.text--byline,
.button-container,
.empty-state,
.dl {
  &:not(.links--plain) {
    a {
      @extend .a--text-link;
    }
  }
}

a.button {
  display: inline-block;
  text-shadow: none;
  background-image: none;
  width: -moz-fit-content; //make work in firefox
  width: fit-content;

  &--icon {
    display: inline-flex;
  }
}

a.link--arrow {
  line-height: line-height("single");
  color: color("foreground-theme");

  &:hover {
    color: color("foreground-theme-hover");
    outline: none;

    &::after {
      transform: translateX($width-border);
    }
  }

  &:focus-visible {
     outline: $outline-width solid color("utility-focus");
     outline-offset: $outline-offset;
   }

  &:active {
    color: color("foreground-theme");
    outline: none;
  }

  @include icon-style($position: "after") {
    @include set-icon("link-internal");
    display: inline-block;
    transition: transform $animation-timing-link-icon-translate $easing-in-out;
    white-space: nowrap;
    margin-left: $width-border;
  }

  &--external {
    &::after {
      @include set-icon("link-external");
      margin-left: spacing(-5);
    }
  }

  &--next {
    &::after {
      @include set-icon("next");
      margin-left: spacing(-5);
    }
  }
}