/* ============================================================================
   Badge / Default — COMPONENTS.md §14.1
   Reference implementation for the on-* pairing contract (CLAUDE.md).

   Every fill is paired with its matching on-solid token. Three shapes: Dot,
   Number (Circle), Number (Wide).

   Not implemented here: the `Gray` colour (F1 — fills with content/placeholder,
   a TEXT_FILL-scoped token used as a surface; soft/neutral/strong is intended)
   and `Yellow` (F2 — byte-identical to Warning). Both are defects; there is no
   reason to reproduce them.

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built, so literals stand in until they
   are. No colour, radius, spacing, border-width or font-size literal appears
   anywhere in this file.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-family: var(--font-family-text);
  font-size: var(--font-label-sm-size);
  line-height: var(--font-label-sm-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-default);
  /* TODO(tokens): size is not built — DESIGN.md §12.4. */
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: var(--space-xs);
}

/* Dot */
.badge--dot {
  min-inline-size: var(--space-xs);
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  padding-inline: 0;
}

/* Number (Wide) — multi-digit counts keep the pill shape rather than clipping. */
.badge--wide {
  padding-inline: var(--space-xs);
}

/* --- Colour axis. Fill + its only legal foreground (DESIGN.md §4.4). ------- */
.badge--error {
  background: var(--color-solid-danger-default);
  color: var(--color-on-solid-danger);
}
.badge--success {
  background: var(--color-solid-success-default);
  color: var(--color-on-solid-success);
}
.badge--warning {
  background: var(--color-solid-warning-default);
  color: var(--color-on-solid-warning);
}
.badge--brand {
  background: var(--color-solid-brand-default);
  color: var(--color-on-solid-brand);
}
.badge--info {
  background: var(--color-solid-info-default);
  color: var(--color-on-solid-info);
}
.badge--neutral {
  background: var(--color-solid-neutral-default);
  color: var(--color-on-solid-neutral);
}

/* --- Overlay form — a badge pinned to the corner of another element -------
   The ring is the host SURFACE colour, not a border colour: it is a cut-out
   that separates the badge from whatever it overlaps.

   Geometry matches the Figma frame: the badge centre sits at (+11.2, -11.2)
   from the centre of a 32px host, so the host must be the 32px glyph box —
   not the 40px touch target. */
.badge--overlay {
  position: absolute;
  inset-block-start: calc(50% - 11.2px);
  inset-inline-start: calc(50% + 11.2px);
  translate: -50% -50%;
  border: var(--border-width-thin) solid var(--color-surface-raised);
}
.badge--overlay[hidden] {
  display: none;
}