SU-SWS/decanter

///
/// When an element (e.g., a link) is hovered over, display an animation of a border that expands out from the middle next to the element.
///
/// @name fancy-hover
///
/// @param {variable} $color [$su-color-cardinal-red-dark]  - Hover/focus border color, e.g., #eeeeee.
/// @param {variable} $active [$su-color-black]  - Active border color.
/// @param {string} $position [bottom]  - The position of the border relative to the element the mixin is applied to. The default is 'bottom' and the other choices are 'top', 'left' and 'right'.
/// @param {string} $thickness [6px]  - The thickness of the border, e.g., '3px', '1em'.
///
/// @group mixin
@mixin fancy-hover($color: $su-color-cardinal-red-dark, $active: $su-color-black, $position: 'bottom', $thickness: '6px') {
  text-decoration: none;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    visibility: hidden;
    transition: transform 0.3s ease-in, background-color 0.3s ease-in;
    z-index: 1;
  }

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;

    &::before {
      visibility: visible;
      transition: transform 0.3s ease-out, background-color 0.3s ease-out;
    }
  }

  &:hover,
  &:focus {
    &::before {
      background-color: $color;
    }
  }

  &:active {
    &::before {
      background-color: $active;
    }
  }

  @if ($position == 'bottom' or $position == 'top') {
    &::before {
      width: 100%;
      height: #{$thickness};
      left: 0;
      transform: scaleX(0);
    }

    &:hover,
    &:focus,
    &:active {
      &::before {
        transform: scaleX(1);
      }
    }

    @if ($position == 'bottom') {
      @include padding(null null 0.8em);

      &::before {
        bottom: 0;
      }
    } @else if ($position == 'top') {
      @include padding(0.8em null null);

      &::before {
        top: 0;
      }
    }

  } @else if ($position == 'left' or $position == 'right') {
    &::before {
      height: 100%;
      width: #{$thickness};
      bottom: 0;
      transform: scaleY(0);
    }

    &:hover,
    &:focus,
    &:active {
      &::before {
        transform: scaleY(1);
      }
    }

    @if ($position == 'left') {
      &::before {
        left: 0;
      }
    } @else if ($position == 'right') {
      &::before {
        right: 0;
      }
    }
  }
}