/* =============================================================================
   FILE: resources/css/components/chip.css
   Frontend Spec Section 5.6 — Chip / Status Badge
============================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
}

.chip--paid {
  background-color: var(--color-success-tint);
  color: var(--color-success);
}

.chip--unpaid {
  background-color: var(--color-amber-tint);
  color: var(--color-amber-text);
}

.chip--neutral {
  background-color: var(--color-paper-dim);
  color: var(--color-ink-muted);
}

.chip__icon {
  width: 12px;
  height: 12px;
}