@mixin textShadowToCropUnderline($color) {
  text-shadow:
    .01em 0 $color,
    -.01em 0 $color,
    0 .01em $color,
    0 -.01em $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($background, $color, $hoverColor) {
  color: $color;
  text-decoration: none;
  @include textShadowToCropUnderline($background);

  background-image:
    linear-gradient($background, $background),
    linear-gradient($background, $background),
    linear-gradient($color, $color);
  background-size:
    .05em 2px,
    .05em 2px,
    2px 2px;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x;
  background-position: 0% 1.02em, 100% 1.02em, 0% 1.04em;

  &::selection {
    @include textShadowToCropUnderline($selectionColor);
    background-color: $selectionColor;
  }
  &::-moz-selection {
    @include textShadowToCropUnderline($selectionColor);
    background-color: $selectionColor;
  }
  &:before,
  &:after,
  *,
  *:before,
  *:after {
    text-shadow: none;
  }
  &:visited {
    color: $color;
  }

  &:hover {
    color: $hoverColor;
    background-image:
      linear-gradient($background, $background),
      linear-gradient($background, $background),
      linear-gradient($hoverColor, $hoverColor);
  }
}