/*
 * 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 list
 * item — restyles them with a single class and never has to out-shout this.
 *
 * One green for every link, and no visited colour (tasks/redesign, A6).
 *
 *   .link               a faint underline at rest, for running text: green
 *                       and ink sit too close (2.2:1) for colour alone to
 *                       mark a link inside a sentence (WCAG 1.4.1)
 *   .link--quiet        colour alone at rest, underline on hover and focus: for
 *                       tables, tab bars, lists and blurbs, where everything
 *                       is a link
 *   [aria-current=page] the link to the page you are on: ink, on a 2px ink
 *                       underline, like the current tab
 */
@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 35%, transparent);
    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[aria-current="page"]) {
    color: var(--color-ink);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-ink);
    text-underline-offset: 0.35em;
    cursor: default;
  }
}