/* ---------------------------
Sass conversion of Adam Schwartz's "Smarter Link Underline"
-- (https://eager.io/blog/smarter-link-underlines/)

Example Usage:
  a {
    @include link-underline(
      $color-background,
      $color-text,
      $color-selection,
      $underline-boldness
    );
  }

NOTE:
$underline-boldness is an optional modifier which will
default to the normal weight unless set to 'bold'
--------------------------- */

@mixin text-underline-crop($background) {
  text-shadow: 0.03em 0 $background, -0.03em 0 $background, 0 0.03em $background,
    0 -0.03em $background, 0.06em 0 $background, -0.06em 0 $background,
    0.09em 0 $background, -0.09em 0 $background, 0.12em 0 $background,
    -0.12em 0 $background, 0.15em 0 $background, -0.15em 0 $background;
}

@mixin text-underline($color-bg, $color-text, $underline-boldness) {
  background-image: linear-gradient($color-text, $color-text);
  background-repeat: repeat-x;

  // Choose whether underline is bold or normal
  @if ($underline-boldness == 'bold') {
    background-position: 0% 100%;
    background-size: 1px 2px;
  } @else {
    background-position: 0% 92%;
    background-size: 1px 1px;
  }
}

// Highlight color
@mixin text-selection($selection) {
  &::selection {
    @include text-underline-crop($selection);
    display: block;
    width: 100%;
    background: $selection;
  }
}

@mixin link-underline(
  $background,
  $text,
  $selection,
  $underline-boldness: 'normal'
) {
  @include text-underline-crop($background);
  @include text-underline($background, $text, $underline-boldness);
  @include text-selection($selection);
  color: $text;
  text-decoration: none;

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

  &:visited {
    color: $text;
  }
}