@use '../base' as *;

/* -------------------------------- 

File#: _1_link-effects
Title: Link Effects
Descr: A collection of link effects
Usage: codyhouse.co/license

-------------------------------- */

// v1
.link-fx-1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px; // !important - set fixed height
  padding: 0 6px;
  text-decoration: none;
  @include fontSmooth;

  .icon {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(100%) rotate(90deg);
    font-size: 32px; // icon size = link size 👆

    circle {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset .2s;
    }

    line {
      transition: transform .4s;
      transform-origin: 13px 15px;
    }

    line:last-child {
      transform-origin: 19px 15px;
    }
  }

  &::before { // border bottom
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: right center;
    transition: transform .2s .1s;
  }

  &:hover {
    .icon {
      circle {
        stroke-dashoffset: 200;
        transition: stroke-dashoffset .2s .1s;
      }

      line {
        transform: rotate(-180deg);
      }

      line:last-child {
        transform: rotate(180deg);
      }
    }

    &::before {
      transform: translateX(17px) scaleX(0);
      transition: transform .2s;
    }
  }
}

// v2
.link-fx-2 {
  position: relative;
  display: inline-block;
  padding: 4px 6px;
  color: var(--color-contrast-higher);
  text-decoration: none;
  background-image: linear-gradient(var(--color-contrast-higher), var(--color-contrast-higher));
  background-size: 100% 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  will-change: background-size;
  transition: background-size .3s var(--ease-out);
  @include fontSmooth;

  &::after {
    content: attr(data-link-fx-clone);
    color: var(--color-bg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: inherit;
    will-change: clip-path, transform;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    transform: translateY(4px);
    transition: clip-path .3s, transform .3s;
    transition-timing-function: var(--ease-out);
  }

  &:hover {
    background-size: 100% 100%;

    &::after {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      transform: translateY(0px);
    }
  }
}

// v3
.link-fx-3 {
  position: relative;
  display: inline-flex;
  padding: 4px 6px;
  text-decoration: none;
  align-items: center;

  .icon {
    display: block;
    font-size: 12px; // icon size
    margin-left: 8px;
    position: relative;
    opacity: 0;
    visibility: hidden;
    will-change: transform;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s var(--ease-out), visibility 0s .3s;

    line {
      transform-origin: 9px 6px;
      will-change: transform;
      transition: transform .3s var(--ease-out);
    }

    line:first-child {
      transform: rotate(20deg);
    }

    line:last-child {
      transform: rotate(-20deg);
    }
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 18px); // 18px = icon size (12px) + padding right (6px)
    height: 1px;
    background-color: currentColor;
    transition: .3s var(--ease-out);
  }

  &:hover {
    .icon {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .3s, transform .3s var(--ease-out);

      line:first-child, line:last-child {
        transform: rotate(0);
      }
    }

    &::before {
      width: 100%;
    }
  }
}

// v4
.link-fx-4 {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  background-color: var(--color-contrast-lower);
  color: var(--color-contrast-higher);
  text-decoration: none;
  @include fontSmooth;

  &::before {
    content: attr(data-link-fx-clone);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    will-change: clip-path;
    clip-path: polygon(0% 0%, 1px 0%, 1px 100%, 0% 100%);
    transition: clip-path .3s var(--ease-out);
  }

  &:hover {
    &::before {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
}

.link-fx-5 {
  display: inline-block;
  padding: 4px 0;
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' viewBox='0 0 16 4'%3E%3Cpath d='M0,3.5c4,0,4-3,8-3s4,3,8,3' fill='none' stroke='%232a6df4' opacity='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E"); // 👈 edit stroke='%232a6df4' (last 6 digits - hexadecimal color) to change the color of the SVG decoration
  background-repeat: repeat-x;
  background-position: 0px 100%;
  background-size: 0;

  &:hover {
    background-size: 16px 4px;
    animation: link-fx-5-animation .4s linear infinite;
  }
}

@keyframes link-fx-5-animation {
  from {
    background-position: 0px 100%;
  }

  to {
    background-position: 16px 100%;
  }
}