/* =============================================================================
   A4 - badge, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 2 colour literal(s) -> on-accent, 0 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Badge Component
   Colors, sizes, pill, dot
   ============================================================================ */

.s-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: var(--s-font-size-xs);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1;
  color: var(--on-accent);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--s-border-radius-sm);
  transition: var(--s-transition-bg), var(--s-transition-color);
}

/* Empty badge (dot) */
.s-badge:empty {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Color Variants (Filled)
   --------------------------------------------------------------------------- */

.s-badge-primary   { background-color: var(--s-primary); }
.s-badge-secondary { background-color: var(--s-secondary); }
.s-badge-success   { background-color: var(--s-success); }
.s-badge-danger    { background-color: var(--s-danger); }
.s-badge-warning   { background-color: var(--s-warning); color: var(--on-accent); }
.s-badge-info      { background-color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Light / Subtle Variants
   --------------------------------------------------------------------------- */

.s-badge-light-primary   { background-color: var(--s-primary-light);   color: var(--s-primary); }
.s-badge-light-secondary { background-color: var(--s-secondary-light); color: var(--s-secondary); }
.s-badge-light-success   { background-color: var(--s-success-light);   color: var(--s-success); }
.s-badge-light-danger    { background-color: var(--s-danger-light);    color: var(--s-danger); }
.s-badge-light-warning   { background-color: var(--s-warning-light);   color: var(--s-warning); }
.s-badge-light-info      { background-color: var(--s-info-light);      color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Outline Variants
   --------------------------------------------------------------------------- */

.s-badge-outline-primary   { background-color: transparent; border: 1px solid var(--s-primary);   color: var(--s-primary); }
.s-badge-outline-secondary { background-color: transparent; border: 1px solid var(--s-secondary); color: var(--s-secondary); }
.s-badge-outline-success   { background-color: transparent; border: 1px solid var(--s-success);   color: var(--s-success); }
.s-badge-outline-danger    { background-color: transparent; border: 1px solid var(--s-danger);    color: var(--s-danger); }
.s-badge-outline-warning   { background-color: transparent; border: 1px solid var(--s-warning);   color: var(--s-warning); }
.s-badge-outline-info      { background-color: transparent; border: 1px solid var(--s-info);      color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Sizes
   --------------------------------------------------------------------------- */

.s-badge-sm {
  padding-block: 0.15rem;
  padding-inline: 0.375rem;
  font-size: 0.6875rem;
}

.s-badge-lg {
  padding-block: 0.375rem;
  padding-inline: 0.625rem;
  font-size: var(--s-font-size-sm);
}

/* ---------------------------------------------------------------------------
   Pill Shape
   --------------------------------------------------------------------------- */

.s-badge-pill {
  border-radius: var(--s-border-radius-pill);
  padding-inline: 0.625rem;
}

/* ---------------------------------------------------------------------------
   Badge with icon
   --------------------------------------------------------------------------- */

.s-badge-icon {
  gap: 0.25rem;
}

.s-badge-icon > svg,
.s-badge-icon > i {
  font-size: 0.75em;
}

/* ---------------------------------------------------------------------------
   Floating badge (positioned on parent)
   --------------------------------------------------------------------------- */

.s-badge-float {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

.s-badge-float:empty {
  inset-block-start: 2px;
  inset-inline-end: 2px;
  transform: none;
}

/* Parent wrapper for floating badge */
.s-badge-wrapper {
  position: relative;
  display: inline-flex;
}

/* ---------------------------------------------------------------------------
   Badge as link
   --------------------------------------------------------------------------- */

a.s-badge:hover,
button.s-badge:hover {
  opacity: 0.85;
  text-decoration: none;
}

a.s-badge:focus-visible,
button.s-badge:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: 2px;
}