/*
 /var/www/html/_docs/jcs/bs53-bg-part.css
=====================================================
   Standalone BADGE CSS (NO Bootstrap dependency)
===================================================== */

/* ---------- Color variables ---------- */
:root{
  --c-primary:#0d6efd;
  --c-secondary:#6c757d;
  --c-success:#198754;
  --c-danger:#dc3545;
  --c-warning:#ffc107;
  --c-info:#0dcaf0;
  --c-light:#f8f9fa;
  --c-dark:#212529;
  --c-white:#fff;
  --c-black:#000;
}

/* ---------- Base badge ---------- */
.badge{
  display:inline-block;
  padding:.35em .65em;
  font-size:.75em;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:.375rem;
  color:var(--c-white);
}

/* hide empty */
.badge:empty{display:none}

/* ---------- Shape ---------- */
.badge-pill{border-radius:50rem}

/* ---------- Background colors ---------- */
.bg-primary{background:var(--c-primary)}
.bg-secondary{background:var(--c-secondary)}
.bg-success{background:var(--c-success)}
.bg-danger{background:var(--c-danger)}
.bg-warning{background:var(--c-warning)}
.bg-info{background:var(--c-info)}
.bg-light{background:var(--c-light)}
.bg-dark{background:var(--c-dark)}

/* ---------- Text colors ---------- */
.text-white{color:var(--c-white)}
.text-black{color:var(--c-black)}
.text-dark{color:var(--c-dark)}

/* ---------- text-bg-* (BS 5.3 style) ---------- */
.text-bg-primary{background:var(--c-primary);color:#fff}
.text-bg-secondary{background:var(--c-secondary);color:#fff}
.text-bg-success{background:var(--c-success);color:#fff}
.text-bg-danger{background:var(--c-danger);color:#fff}
.text-bg-warning{background:var(--c-warning);color:#000}
.text-bg-info{background:var(--c-info);color:#000}
.text-bg-light{background:var(--c-light);color:#000}
.text-bg-dark{background:var(--c-dark);color:#fff}

/* ---------- Outline badge ---------- */
.badge-outline{
  background:transparent;
  border:1px solid currentColor;
  color:currentColor;
}
.badge-outline.primary{color:var(--c-primary)}
.badge-outline.success{color:var(--c-success)}
.badge-outline.danger{color:var(--c-danger)}
.badge-outline.warning{color:var(--c-warning)}
.badge-outline.info{color:var(--c-info)}
.badge-outline.dark{color:var(--c-dark)}

/* ---------- Soft badge ---------- */
.badge-soft.primary{background:rgba(13,110,253,.15);color:var(--c-primary)}
.badge-soft.success{background:rgba(25,135,84,.15);color:var(--c-success)}
.badge-soft.danger{background:rgba(220,53,69,.15);color:var(--c-danger)}
.badge-soft.warning{background:rgba(255,193,7,.25);color:var(--c-dark)}
.badge-soft.info{background:rgba(13,202,240,.2);color:var(--c-dark)}

/* ---------- Size ---------- */
.badge-xs{font-size:.6em;padding:.2em .4em}
.badge-sm{font-size:.7em}
.badge-lg{font-size:.85em;padding:.45em .75em}

/* ---------- Dot badge ---------- */
.badge-dot{
  width:.5rem;
  height:.5rem;
  padding:0;
  border-radius:50%;
}

/* ---------- Counter ---------- */
.badge-counter{
  min-width:1.25rem;
  height:1.25rem;
  padding:0 .35rem;
  font-size:.65rem;
  border-radius:50rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Hover ---------- */
.badge-hover{
  cursor:pointer;
  transition:.15s ease;
}
.badge-hover:hover{
  filter:brightness(.9);
}