/* ===== BADGE COMPONENT (ri-badge) ===== */

.ri-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  position: relative;
  z-index: 0;
  contain: layout style paint;
}

.ri-badge::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: calc(20px + 1px);
  background: radial-gradient(250px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-rgb), .25), transparent 40%);
}

.ri-badge::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(20px - 1px);
  background: var(--primary-bg);
}

.ri-badge:hover::before {
  opacity: 1;
}

[data-theme="light"] .ri-badge::before,
[data-theme="light"] .ri-badge::after {
  display: none;
}

[data-theme="light"] .ri-badge {
  contain: unset;
}

/* --- Size: sm --- */
.ri-badge--sm {
  padding: 2px 8px;
  font-size: 11px;
  gap: 4px;
}

/* --- Variant colors (defaults for dark theme) --- */
.ri-badge--default {
  background: var(--primary-bg);
  color: var(--primary-dark);
  border: 1px solid rgba(var(--glow-rgb), 0.2);
}

.ri-badge--success {
  background: #0d2818;
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.ri-badge--warning {
  background: #1c1708;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.ri-badge--error {
  background: #2d1515;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.ri-badge--info {
  background: #0c1929;
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

/* --- Light theme --- */
[data-theme="light"] .ri-badge--default {
  background: var(--primary-bg);
  color: var(--primary-dark);
  border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="light"] .ri-badge--success {
  background: #dcfce7;
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

[data-theme="light"] .ri-badge--warning {
  background: #fef3c7;
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.2);
}

[data-theme="light"] .ri-badge--error {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .ri-badge--info {
  background: #dbeafe;
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}