/**
 * @file
 * Unified badge system for Nebion theme.
 * Single .nb-badge class with color and size modifiers.
 */

/* ==========================================================================
   Unified Badge System (.nb-badge)

   Usage:
   <span class="nb-badge --success">Active</span>
   <span class="nb-badge --warning --sm">Pending</span>
   <span class="nb-badge --error --xs --uppercase">Production</span>
   <span class="nb-badge --info --dot">Running</span>
   ========================================================================== */

/* Base Badge */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  line-height: var(--line-height-tight);
  /* Default: neutral */
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* ==========================================================================
   Color Modifiers
   ========================================================================== */

/* Success / Active / Ready */
.nb-badge.--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Warning / Pending */
.nb-badge.--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* Error / Failed / Offline */
.nb-badge.--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Info / Running */
.nb-badge.--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Neutral / Disabled / Unknown (default, explicit) */
.nb-badge.--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Active state (green highlight) */
.nb-badge.--active {
  background: var(--color-active-bg);
  color: var(--color-active-text);
}

/* Primary (brand color) */
.nb-badge.--primary {
  background: var(--color-primary);
  color: var(--color-dark);
}

/* Environment Tags */
.nb-badge.--prod {
  background: var(--color-env-prod-bg);
  color: var(--color-env-prod-text);
}

.nb-badge.--dev {
  background: var(--color-env-dev-bg);
  color: var(--color-env-dev-text);
}

.nb-badge.--pr {
  background: var(--color-env-pr-bg);
  color: var(--color-env-pr-text);
}

/* ==========================================================================
   Size Modifiers
   ========================================================================== */

/* Small */
.nb-badge.--sm {
  padding: 0.1875rem var(--space-2);
  font-size: var(--font-size-xs);
}

/* Extra Small (tags) */
.nb-badge.--xs {
  padding: 0.125rem var(--space-2);
  font-size: 0.5625rem;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Optional Modifiers
   ========================================================================== */

/* Dot indicator (before text) */
.nb-badge.--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Uppercase text */
.nb-badge.--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--font-weight-bold);
}

/* Spinner for running state */
.nb-badge.--spinner::before {
  content: '';
  width: 6px;
  height: 6px;
  background: transparent;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: nb-badge-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes nb-badge-spin {
  to { transform: rotate(360deg); }
}