@use "system/colors";
@use "mixins";
@use "system/states";

.ods-link {
  text-decoration: underline;
  word-wrap: break-word;
  max-width: 100%;

  @include mixins.states;

  &--external {
    @include mixins.icon-right("new-window");
  }

  &--chevron-right {
    @include mixins.icon-left("chevron-right");

    display: inline-block;
  }

  &--arrow-right {
    @include mixins.icon-left("link-arrow");

    display: inline-block;
  }

  &--focus,
  &:focus-visible {
    outline: none;
    color: states.$hover !important;
    background-color: colors.$purple-light;
  }

  &--state-light {
    &:visited,
    &-visited {
      color: states.$visited-light !important;
    }

    &:hover,
    &-hover,
    &:focus,
    &-focus {
      color: states.$hover-light !important;
    }

    &:focus,
    &-focus {
      color: states.$hover !important;
      background-color: colors.$purple-light;
    }

    &:focus-visible {
      color: states.$hover !important;
      background-color: colors.$purple-light;
    }

    &:active,
    &-active {
      color: states.$hover !important;
    }
  }

  &--no-decoration {
    display: inline-block;
    text-decoration: none;
  }
}