/* Badge: a short status label, for tables and lists.
 *
 *   <span class="badge badge-success">Paid</span>
 *
 * Variants: badge-success, badge-danger, badge-warning, badge-info, badge-neutral.
 * Pale fills with dark text in every look; the fills are shared by both brands.
 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: var(--cf-radius-pill);
  background: var(--cf-badge-bg, var(--cf-badge-neutral));
  color: var(--cf-on-badge);
  font-size: var(--cf-font-size-sm);
  line-height: 24px;
  white-space: nowrap;
}

.badge-success { --cf-badge-bg: var(--cf-badge-success); }
.badge-danger { --cf-badge-bg: var(--cf-badge-danger); }
.badge-warning { --cf-badge-bg: var(--cf-badge-warning); }
.badge-info { --cf-badge-bg: var(--cf-badge-info); }
.badge-neutral { --cf-badge-bg: var(--cf-badge-neutral); }