/* ============================================
   Badge — small count / dot anchored to a child.

   <xm-badge> floats a coral count or a minimal dot at the
   top-right corner of whatever it wraps (an icon button, an
   avatar, a label). The coral fill (--md-sys-color-primary /
   --md-sys-color-on-primary) means "count / attention" — the
   same functional coral as a selected pill or the active-tab
   indicator. It is NEVER a severity palette and never references
   --md-sys-color-error*. Severity is communicated by icon + copy
   elsewhere, never by this badge's hue.

   The badge paints its own coral surface, so it pairs primary
   with on-primary independent of the host's surface family
   (AD-13) — it stays legible floating over any surface.
   ============================================ */

.badge {
  position: relative;
  display: inline-flex;
}

/* The wrapper the badged child projects into. Establishes the
   positioning context for the absolutely-placed count/dot. */
.badge__anchor {
  display: inline-flex;
}

/* Shared corner-floated chip — both count and dot inherit this. */
.badge__count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(35%, -35%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--s-1);
  border-radius: var(--md-sys-shape-corner-full);
  /* Hairline halo so the chip separates from a same-hued host
     (e.g. a coral primary button) without a hard border. */
  border: 1px solid var(--md-sys-color-surface);
  background: var(--xm-color-primary-fill);
  color: var(--md-sys-color-on-primary);
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  line-height: 1;
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  white-space: nowrap;
}

/* Dot — no count, just a presence marker. Collapses to a small
   circle in the same corner. */
.badge--dot .badge__count {
  min-width: 0;
  width: 10px;
  height: 10px;
  padding: 0;
}

/* Standalone badge (no anchored child) — drops the absolute
   positioning so the chip flows inline beside text. */
.badge--standalone .badge__count {
  position: static;
  transform: none;
  border: none;
}