/**
 * Table of Contents:

 * 1.0 - link
 * 2.0 - link-color
 * 3.0 - link-underline
 */


/* 1.0 - link */
%link {
      transition: background-size $transition-time ease 0s, color $transition-time ease $transition-time;
      background-image: linear-gradient($secondary-color, $secondary-color);
      background-repeat: no-repeat;
      background-position: 100% 100%;
      background-size: 0% 1px;

      &:hover {
            color: $secondary-color;
            background-size: 100% 1px;
            background-position: 0 100%;
      }
}


/* 1.1 - link-color */
%link-color {
      @extend %link;
      color: currentColor;
      background-image: linear-gradient(currentColor, currentColor);

      &:hover {
            color: currentColor;
      }
}


/* 3.0 - link-underline */
%link-underline {
      color: currentColor;
      transition: background-size $transition-time ease 0s, color $transition-time ease $transition-time;
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 100% 1px;

      &:hover {
            color: currentColor;
            background-size: 0% 1px;
            background-position: 100% 100%;
      }
}