@use 'sass:color';
@use 'include' as i;

@include i.responsive() using ($vars) {
  a {
    $border-shift: 10px;
    $line-width: 2px;

    @include i.special-text-font($vars);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
    overflow: hidden;

    padding-bottom: $line-width;

    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
    }

    &:before {
      width: calc(100% + #{$border-shift});
      border-bottom: $line-width dashed map_get($vars, i.$accent-color);
      transition: transform map_get($vars, i.$transition-time);
    }

    &:after {
      width: 100%;
      height: $line-width;
      background: linear-gradient(
        90deg,
        map_get($vars, i.$card-color) 0,
        color.adjust(map_get($vars, i.$card-color), $alpha: -1) 4px,
        color.adjust(map_get($vars, i.$card-color), $alpha: -1) calc(100% - 4px),
        map_get($vars, i.$card-color) 100%
      );
    }

    &:hover {
      &:before {
        transform: translateX(-$border-shift);
      }
    }
  }
}