/* ==========================================================================
   Component: Badges
   Description: Status indicators, labels, and count chips
   ========================================================================== */

/* --- Base badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* --- Color variants --- */
.badge--default {
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
}

.badge--primary {
  background-color: var(--accent-muted);
  color: var(--accent-primary);
}

.badge--success {
  background-color: var(--status-success-bg);
  color: var(--status-success-text);
}

.badge--warning {
  background-color: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.badge--error {
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
}

.badge--info {
  background-color: var(--status-info-bg);
  color: var(--status-info-text);
}

/* --- Outline variant --- */
.badge--outline {
  background-color: transparent;
  border: 1px solid currentColor;
  padding: calc(var(--space-0-5) - 1px) calc(var(--space-2) - 1px);
}

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

/* --- Status Dot — inline colored indicator --- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot--success { background-color: var(--status-success); }
.status-dot--warning { background-color: var(--status-warning); }
.status-dot--error   { background-color: var(--status-error); }
.status-dot--neutral { background-color: var(--text-tertiary); }
.status-dot--info    { background-color: var(--status-info); }

/* --- Numeric count chip --- */
.badge--count {
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  padding: 0 var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
}