// Taken from https://eager.io/blog/smarter-link-underlines/
@mixin textShadowToCropUnderline($color) {
  text-shadow: .03em 0 $color, -.03em 0 $color, 0 .03em $color, 0 -.03em $color, .06em 0 $color, -.06em 0 $color, .09em 0 $color, -.09em 0 $color, .12em 0 $color, -.12em 0 $color, .15em 0 $color, -.15em 0 $color;
}

@mixin linkUnderlines($backgroundColor, $color) {
  $selectionColor: #b4d5fe;
  color: $color;
  text-decoration: none;
  @include textShadowToCropUnderline($backgroundColor);
  background-image: linear-gradient($backgroundColor, $backgroundColor), linear-gradient($backgroundColor, $backgroundColor), linear-gradient($color, $color);
  background-size: .05em 1px, .05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 90%, 100% 90%, 0% 90%;

  &::selection {
    @include textShadowToCropUnderline($selectionColor);
  background: $selectionColor;
  }

  &::-moz-selection {
    @include textShadowToCropUnderline($selectionColor);
    background: $selectionColor;
  }

  &:before,
  &:after,
  *,
  *:before,
  *:after {
    text-shadow: none;
  }

  &:visited {
    color: $color;
  }
}
