/*
Badge

Builds on @elements/style'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 shadcn variants
the pill does not ship. notes/style-deltas.md has the details.

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

@layer components {

.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: shadcn's 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));
}

/* Shadcn Variants */

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

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

.pill.is-outline {
  background:   transparent;
  border-color: var(--control-border);
  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(--secondary-hover); }
  a.badge:hover:is(.is-outline, .is-ghost) { background: var(--bg-muted); 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 ---------------------------------------------------------------
   shadcn: 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);
}

}