/* Quality Bar Inline Component — analytics-channels-density-redesign
 * Requires: tokens.css
 *
 * Usage:
 *   <div class="quality-bar-inline quality-bar-inline--variant-high">
 *     <div class="quality-bar-inline__fill" style="width: 82%"></div>
 *   </div>
 *
 * Variant is set by JS based on score:
 *   0–39  → --variant-low   (error red)
 *   40–69 → --variant-mid   (warning amber)
 *   70–100 → --variant-high (success green)
 *
 * The numeric score is rendered adjacent to the bar by the JS module.
 */

/* ── Block: 72×4 px horizontal track ─────────────────────────────────────── */
.quality-bar-inline {
  width: 72px;
  height: 4px;
  border-radius: var(--radius-xs);   /* 4px — micro-pill */
  background: var(--surface-hover);  /* track */
  position: relative;
  flex-shrink: 0;
  display: block;
}

/* ── Fill element ─────────────────────────────────────────────────────────── */
.quality-bar-inline__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 150ms ease-out;
}

/* ── Semantic colour modifiers ────────────────────────────────────────────── */

/* 0–39: error red */
.quality-bar-inline--variant-low .quality-bar-inline__fill {
  background: var(--color-error-500);
}

/* 40–69: warning amber */
.quality-bar-inline--variant-mid .quality-bar-inline__fill {
  background: var(--color-warning-500);
}

/* 70–100: success green */
.quality-bar-inline--variant-high .quality-bar-inline__fill {
  background: var(--color-success-500);
}