@import "../settings/variables";

.link {
  color: $link-color-blue;
  text-decoration: none;

  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  /**
  * `outline` if a preferrable choice because if does not affect box model.
  * Links are assumed to not have `border-radius`, as it works poorly with `outline`
  * (rounded elements will still have square outline)
  */
  &:focus {
    outline: 1px solid $core-blue-50;
    box-shadow: 0 0 0 3px $core-blue-94;
  }

  &--gray {
    color: $link-color-gray;

    &:hover {
      color: $link-color-hover;
    }
  }

  &--white {
    color: $link-color-white;
  }
}