/**
* Mixins to links.
*/

/**
* Inline.
*/

@mixin link-inline-base {
  @include text-link;

  text-align: left;
  background-repeat: no-repeat;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: left 0 bottom 0;
  transition: $transition-default;
  transition-property: color, background-size, background-color, opacity;

  &[disabled],
  &.disabled {
    opacity: 0.6;
    background-size: 0 1px;

    &:focus-visible {
      animation-name: none;
    }
  }
}

@mixin link-inline {
  @include link-inline-base;

  background-size: 100% 1px;

  &:hover,
  &:active,
  &:focus-visible {
    @include link-inline-active;
  }
}

@mixin link-inline-active {
  animation-name: link-underline-full;
  animation-duration: $transition-timing-500;
}

/**
* Underline.
*/
@mixin underline-base {
  background-repeat: no-repeat;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: left 0 bottom 0;
  transition: $transition-default;
  background-size: 0 1px;
  transition-property: background-size;
}

@mixin underline-base-active {
  background-repeat: no-repeat;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: left 0 bottom 0;
  background-size: 100% 1px;
}

@mixin link-underline-base {
  @include text-link;

  position: relative;
  display: inline-block;
  text-align: left;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    box-sizing: content-box;
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    pointer-events: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: $spacing-4;
    transition: border-color $transition-default;
    transform: translate(-50%, -50%);
  }

  span {
    background-repeat: no-repeat;
    background-image: linear-gradient(currentcolor, currentcolor);
    background-position: left 0 bottom 0;
    transition: $transition-default;
    transition-property: background-size;
  }

  &:focus-visible:not(:hover) {
    span {
      background-size: 0 1px;
    }

    &::after {
      border-color: currentcolor;
    }
  }

  &:focus-visible:hover,
  &:focus-visible:active {
    &::after {
      border-color: transparent;
    }
  }

  &[disabled],
  &.disabled {
    opacity: 0.6;

    span {
      background-size: 0 1px;
    }

    &::after {
      border-color: transparent;
    }

    &:focus-visible {
      &::after {
        border-color: transparent;
      }
    }
  }
}

@mixin link-underline {
  @include link-underline-base;

  span {
    background-size: 0% 1px;
  }

  &:hover,
  &:active,
  &.is-active {
    span {
      @include link-underline-active;
    }
  }
}

@mixin link-underline-active {
  background-size: 100% 1px;
}

@mixin link-underline-full {
  @include link-underline-base;

  span {
    background-size: 100% 1px;
  }

  &:hover,
  &:active {
    span {
      @include link-underline-full-active;
    }
  }
}

@mixin link-underline-full-active {
  animation-name: link-underline-full;
  animation-duration: $transition-timing-500;
}

/**
* Icons.
*/

@mixin link-icon-base {
  @include text-link;
  @include link-underline-base;

  color: currentcolor;

  span {
    background-repeat: no-repeat;
    background-image: linear-gradient(currentcolor, currentcolor);
    background-position: right 0 bottom 0;
    background-size: 100% 1px;
    transition: $transition-default;
    transition-property: color;
  }

  &::before {
    content: '';
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    display: inline-block;
    width: multiple(4);
    height: multiple(4);
    background-color: currentcolor;
    mask-image: url('@/assets/icons/arrow-right.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
  }

  // &:hover,
  // &:active {
  //   span {
  //     animation-name: link-icon-line;
  //     animation-duration: $transition-timing-350;
  //   }
  // }

  // &:hover,
  // &:active,
  // &:focus-visible {
  //   &::before {
  //     animation-name: link-icon-ltr;
  //     animation-duration: $transition-timing-350;
  //   }
  // }

  &[disabled],
  &.disabled {
    &:focus-visible {
      &::before {
        animation-name: none;
      }
    }
  }
}

@mixin link-icon-left {
  @include link-icon-base;

  padding-left: $spacing-24;

  &::before {
    left: 0;
  }
}

@mixin link-icon-right {
  @include link-icon-base;

  padding-right: $spacing-24;

  &::before {
    right: 0;
  }
}

/**
* Menu.
*/

@mixin link-menu {
  @include link-underline;
  @include text;

  &.router-link-active {
    span {
      @include link-menu-active;
    }
  }
}

@mixin link-menu-active {
  @include link-underline-active;
}

/**
* Misc.
*/

@mixin link-full {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@mixin link-skip {
  @include screen-reader;

  &:focus,
  &:focus-visible {
    @include btn-secondary;

    position: absolute;
    top: $spacing-8;
    left: $spacing-8;
    z-index: 9999;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: unset;
  }
}

/**
* Pass a $color and $hoverColor to setup different icons and colors.
* $color: default $color-black
* $hoverColor: default $color-black
*/
@mixin link-color($color: $color-black, $hoverColor: $color-black) {
  color: $color;

  &:hover,
  &:active,
  &:focus-within {
    color: $hoverColor;
  }
}

@mixin link-style {
  color: $color-blue;
}