/* ============================================================
   badge.component.css  --  Badge and status pill styles
   Uses simple inline elements and currentColor-friendly SVG.
   ============================================================ */

.vui-badge-demo {
  --_vui-bg: var(--vui-bg, #fafafa);
  --_vui-bg-elevated: var(--vui-bg-elevated, #ffffff);
  --_vui-fg: var(--vui-fg, #1a1a1a);
  --_vui-border: var(--vui-border, #d4d4d4);
  --_vui-accent: var(--vui-accent, #1a1a1a);
  --_vui-accent-fg: var(--vui-accent-fg, #fafafa);
  --_vui-danger: var(--vui-danger, #b91c1c);
  --_vui-danger-fg: var(--vui-danger-fg, #ffffff);
  --_vui-success: var(--vui-success, #15803d);
  --_vui-success-fg: var(--vui-success-fg, #ffffff);
  --_vui-radius-md: var(--vui-radius-md, 6px);
  --_vui-space-xs: var(--vui-space-xs, 4px);
  --_vui-space-sm: var(--vui-space-sm, 8px);
  --_vui-space-md: var(--vui-space-md, 16px);
  --_vui-font-sans: var(--vui-font-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --_vui-font-size-xs: var(--vui-font-size-xs, 0.75rem);
  --_vui-font-size-sm: var(--vui-font-size-sm, 0.875rem);
  display: grid;
  gap: var(--_vui-space-md);
  font-family: var(--_vui-font-sans);
}

.vui-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_vui-space-md);
  align-items: center;
}

.vui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_vui-space-xs);
  min-block-size: 1.75rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--_vui-accent);
  border-radius: 999px;
  background: var(--_vui-accent);
  color: var(--_vui-accent-fg);
  font-size: var(--_vui-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vui-badge--outline {
  background: color-mix(in srgb, var(--_vui-accent) 5%, var(--_vui-bg-elevated));
  color: var(--_vui-accent);
}

.vui-badge--success {
  border-color: var(--_vui-success);
  background: var(--_vui-success);
  color: var(--_vui-success-fg);
}

.vui-badge--danger {
  border-color: var(--_vui-danger);
  background: var(--_vui-danger);
  color: var(--_vui-danger-fg);
}

.vui-badge--dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  min-block-size: 0.75rem;
  padding: 0;
}

.vui-badge-count {
  min-inline-size: 1.75rem;
  padding-inline: 0.45rem;
}

@media (max-width: 768px) {
  .vui-badge-row {
    gap: var(--_vui-space-sm);
  }
}