/*
Badge

Builds on style/base's .pill: the status intents (is-success,
is-warning, is-danger, is-info, is-accent) and .pill-dot are its own.
.badge sizes the pill from the tag tokens and adds the primary,
secondary, neutral, outline, ghost and link variants. Neutral is the plain
.pill: a muted fill, soft ink and a rule border, for counts and labels.
Secondary reads --tag-secondary and --tag-secondary-ink, which default to
the secondary button's colors; a theme whose secondary button is a dark
fill sets them to a quiet tag color.

  .badge.pill                       tag height, padding, type, radius
  .pill.is-primary | is-secondary | is-neutral | is-outline | is-ghost | is-link
  .pill.is-success | is-warning | is-danger | is-info | is-accent   (style/base)
  .badge.pill[data-icon=inline-start|inline-end]   tighter padding on the icon side
  a.badge                           hover and focus ring for link badges
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.badge.pill {
  box-sizing:      border-box;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-1);
  height:          var(--tag-height);
  padding:         0 var(--tag-padding-x);
  border-width:    var(--control-border-width);
  border-radius:   var(--radius-tag);
  font-family:     var(--font-ui);
  font-size:       var(--tag-font-size);
  font-weight:     var(--tag-weight);
  letter-spacing:  var(--tracking-ui);
  line-height:     1;
  vertical-align:  middle;
  white-space:     nowrap;
  text-decoration: none;
  overflow:        hidden;
  flex:            none;
}

.badge.pill > svg,
.badge.pill > .spinner {
  --spinner-size: var(--icon-size-sm);

  flex:   none;
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Icon side: data-icon="inline-start|inline-end" tightens the
   padding on the icon's side, so the icon sits nearer the edge than the
   label does on the other side. Logical sides, so RTL mirrors. */

.badge.pill[data-icon="inline-start"] {
  padding-inline-start: calc(var(--tag-padding-x) - var(--space-0-5));
}

.badge.pill[data-icon="inline-end"] {
  padding-inline-end: calc(var(--tag-padding-x) - var(--space-0-5));
}

/* Variants */

.pill.is-primary {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--accent-ink);
}

.pill.is-secondary {
  background:   var(--tag-secondary, var(--secondary));
  border-color: transparent;
  color:        var(--tag-secondary-ink, var(--secondary-ink));
}

.pill.is-neutral {
  background:   var(--bg-muted);
  border-color: var(--rule);
  color:        var(--ink-soft);
}

/* The strong rule, not the control border: a quiet edge that still
   outlines the pill on the page and on a card, in light and dark. */
.pill.is-outline {
  background:   transparent;
  border-color: var(--rule-strong, var(--rule));
  color:        var(--ink);
}

.pill.is-ghost {
  background:   transparent;
  border-color: transparent;
  color:        var(--ink-soft);
}

.pill.is-link {
  background:            transparent;
  border-color:          transparent;
  color:                 var(--link);
  text-decoration:       underline;
  text-decoration-color: transparent;
  text-underline-offset: calc(var(--link-underline-offset) * 1.25);
}

/* Links */

a.badge {
  cursor: pointer;
}

/* Hover only where a pointer can hover: a tap on a touch screen leaves no fill. */
@media (hover: hover) {
  a.badge:hover.is-primary   { background: var(--accent-deep); border-color: var(--accent-deep); }
  a.badge:hover.is-secondary { background: var(--tag-secondary-hover, var(--secondary-hover)); }
  a.badge:hover:is(.is-outline, .is-ghost) { background: var(--bg-muted); color: var(--ink); }
  a.badge:hover.is-neutral   { border-color: var(--rule-strong); color: var(--ink); }
  a.badge:hover.is-link      { text-decoration-color: currentColor; }
  a.badge:hover:is(.is-success, .is-warning, .is-danger, .is-info, .is-accent) {
    border-color: currentColor;
  }
}

/* The ring is a box-shadow. Forced colors (Windows High Contrast) drops
   box-shadow, so a transparent outline stays underneath: invisible
   normally, painted in the system color there. An outline takes no layout
   space, so focus never moves anything (Button does the same). */
a.badge:focus-visible {
  outline:        var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  box-shadow:     var(--focus-ring);
}

/* Invalid: aria-invalid draws a danger border, and a danger ring on focus.
   The border is always there (control-border-width), so only its color
   changes and nothing moves. */

.badge.pill[aria-invalid="true"] {
  border-color: var(--danger);
}

.badge.pill[aria-invalid="true"]:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

}