@layer components {
/* =============================================================================
   @elements/style — pill

   Intent variants: is-success / is-warning / is-danger / is-info / is-accent.
   Optional leading status dot:

     <span class="pill is-success"><span class="pill-dot"></span>Active</span>
============================================================================= */

.pill {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1-5);
  padding:        var(--space-0-5) var(--space-2-5);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  line-height:    1.4;
  border-radius:  var(--radius-pill);
  background:     var(--bg-muted);
  color:          var(--ink-soft);
  border:         1px solid var(--rule);
  white-space:    nowrap;
}

.pill.is-success { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-edge); }
.pill.is-warning { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-edge); }
.pill.is-danger  { background: var(--danger-soft);  color: var(--danger-ink);  border-color: var(--danger-edge); }
.pill.is-info    { background: var(--info-soft);    color: var(--info-ink);    border-color: var(--info-edge); }
.pill.is-accent  { background: var(--accent-soft);  color: var(--accent-ink);  border-color: var(--accent-edge); }

.pill-dot {
  width:         0.5rem;
  height:        0.5rem;
  border-radius: var(--radius-pill);
  background:    currentColor;
  flex-shrink:   0;
}

.pill.is-success .pill-dot { background: var(--success); }
.pill.is-warning .pill-dot { background: var(--warning); }
.pill.is-danger  .pill-dot { background: var(--danger); }
.pill.is-info    .pill-dot { background: var(--info); }
.pill.is-accent  .pill-dot { background: var(--accent); }

}