/*
 * DD-05 Badge / status pill — app/components/ui/badge_component.rb
 *
 * Default treatment (dot/icon variants) is `subtle` family fill + `ink`
 * text — the AA correction at spec §1.3: solid semantic fill behind white
 * text fails contrast at badge sizes, so colour survives as a 6px dot or
 * 12px icon instead. `solid` and `outline` are the rarer alternates.
 */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 500;
  white-space: nowrap;
}

.ui-badge--md {
  min-height: 24px;
}

.ui-badge--sm {
  min-height: 20px;
}

.ui-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  flex-shrink: 0;
}

.ui-badge__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.ui-badge__icon svg {
  display: block;
}

/* Subtle fill + ink text + base dot/icon (variants: dot, icon) */
.ui-badge--success:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-success-subtle);
  color: var(--color-success-ink);
}

.ui-badge--warning:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-warning-subtle);
  color: var(--color-warning-ink);
}

.ui-badge--danger:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-badge--violet:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-violet-subtle);
  color: var(--color-violet-ink);
}

.ui-badge--accent:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-badge--neutral:not(.ui-badge--solid):not(.ui-badge--outline) {
  background: var(--color-neutral-badge-subtle);
  color: var(--color-neutral-badge-ink);
}

.ui-badge--success .ui-badge__dot { background: var(--color-success); }
.ui-badge--warning .ui-badge__dot { background: var(--color-warning); }
.ui-badge--danger .ui-badge__dot { background: var(--color-danger); }
.ui-badge--violet .ui-badge__dot { background: var(--color-violet); }
.ui-badge--accent .ui-badge__dot { background: var(--color-accent); }
.ui-badge--neutral .ui-badge__dot { background: var(--color-neutral-badge); }

.ui-badge--success .ui-badge__icon { color: var(--color-success); }
.ui-badge--warning .ui-badge__icon { color: var(--color-warning); }
.ui-badge--danger .ui-badge__icon { color: var(--color-danger); }
.ui-badge--violet .ui-badge__icon { color: var(--color-violet); }
.ui-badge--accent .ui-badge__icon { color: var(--color-accent); }
.ui-badge--neutral .ui-badge__icon { color: var(--color-neutral-badge); }

/*
 * Solid — rare, *-strong fill + white text, only where the badge is the
 * sole element on a coloured surface. success/danger/accent have a
 * dedicated *-strong token; warning/violet/neutral do not, so the
 * already-AA-dark *-ink token is reused as the fill instead.
 */
.ui-badge--solid {
  color: var(--color-on-accent);
}

.ui-badge--solid.ui-badge--success { background: var(--color-success-strong); }
.ui-badge--solid.ui-badge--danger { background: var(--color-danger-strong); }
.ui-badge--solid.ui-badge--accent { background: var(--color-accent-strong); }
.ui-badge--solid.ui-badge--warning { background: var(--color-warning-ink); }
.ui-badge--solid.ui-badge--violet { background: var(--color-violet-ink); }
.ui-badge--solid.ui-badge--neutral { background: var(--color-ink-muted); }

.ui-badge--solid .ui-badge__dot,
.ui-badge--solid .ui-badge__icon {
  background: var(--color-on-accent);
  color: var(--color-on-accent);
}

.ui-badge--solid .ui-badge__dot {
  background: var(--color-on-accent);
}

/* Outline — admin */
.ui-badge--outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink);
}

.ui-badge--outline .ui-badge__dot { background: currentColor; }
.ui-badge--outline .ui-badge__icon { color: currentColor; }