/*
 * Status pills, to Glacier's badge spec (section 9.6): 24px tall, pill radius,
 * caption type, a tinted fill with the darker ramp value as the text colour.
 *
 * Extracted from dashboard.css because the transfers table, the mapping table
 * and the mapping form all render them -- a block shared by three screens does
 * not belong in one screen's stylesheet.
 *
 * Every pill carries a text label, never colour alone (Glacier mistake 13). The
 * dot before the label is a second, non-colour cue and also gives the pill a
 * shape an operator can pick out when scanning a long column.
 *
 * Colours come from the `--outcome-*` vocabulary in application.css, shared
 * with the stats counters, so "failed" means one thing everywhere.
 */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: currentcolor;
}

.pill.is-success {
  color: var(--outcome-success-fg);
  background: var(--outcome-success-bg);
}

.pill.is-failed {
  color: var(--outcome-failed-fg);
  background: var(--outcome-failed-bg);
}

.pill.is-pending {
  color: var(--outcome-pending-fg);
  background: var(--outcome-pending-bg);
}

/* Drift is not a failure -- it is a reconciliation finding an operator settles
   in ACC -- so it takes the info ramp and must never read as red alongside
   genuine delivery failures. */
.pill.is-drift {
  color: var(--outcome-drift-fg);
  background: var(--outcome-drift-bg);
}

.pill.is-neutral {
  color: var(--status-neutral-fg);
  background: var(--status-neutral-bg);
}