/*
 * GENERATED from src/components/Link/Link.tsx by scripts/build-genome-components.mjs.
 * Do not edit. Fix the component in the repository and re-run
 * `npm run genome:components` — Genome mirrors the repo, it never authors.
 */

/* Link
 *
 * Read from the `Link` component set (3317:21041) and
 * `Document: Link` (33407:35806) — sections Content, Anatomy, Theme, State,
 * Size, Size Spec, Bold & Underline, Disabled, Component Properties.
 *
 * Everything geometric here was hardcoded before and is now bound. The values
 * that changed are recorded in notes/genome-sequence.md; the short version is
 * that md and lg were rendering at the wrong font size and the wrong icon size,
 * and the whole component was set in Inter rather than Saans.
 */

/* ── Base ── */
.link {
  display: inline-flex;
  align-items: center;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  cursor: pointer;

  /* Not in Figma — a rendering nicety so the underline clears the descenders.
     Figma only records `textDecoration: UNDERLINE` with no offset. */
  text-underline-offset: 3px;

  /* ⚠️ No motion tokens exist in the system — every transition in src/ is a
     literal. Recorded as a token gap; do not invent a value for it. */
  transition: color 0.15s ease, text-decoration-color 0.15s ease;

  /* Only here so the focus ring has a shape to follow. The Figma node is
     cornerRadius 0 and has no focus treatment — focus lives in the shared
     Focus document, not on this component. */
  border-radius: 2px;
  outline: none;
}

.link:focus-visible {
  outline: var(--ds-border-focus-ring) solid currentColor;
  outline-offset: var(--ds-spacing-components-focus-ring-outline-offset);
}

/* ── Size ──
 *
 * From `Size Spec` (33616:6877). Gap, icon and type all move together, and the
 * gap ramp is not flat — xs is the only size that tightens.
 *
 *   size   gap                icon                     type
 *   xs     space/5xs    2     interactive/media/xs  16  Label - Body/100  12/14
 *   sm     space/4xs    4     interactive/media/xs  16  Label - Body/200  14/16
 *   md     space/4xs    4     interactive/media/sm  20  Label - Body/300  16/18
 *   lg     space/4xs    4     interactive/media/lg  24  Label - Body/400  20/24
 */
.link--xs { gap: var(--ds-spacing-space-5xs); }
.link--sm,
.link--md,
.link--lg { gap: var(--ds-spacing-space-4xs); }

/* ── Type ──
 *
 * The composite token carries family, weight, size and line-height together, so
 * it is bound whole with `font:` and nothing is re-declared beside it. Figma
 * binds font/family/secondary — Saans. The previous `font-family: 'Inter'` was
 * not the system typeface at all.
 *
 * `Bold` selects Medium vs Regular, per `Bold & Underline` (33407:35869):
 * "Bold toggles between Saans Medium and Saans Regular." It is not a numeric
 * weight the component picks.
 *
 * ⚠️ --ds-typography-font-label-body-100-medium currently resolves to
 * font-weight *regular* in the export. Figma binds it to font/weight/medium
 * correctly; Supernova lost the weight on import. Bound as-is deliberately —
 * hardcoding the weight here would hide a defect that reaches Everlab
 * production too. Clears on the next Supernova re-import.
 */
.link--xs.link--bold    { font: var(--ds-typography-font-label-body-100-medium); }
.link--xs.link--regular { font: var(--ds-typography-font-label-body-100-regular); }
.link--sm.link--bold    { font: var(--ds-typography-font-label-body-200-medium); }
.link--sm.link--regular { font: var(--ds-typography-font-label-body-200-regular); }
.link--md.link--bold    { font: var(--ds-typography-font-label-body-300-medium); }
.link--md.link--regular { font: var(--ds-typography-font-label-body-300-regular); }
.link--lg.link--bold    { font: var(--ds-typography-font-label-body-400-medium); }
.link--lg.link--regular { font: var(--ds-typography-font-label-body-400-regular); }

/* ── Underline ──
 * `Underline=Yes` is a persistent underline. Hover also underlines, so an
 * un-underlined link still shows it is interactive on pointer.
 */
.link--underline,
.link:hover,
.link.link--hover {
  text-decoration-color: currentColor;
}

/* ── Icon slots ──
 * Both slots are optional. Figma binds width and height to the same
 * interactive/media step, so the slot is square.
 */
.link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.link--xs .link__icon,
.link--sm .link__icon { width: var(--ds-spacing-interactive-media-xs); height: var(--ds-spacing-interactive-media-xs); }
.link--md .link__icon { width: var(--ds-spacing-interactive-media-sm); height: var(--ds-spacing-interactive-media-sm); }
.link--lg .link__icon { width: var(--ds-spacing-interactive-media-lg); height: var(--ds-spacing-interactive-media-lg); }

.link__icon svg { width: 100%; height: 100%; display: block; }

/* ── Theme and State ──
 *
 * From `State` (33407:35842): "Hover uses the /200 token variant for a subtle
 * shift; Pressed returns to the /100 base."
 *
 * So Pressed resolves to the same colour as Rest. That is what the document
 * says and what the nodes do — the Pressed variant's fill is /100 at full
 * opacity, with no dimming. The previous `opacity: 0.85` on pressed was not in
 * Figma and has been removed rather than kept as a convenience.
 */
.link--primary                                             { color: var(--ds-color-fg-neutral-primary-100); }
.link--primary:hover,     .link--primary.link--hover        { color: var(--ds-color-fg-neutral-primary-200); }
.link--primary:active,    .link--primary.link--pressed      { color: var(--ds-color-fg-neutral-primary-100); }

.link--accent                                              { color: var(--ds-color-fg-brand-blue-primary-100); }
.link--accent:hover,      .link--accent.link--hover         { color: var(--ds-color-fg-brand-blue-primary-200); }
.link--accent:active,     .link--accent.link--pressed       { color: var(--ds-color-fg-brand-blue-primary-100); }

.link--success                                             { color: var(--ds-color-fg-sentiment-positive-100); }
.link--success:hover,     .link--success.link--hover        { color: var(--ds-color-fg-sentiment-positive-200); }
.link--success:active,    .link--success.link--pressed      { color: var(--ds-color-fg-sentiment-positive-100); }

.link--destructive                                         { color: var(--ds-color-fg-sentiment-negative-100); }
.link--destructive:hover, .link--destructive.link--hover    { color: var(--ds-color-fg-sentiment-negative-200); }
.link--destructive:active,.link--destructive.link--pressed  { color: var(--ds-color-fg-sentiment-negative-100); }

.link--warning                                             { color: var(--ds-color-fg-sentiment-warning-100); }
.link--warning:hover,     .link--warning.link--hover        { color: var(--ds-color-fg-sentiment-warning-200); }
.link--warning:active,    .link--warning.link--pressed      { color: var(--ds-color-fg-sentiment-warning-100); }

/* ── Disabled ──
 *
 * `Disabled` (33407:35877): "applies a muted foreground color". The token is
 * fg/neutral/tertiary/100, stated in the document and bound on the node.
 *
 * The previous `opacity: 0.4` on the whole element was invented — it dimmed the
 * colour token instead of replacing it, so the disabled link was a faded
 * version of whatever theme it carried rather than the one muted colour the
 * document specifies.
 *
 * ⚠️ The Figma node additionally sets 48% opacity on the label's fill while
 * leaving both icons at 100%. That is not in the document and is reported as a
 * defect rather than reproduced — see notes/genome-sequence.md.
 */
.link--disabled,
.link--disabled:hover,
.link--disabled:active,
.link--disabled.link--hover,
.link--disabled.link--pressed {
  color: var(--ds-color-fg-neutral-tertiary-100);
  cursor: not-allowed;
  pointer-events: none;
}