// ─────────────────────────────────────────────────────────────────────────────
// Component: Pills
// File:      src/scss/components/_pills.scss
//
// Variants:  .pill[data-domain], .pill--status[data-status]
//            .pill--open .pill--merged .pill--closed
// Tokens:    --domain-*, --color-success, --color-purple, --color-neutral
// Usage:     <span class="pill" data-domain="code">code</span>
//            <span class="pill pill--status" data-status="open">open</span>
//
// Notes:     Domain pills use the full domain token set (primary/bg/border).
//            Status: open=green, merged=violet, closed=slate.
// ─────────────────────────────────────────────────────────────────────────────

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text-secondary);
}

// Domain pills
.pill[data-domain="code"] {
  background: var(--domain-code-bg);
  color: var(--domain-code);
  border-color: var(--domain-code-border);
}

.pill[data-domain="midi"] {
  background: var(--domain-midi-bg);
  color: var(--domain-midi);
  border-color: var(--domain-midi-border);
}

.pill[data-domain="mist"] {
  background: var(--domain-mist-bg);
  color: var(--domain-mist);
  border-color: var(--domain-mist-border);
}

.pill[data-domain="agent"] {
  background: var(--domain-agent-bg);
  color: var(--domain-agent);
  border-color: var(--domain-agent-border);
}

.pill[data-domain="generic"],
.pill[data-domain=""] {
  background: var(--domain-generic-bg);
  color: var(--domain-generic);
  border-color: var(--domain-generic-border);
}

// Status pills
.pill--status[data-status="open"] {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.pill--status[data-status="merged"] {
  background: color-mix(in srgb, var(--color-purple) 12%, transparent);
  color: var(--color-purple);
  border-color: color-mix(in srgb, var(--color-purple) 30%, transparent);
}

.pill--status[data-status="closed"] {
  background: color-mix(in srgb, var(--color-neutral) 12%, transparent);
  color: var(--color-neutral);
  border-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
}