@use '../styles/variables' as tokens;
@use './focus' as *;

@mixin vi-link-styles {
  color: var(--vi-link-color, #{tokens.$link-color});
  text-decoration-thickness: 1px;
  text-underline-offset: var(--vi-link-underline-offset, 2px);
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  outline: none;
  text-decoration: underline;

  &.underline-none {
    text-decoration: none;
  }

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

  &.size-inherit {
    font-size: inherit;
  }

  &.size-sm {
    font-size: var(--vi-font-size-sm, #{tokens.$font-size-sm});
  }

  &.size-md {
    font-size: var(--vi-font-size-base, #{tokens.$font-size-base});
  }

  &.size-lg {
    font-size: var(--vi-font-size-lg, #{tokens.$font-size-lg});
  }

  &.variant-secondary {
    --vi-link-color: var(--vi-link-color-secondary, #{tokens.$link-color-secondary});
    --vi-link-color-hover: var(--vi-link-color-secondary-hover, #{tokens.$color-grey-800});
    --vi-link-color-active: var(--vi-link-color-secondary-active, #{tokens.$color-grey-900});
    --vi-link-color-visited: var(--vi-link-color-secondary-visited, #{tokens.$color-grey-700});
  }

  &.variant-muted {
    --vi-link-color: var(--vi-link-color-muted, #{tokens.$link-color-muted});
    --vi-link-color-hover: var(--vi-link-color-muted-hover, #{tokens.$color-grey-600});
    --vi-link-color-active: var(--vi-link-color-muted-active, #{tokens.$color-grey-700});
    --vi-link-color-visited: var(--vi-link-color-muted-visited, #{tokens.$color-grey-500});
  }

  &:visited {
    color: var(--vi-link-color-visited, #{tokens.$link-color-visited});
  }

  &:hover {
    color: var(--vi-link-color-hover, #{tokens.$link-color-hover});
  }

  &:active {
    color: var(--vi-link-color-active, #{tokens.$link-color-active});
  }

  &:focus-visible {
    @include vi-focus-ring(tokens.$link-color, transparent);
  }

  &[aria-disabled="true"], &.disabled {
    color: var(--vi-link-color-disabled, #{tokens.$link-color-disabled});
    pointer-events: none;
    cursor: not-allowed;
    text-decoration: none;
  }
}