/*
 * Vendored from voice-assistant/board/hud/styles/badge.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Badge (contract 9.11): a small caps chip that names a status, a severity with its pips, a
 * count or a model, always with a word and never interactive.
 *
 *   <span class="hud-badge hud-label-sm">Open</span>
 *   tone      hud-badge--amber, --violet, --dim (ink, the default, has no modifier)
 *   modifier  --filled (a lit fill, with --amber or --violet), --dashed (not known yet),
 *             --severity (with data-severity), --count (a number, aria-hidden)
 *   parts     __dot (a hud-dot before the word), __pips (a hud-pips with its own modifier and data-level)
 *
 * A tone or a modifier sets only the --hud-badge-* hooks of the first rule, and that rule turns them into
 * the border, fill, light and ink, so each look is a few lines. Type comes from hud-label-sm in the markup.
 * A hue lights a chip's edge and words and never fills it: the reference lights lines, and its dim step of a
 * hue is only an unlit segment. The one plane is --filled, one per view.
 * A badge is not pressable, focusable or live, so it has no hover, focus, disabled or busy state, and no
 * motion: its states are its looks. The order of this file is the order of precedence: rest, tones,
 * filled, dashed, severity, count, parts.
 */

/* ---------- Rest: ink, a hairline chip ---------- */

/*
 * chip-height tall, never wrapping and never shrinking. The words are ink-secondary; a lit mark in front
 * of them (a __dot) brings them up to ink, which is how Speaking, Agreed and the resolved ledger words
 * differ from Open. The text-shadow is cleared so a badge inside a bloomed header does not inherit its bloom.
 */
.hud-badge {
  --hud-badge-edge: var(--line-strong);
  --hud-badge-fill: transparent;
  --hud-badge-ink: var(--ink-secondary);
  --hud-badge-glow: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--chip-height);
  padding: 0 var(--space-2);
  border: var(--stroke-hairline) solid var(--hud-badge-edge);
  border-radius: var(--radius-1);
  background-color: var(--hud-badge-fill);
  box-shadow: var(--hud-badge-glow);
  color: var(--hud-badge-ink);
  text-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
}

/* :where() keeps this as light as one class, so every tone below still wins over it */
.hud-badge:where(:has(> .hud-badge__dot)) {
  --hud-badge-ink: var(--ink);
}

/* ---------- Tones ---------- */

/* amber, live or hot: a lit amber edge and amber words on the plane behind, no fill (8.5:1 or more on every plane) */
.hud-badge--amber {
  --hud-badge-fill: transparent;
  --hud-badge-edge: var(--amber);
  --hud-badge-ink: var(--amber);
}

/* violet, held or chosen: a lit violet edge and violet words on the plane behind, no fill (6.0:1 or more on every plane) */
.hud-badge--violet {
  --hud-badge-fill: transparent;
  --hud-badge-edge: var(--violet);
  --hud-badge-ink: var(--violet);
}

/* dim, off or let go: no plane, a decorative edge and the dimmest ink that still reads (never on a tint) */
.hud-badge--dim {
  --hud-badge-edge: var(--line);
  --hud-badge-fill: transparent;
  --hud-badge-ink: var(--ink-dim);
}

/* ---------- Filled: the tone's hue as the plane, one chip per view ---------- */

/* with --amber or --violet only; on any other chip it does nothing */
.hud-badge--filled:where(.hud-badge--amber) {
  --hud-badge-edge: var(--amber);
  --hud-badge-fill: var(--amber);
  --hud-badge-ink: var(--on-amber);
  --hud-badge-glow: var(--glow-amber);
}

.hud-badge--filled:where(.hud-badge--violet) {
  --hud-badge-edge: var(--violet);
  --hud-badge-fill: var(--violet);
  --hud-badge-ink: var(--on-violet);
  --hud-badge-glow: var(--glow-violet);
}

/* on a lit plane the dot is the words' colour and gives no light of its own */
.hud-badge--filled .hud-badge__dot {
  background-color: currentColor;
  box-shadow: none;
}

/* ---------- Dashed: not known yet ---------- */

/*
 * The edge carries the meaning here, so it is line-strong (3:1 on every plane) whatever the tone, and a
 * lit edge goes dim with it. The tone's words stay.
 */
.hud-badge--dashed {
  --hud-badge-edge: var(--line-strong);
  border-style: dashed;
}

/* ---------- Severity: the word, the pips, and a step down in lightness ---------- */

/*
 * data-severity is the event contract's word. The pips carry their own hud-pips--<severity> and
 * data-level in the markup. High is the lightest and Low the darkest, so the order survives greyscale.
 * High and medium light their edge in the severity's own step, with no plane behind the word, so a row of
 * high-severity cards does not heap flat amber chips on the board.
 */
.hud-badge--severity[data-severity='high'] {
  --hud-badge-fill: transparent;
  --hud-badge-edge: var(--severity-high);
  --hud-badge-ink: var(--severity-high);
}

.hud-badge--severity[data-severity='medium'] {
  --hud-badge-fill: transparent;
  --hud-badge-edge: var(--severity-medium);
  --hud-badge-ink: var(--severity-medium);
}

.hud-badge--severity[data-severity='low'] {
  --hud-badge-ink: var(--severity-low);
}

/* ---------- Count: a number, square for one digit ---------- */

/*
 * aria-hidden: what holds it says the number in words. Tabular digits are centred, so the label's
 * tracking, which trails the last glyph, is dropped.
 */
.hud-badge--count {
  justify-content: center;
  min-width: var(--chip-height);
  padding: 0 var(--space-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- Parts ---------- */

/* the pips keep their size beside the word; __dot needs nothing beyond hud-dot and the filled rule above */
.hud-badge__pips {
  flex: none;
}