.badge {
  --badge-dot-size: 0.375rem;
  --badge-ring-size: 0.3125rem;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-ui);
  white-space: nowrap;
  transition:
    background-color var(--duration-state) var(--easing-state),
    color var(--duration-state) var(--easing-state);
}

.badge__dot {
  flex: none;
  inline-size: var(--badge-dot-size);
  block-size: var(--badge-dot-size);
  border-radius: var(--radius-pill);
  background-color: currentcolor;
}

.badge--positive {
  background-color: var(--color-incoming-soft);
  color: var(--color-incoming);
}

.badge--warning {
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge--negative {
  background-color: var(--color-negative-soft);
  color: var(--color-negative);
}

.badge[aria-busy="true"] .badge__dot {
  animation: badge-busy var(--duration-pulse) var(--easing-enter) infinite;
}

@keyframes badge-busy {
  from {
    box-shadow: 0 0 0 0 currentcolor;
  }

  to {
    box-shadow: 0 0 0 var(--badge-ring-size) transparent;
  }
}

@media (forced-colors: active) {
  .badge {
    outline: var(--border-width) solid currentcolor;
  }

  .badge__dot {
    outline: var(--border-width) solid currentcolor;
  }
}