/*
 * pills.css
 * Chip layout comes from chip.css. Tones come from tones.css.
 *
 * Default (no tone class) renders muted via the var fallback.
 * Use for counts and very short data ("12", "99+", "v2").
 */

/*
 * ── The name ──────────────────────────────────────────────────────────
 *
 * A Pill holds a COUNT or a very short datum — "12", "99+", "v2". The
 * categorical status ("active", "pending") is a Badge, next door.
 *
 * Elsewhere the words land differently. Atlassian and Material both call
 * the count a Badge (their status word is Lozenge / Chip), and Bootstrap
 * uses `badge` for both while `pill` is only a shape (`rounded-pill`). So a
 * reader arriving with muscle memory reaches for `badge` to hold a number —
 * it renders fine, nothing complains, and the distinction erodes. See
 * DECISIONS.md for the comparison table.
 */

.pill {
  /* Box — was the `pill` Uno shortcut. Chip layout comes from chip.css. */
  padding:       var(--space-3xs) var(--space-sm);
  border-radius: var(--pill-radius);
  font-size:     var(--text-xs);
  line-height:   1rem;

  /* Skin. --fill is the effective background; chip.css derives readable
     text from it. See the auto-contrast note there. */
  --tone-fill:    var(--bg-mix, var(--color-muted));
  background:     var(--fill, var(--tone-fill));
  color:          var(--on-fill, white);
  border:         var(--border-width) solid transparent;
  font-family:    var(--font-primary);
  font-weight:    var(--pill-font-weight);
  text-transform: var(--pill-text-transform);
  letter-spacing: var(--pill-letter-spacing);
}

/* ── Removable variant — pill with an inline close button ────────
 *   <span class="pill success removable">
 *     resolved-on-call
 *     <button class="pill-close" aria-label="Remove tag">
 *       <span class="i-heroicons:x-mark" aria-hidden="true"></span>
 *     </button>
 *   </span>
 *
 * The close button's hover uses color-mix on currentColor, so it adapts to
 * whatever tone (and theme) the pill carries. Its focus ring does the same,
 * and for the same reason, but lives in focus.css with every other ring.
 */
.pill.removable {
  padding-right: 3px;
  gap:           var(--space-2xs);
}
.pill-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.35em;
  height:          1.35em;
  border:          none;
  border-radius:   999px;
  background:      transparent;
  color:           inherit;
  font:            inherit;
  line-height:     1;
  padding:         0;
  cursor:          pointer;
  opacity:         0.7;
  transition:      opacity var(--motion-fast), background var(--motion-fast);
}
/* Icon sizing: icon.css. .pill-close sets --icon-size: 0.85em there. */
.pill-close:hover {
  opacity:    1;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
/* Full opacity on focus; the ring itself is in focus.css. */
.pill-close:focus-visible {
  opacity: 1;
}