Link style init

SCSS
a {
  transition: all .2s ease;
  color: $global-link-color;
  &:hover {
    color: $global-link-hover-color;
  }
}

.link-primary {
  &:hover,
  &:focus {
    color: $global-primary-background!important;
    svg {
      color: $global-primary-background;
    }
  }
}
.link-secondary {
  transition: all .2s ease;
  &:hover,
  &:focus {
    color: $global-secondary-background!important;
  }
}

.link-no-underline {
  &:hover {
    &:before {
      display: none;
    }
    text-decoration: none;
  }
}
.link-underline {
  text-decoration: underline;
  &:hover {
    text-decoration: none;
    color: #666;
  }
}
.link-underline-ani {
  position: relative;
  &:before {
    content: '';
    @include pos-a('','',-3px,50%,100%,1px,5);
    background-color: $global-primary-background;
    transition: all .2s ease;
    transform-origin: 0 50%;
    transform: scaleX(0) translateX(-50%);
  }
  &:hover {
    text-decoration: none;
    color: #222;
    &:before {
      transform: scaleX(1) translateX(-50%);
    }
  }
}

.link-white {
  &:hover {
    color: #fff;
  }
}

.link-opacity {
  &>* {
    transition: all .2s ease;
  }
  &:hover,
  &>*:hover {
    opacity: .7;
  }
}