.link {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;

  transition: color .2s linear;

  &:hover {
    text-decoration: underline;
  }

  &--white {
    color: $white;
  }

  &--gray {
    color: #9E9E9E;
  }

  &--red {
    color: $red;
  }

  &--blue {
    color: $blue;

    &:hover {
      text-decoration: none;
      color: rgba($blue, .5);
    }
  }

  &--primary {
    color: $primary;
  }

  &--dark {
    color: $dark;
  }

  &--underline {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  &--icon {
    display: inline-flex;
    align-items: center;
  }

  &--sm {
    font-size: 1.4rem;
  }
}

.link__icon {
  margin-right: 0.5rem;
}