@mixin animated-underline($color: $link-hover-color, $width: $border-width, $pseudo: 'after') {
  position: relative;
  text-decoration: none;

  &:#{$pseudo} {
    content: "";
    position: absolute;
    width: 100%;
    height: $width;
    bottom: 0;
    left: 0;
    visibility: hidden;
    transform: scaleX(0);
    transition: $transition-base;
    transition-duration: $transition-duration;
    transition-timing-function: $transition-timing-ease-in;
    will-change: transform;
    backface-visibility: hidden;
    background: $color;
  }

  &:hover {
    &:#{$pseudo} {
      visibility: visible;
      transform: scaleX(1);
    }

    &:active {
      &:#{$pseudo} {
        visibility: hidden;
      }
    }
  }
}