/* badge.css — extracted from badge.html */
/* Badge.css */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
}

/* ── Sizes ──────────────────────────── */
.badge--sm { padding: 2px 8px; font-size: 11px; }
.badge--md { padding: 4px 12px; font-size: var(--text-xs); }
.badge--lg { padding: 6px 16px; font-size: var(--text-sm); }

/* ── Colors ─────────────────────────── */
.badge--primary {
  color: var(--color-primary);
  background: var(--color-primary-ghost);
}
.badge--secondary {
  color: var(--color-secondary-dark);
  background: rgba(6, 182, 212, 0.1);
}
.badge--success {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}
.badge--warning {
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}
.badge--danger {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

/* ── 空心变体 ──────────────────────── */
.badge--outline {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* ── 带圆点 ────────────────────────── */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Notification badge (角标) ─────── */
.badge--notification {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: white;
  background: var(--color-danger);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-full);
}