/**
 * KMC BROKER - Badge Components
 * Small status indicators and labels
 */

/* ===== BASE BADGE ===== */
.kmc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-base);
  transition: all var(--duration-fast) var(--ease-out);
}

/* ===== BADGE SIZES ===== */
.kmc-badge--sm {
  padding: var(--space-1) var(--space-2);
  font-size: 0.625rem; /* 10px */
}

.kmc-badge--md {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.kmc-badge--lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ===== BADGE VARIANTS ===== */

/* Default */
.kmc-badge--default {
  background: var(--color-neutral-100);
  color: var(--text-primary);
}

/* Primary */
.kmc-badge--primary {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Success */
.kmc-badge--success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

/* Warning */
.kmc-badge--warning {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

/* Danger */
.kmc-badge--danger {
  background: var(--color-danger-100);
  color: var(--color-danger-700);
}

/* Info */
.kmc-badge--info {
  background: var(--color-info-100);
  color: var(--color-info-700);
}

/* ===== PILL STYLE ===== */
.kmc-badge--pill {
  border-radius: var(--radius-full);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ===== BADGE ICON ===== */
.kmc-badge__icon {
  font-size: 1.1em;
}

/* ===== DOT BADGE ===== */
.kmc-badge-dot {
  position: relative;
  display: inline-flex;
}

.kmc-badge-dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-secondary);
}

.kmc-badge-dot--success::after {
  background: var(--color-success-500);
}

.kmc-badge-dot--warning::after {
  background: var(--color-warning-500);
}

.kmc-badge-dot--danger::after {
  background: var(--color-danger-500);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .kmc-badge--default {
  background: var(--color-neutral-800);
  color: var(--text-primary);
}

[data-theme="dark"] .kmc-badge--primary {
  background: rgba(99, 102, 241, 0.2);
  color: var(--color-primary-400);
}

[data-theme="dark"] .kmc-badge--success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success-400);
}

[data-theme="dark"] .kmc-badge--warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning-400);
}

[data-theme="dark"] .kmc-badge--danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger-400);
}

[data-theme="dark"] .kmc-badge--info {
  background: rgba(59, 130, 246, 0.2);
  color: var(--color-info-400);
}

[data-theme="dark"] .kmc-badge-dot::after {
  border-color: var(--bg-secondary);
}