$_default-thickness: 2px;

%_animate-underline {
  display: inline;
  line-height: 1;
  background-image: linear-gradient(0deg,
    var(--animate-underline--underline-color, currentColor) 0%,
    var(--animate-underline--underline-color, currentColor) 100%
  );
  background-size:
    var(--animate-underline--bg-size--width, 0%)
    var(--animate-underline--bg-size--thickness, #{ $_default-thickness });
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: var(--animate-underline--bg-position-x, right);
  transition: all 200ms ease-in-out;

  &:hover,
  &:focus {
    --animate-underline--bg-size--width: var(--animate-underline--bg-size--width--active);
  }
}

%animate-underline-to-right {
  --animate-underline--bg-size--width: 100%;
  --animate-underline--bg-size--width--active: 0%;
  @extend %_animate-underline;
}

%animate-underline-in-to-right {
  --animate-underline--bg-position-x: left;
  --animate-underline--bg-size--width: 0%;
  --animate-underline--bg-size--width--active: 100%;
  @extend %_animate-underline;
}

%animate-underline-to-left {
  --animate-underline--bg-position-x: left;
  --animate-underline--bg-size--width: 100%;
  --animate-underline--bg-size--width--active: 0%;
  @extend %_animate-underline;
}

%animate-underline-in-to-left {
  --animate-underline--bg-position-x: right;
  --animate-underline--bg-size--width--active: 100%;
  --animate-underline--bg-size--width: 0%;
  @extend %_animate-underline;
}
