/* status-chip.css: Status chip (component 8). Owner: group B (P2.T5).
   Height --size-chip (20, a minimum), padding-inline --space-3, gap --space-2, --radius-chip, --type-label, no border.
   Tone pair from the 02 status tone map: neutral is --text-secondary on --surface-sunken, the others the semantic colour on its
   subtle token. Never a button, never wraps. */
[data-component="status-chip"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-block-size: var(--size-chip);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: var(--type-label);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  vertical-align: middle;
}
[data-component="status-chip"][data-tone="info"] { background: var(--info-subtle); color: var(--info); }
[data-component="status-chip"][data-tone="good"] { background: var(--good-subtle); color: var(--good); }
[data-component="status-chip"][data-tone="warning"] { background: var(--warning-subtle); color: var(--warning); }
[data-component="status-chip"][data-tone="critical"] { background: var(--critical-subtle); color: var(--critical); }
[data-component="status-chip"] .icon { flex: none; }
.status-chip__word { white-space: nowrap; }

/* Kitchen sink only: a stand-in for a selected table row, to show the chip keeps its own background on --brand-subtle. */
.status-chip-demo__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-inline-start: var(--border-width-thick) solid var(--brand);
  background: var(--brand-subtle);
}