/* ==========================================================
   IROZON DESIGN SYSTEM — Badge & Status (canonical, v1)
   Two related but distinct concepts, kept separate in markup, not
   just convention:
     .iz-badge  — compact metadata/category/count marker (Beta, New,
                  Admin, 12, AI). Usually neutral; a semantic variant
                  is the exception, not the rule.
     .iz-status — a meaningful operational state (Running, Completed,
                  Pending, Failed). Always carries one of a small
                  fixed semantic role and, optionally, an indicator
                  dot. A table column of badges and a table column of
                  statuses are answering different questions, even
                  when they look superficially similar.
   Both reuse the same four semantic tokens already canonical
   elsewhere (see Status Colors on the Components overview page) — no
   new colors are introduced here, and dark theme resolves for free
   since every color is a semantic token.
   ========================================================== */

.iz-badge,
.iz-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: 8px;
  padding-block: 2px;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-caption);
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

/* ---------- Semantic roles ----------
   Neutral is the implicit default (no attribute needed); the other
   three are opt-in. Only these four roles exist — no arbitrary
   Blue/Purple additions just to round out a palette. */
.iz-badge[data-variant="neutral"],
.iz-status[data-status="neutral"] {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}
.iz-badge[data-variant="success"],
.iz-status[data-status="success"] {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}
.iz-badge[data-variant="warning"],
.iz-status[data-status="warning"] {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}
.iz-badge[data-variant="error"],
.iz-status[data-status="error"] {
  background: color-mix(in srgb, var(--color-error) 16%, transparent);
  color: var(--color-error);
}

/* ---------- Status indicator ----------
   A small precise dot, decorative (aria-hidden in markup) — the
   visible text stays the primary way the state is communicated, so
   the dot is never the only differentiator. */
.iz-status__indicator {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- Live / processing ----------
   Opt-in only (data-live="true") for a genuinely active/running
   state — never a default behavior of .iz-status, and never applied
   to more than the one state that's actually in progress. A
   restrained opacity pulse on the dot alone; no scale, no glow, no
   bounce. Reduced motion removes it entirely — the text already
   fully communicates the state without it. */
.iz-status[data-live="true"] .iz-status__indicator {
  animation: iz-status-pulse 1.6s ease-in-out infinite;
}
@keyframes iz-status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .iz-status[data-live="true"] .iz-status__indicator {
    animation: none;
  }
}