@scope (.badge) {
  :scope {
    --_text: var(--color-text-secondary);
    --_radius: var(--radius-full);
    --_size: var(--text-base);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.25rem 0.75rem;
    background: var(--_bg);
    color: var(--_text);
    border-radius: var(--_radius);
    font-size: var(--_size);
    font-weight: var(--font-medium);
    line-height: 1;
    white-space: nowrap;
    min-height: 1.5rem;
  }

  :scope.badge--success {
    --_bg: var(--color-success-muted);
    --_text: var(--color-success-text);
  }

  :scope.badge--warning {
    --_bg: var(--color-warning-muted);
    --_text: var(--color-warning-text);
  }

  :scope.badge--error {
    --_bg: var(--color-error-muted);
    --_text: var(--color-error-text);
  }

  :scope.badge--info {
    --_bg: var(--color-info-muted);
    --_text: var(--color-info-text);
  }

  .icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    fill: currentcolor;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
}