@use './focus';

$ods-link-font-weight: 600;

@mixin ods-link() {
  display: inline-flex;
  flex-flow: row;
  grid-gap: 8px;
  align-items: center;
  transition: background-size .2s ease-out;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  cursor: pointer;
  text-decoration: none;
  font-weight: $ods-link-font-weight;

  &:focus-visible,
  &:hover {
    background-size: 100% 1px;
  }

  &:focus-visible {
    @include focus.ods-focus();
  }
}

@mixin ods-link-color($color) {
  @if $color == 'primary' {
    color: var(--ods-color-primary-500);

    &:focus-visible,
    &:hover {
      color: var(--ods-color-primary-600);
    }

    &:visited {
      color: var(--ods-color-primary-700);
    }
  }
}