index.scss

.a-link {
  display: inline;
  text-decoration: none;
  color: $color-axa-blue;
  align-items: center;

  @include text(t3);

  &:active,
  &:hover {
    text-decoration: underline;
    color: $color-deep-sapphire;
  }

  // Simple Link == Everything except the normal hyperlinks
  &--simple {
    display: inline-flex;
    @include text(t4, bold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  &__icon {
    display: flex;
    margin-left: 10px;
    min-width: 24px; // just for IE

    &--left {
      margin-left: 0;
      margin-right: 3px;
    }
  }

  &--icon {
    &:active,
    &:hover {
      text-decoration: none;
    }
  }

  &--red {
    color: $color-burnt-sienna;

    &:hover,
    &:active {
      color: $color-flamingo;
    }
  }

  &--white {
    color: $color-prim-white;
    opacity: 1;

    &:active,
    &:hover {
      color: $color-prim-white;
      opacity: 0.65;
    }
  }

  &--hyperlink-white,
  &--hyperlink-white-underline {
    color: $color-prim-white;
    opacity: 1;

    &:active,
    &:hover {
      color: $color-prim-white;
      text-decoration: underline;
      opacity: 0.65;
    }
  }

  &--hyperlink-white-underline {
    text-decoration: underline;
  }

  &--motion {
    &:hover,
    &:active,
    &:focus {
      .a-link__icon {
        animation-duration: 0.6s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-name: fadeOutRightInLeft;
      }
    }
  }
}

@keyframes fadeOutRightInLeft {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }

  51% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}