/*
 * GENERATED from src/components/Label/Label.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.
 */

/* Label
 *
 * Read from the `Label` component (3318:21464) and
 * `Component Documentation — Label` (33466:38890).
 *
 * A vertical stack of two rows: a label row, and an optional support row.
 * Everything except the label text itself is toggled by a boolean.
 */

.ds-label-label {
  display: flex;
  flex-direction: column;
  /* ⚠️ Figma binds the root gap to `unit/4`, a primitive. Primitives are not
     exported — only the semantic layer reaches code — so there is no --ds- token
     for it. `space/4xs` is the semantic token at the same 4px and is used here.
     Recorded in notes/genome-sequence.ds-label-md. */
  gap: var(--ds-spacing-space-4xs);
}

/* ── Label row ── */
.ds-label-row {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-space-4xs);
}

.ds-label-main {
  font: var(--ds-typography-font-label-body-300-regular);
  color: var(--ds-color-fg-neutral-primary-100);
}

/* The document calls this the "(optional)" indicator; the node is named
   `Asterisk` but renders the word, not a symbol. Same type as the label, a
   step down in colour. */
.ds-label-optional {
  font: var(--ds-typography-font-label-body-300-regular);
  color: var(--ds-color-fg-neutral-tertiary-100);
}

/* ── Info icon ──
   20×20, bound to size/2xs. Hovering it reveals the tooltip. */
.ds-label-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
  width: var(--ds-spacing-size-2xs);
  height: var(--ds-spacing-size-2xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-color-fg-neutral-secondary-100);
  cursor: help;
}

.ds-label-info svg { width: 100%; height: 100%; display: block; }

.ds-label-info:focus-visible {
  outline: var(--ds-border-focus-ring) solid var(--ds-color-components-focus-ring-default);
  outline-offset: var(--ds-spacing-components-focus-ring-outline-offset);
  border-radius: var(--ds-radius-full);
}

/* The tooltip sits above the icon and appears on hover or keyboard focus.
   Keyboard focus matters: a tooltip that only answers to a mouse is not
   reachable at all for a keyboard user. */
.ds-label-tooltipWrap {
  position: absolute;
  bottom: calc(100% + var(--ds-spacing-space-4xs));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 1;
}

.ds-label-info:hover .ds-label-tooltipWrap,
.ds-label-info:focus-visible .ds-label-tooltipWrap { display: block; }

/* ── Support row ──
   Padded 4px top and bottom, bound to space/4xs. */
.ds-label-support {
  display: flex;
  align-items: center;
  padding: var(--ds-spacing-space-4xs) 0;
}

.ds-label-supportText {
  font: var(--ds-typography-font-label-body-200-regular);
  color: var(--ds-color-fg-neutral-tertiary-100);
}

/* ── Disabled ──
   Not a Figma property on this component; it follows the parent form control,
   so the class exists for a parent to apply rather than for Label to decide. */
.ds-label-disabled { opacity: 0.5; }