@use "sass:map";
@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/variants" as vr;

// Links — one class carrying rest, hover, active and focus.
.qo-link {
  color: cl.$text-primary;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;

  &:hover { color: cl.$text-primary-hover; text-decoration: underline; }
  &:focus-visible {
    outline: 0;
    box-shadow: cl.$focus-ring;
    border-radius: bo.$border-radius-sm;
  }

  &.qo-link-muted {
    color: cl.$text-secondary;
    &:hover { color: cl.$text-dark; }
  }

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

  @each $name, $spec in vr.$variants {
    &.qo-link-#{$name} {
      color: map.get($spec, ink);
      &:hover { color: map.get($spec, hover); }
    }
  }
}