/* <link-ui> — inline navigation primitive.

   The custom element wraps a real <a> element. Style the anchor (not
   the host) so the rendered hyperlink inherits the proper text-decoration
   + focus-ring behavior from the native element. The host is `display:
   inline` so it flows in sentence context by default. */

@scope (link-ui) {
  :where(:scope) {
    --link-fg:              var(--a-link);
    --link-fg-hover:        var(--a-link-hover);
    --link-fg-visited:      var(--a-link-visited);
    --link-underline-offset: 2px;
    --link-focus-ring:      var(--a-focus-ring);
  }

  :scope {
    display: inline;
    color: var(--link-fg);
    /* The text-decoration is on the inner <a>, not the host, so that
       host-level color overrides cascade correctly. */
  }

  :scope > a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--link-underline-offset);
    cursor: pointer;
    /* Standard transition for color hover. */
    transition: color var(--a-duration-fast) var(--a-easing);
  }

  /* When the anchor contains an icon, present it inline with text. */
  :scope > a:has(icon-ui) {
    display: inline-flex;
    align-items: baseline;
    gap: var(--a-space-1);
  }

  :scope > a:hover {
    color: var(--link-fg-hover);
  }

  :scope > a:visited {
    color: var(--link-fg-visited);
  }

  /* Focus ring on the anchor (the actual focusable element). */
  :scope > a:focus-visible {
    outline: none;
    box-shadow: var(--link-focus-ring);
    border-radius: var(--a-radius-sm);
  }

  /* ── Variants ── */

  /* `subtle` — no underline until hover. For tighter designs. */
  :scope[variant="subtle"] > a {
    text-decoration: none;
  }
  :scope[variant="subtle"] > a:hover,
  :scope[variant="subtle"] > a:focus-visible {
    text-decoration: underline;
  }

  /* `quiet` — drop link color; match surrounding text. The link
     affordance is implied by hover behavior + cursor. For "Already
     have an account?" type prose where the link role is contextual. */
  :scope[variant="quiet"] {
    --link-fg: inherit;
    --link-fg-hover: var(--a-link-hover);
  }
  :scope[variant="quiet"] > a {
    text-decoration: none;
  }
  :scope[variant="quiet"] > a:hover {
    text-decoration: underline;
  }

  /* ── Layout modifiers ── */

  :scope[block] {
    display: block;
  }
  :scope[block] > a {
    display: block;
  }

  /* ── Disabled ── */

  :scope[disabled] > a {
    color: var(--a-fg-disabled);
    cursor: not-allowed;
    text-decoration-color: var(--a-fg-disabled);
    pointer-events: none;
  }
}

/* `:scope:state` selectors inside @scope have known Safari-17 issues,
   per the comment in button.css. None used here — :focus-visible and
   :hover are on the inner <a>, not on :scope — so this component
   is unaffected. */
