/*
 * Links, from `link_classes` / `styled_link_to`.
 *
 * Wrapped in :where() so a link has no specificity of its own: a component
 * that renders its links through `styled_link_to` — a tab, a flag, a sidebar
 * item — restyles them with a single class and never has to out-shout this.
 *
 *   .link               underlined, for running text (WCAG 1.4.1)
 *   .link--quiet        colour alone at rest, underline on hover and focus: for
 *                       tables, tab bars, badge lists, where everything is a link
 *   .link--visited      remembers a visit; news headlines only
 *   [aria-current=page] the link to the page you are on, which is text
 */
@layer components {
  :where(.link) {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 2px;
    transition: color var(--duration-fast), text-decoration-color var(--duration-fast);

    &:hover {
      color: var(--color-link-hover);
      text-decoration-color: currentColor;
    }
  }

  :where(.link--quiet) {
    text-decoration-line: none;

    &:hover,
    &:focus-visible {
      text-decoration-line: underline;
    }
  }

  :where(.link--visited:visited) {
    color: var(--color-link-visited);
  }

  :where(.link[aria-current="page"]) {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
    text-decoration-line: none;
    cursor: default;
  }
}