/* Sparkline — square run-status indicators
 *
 * Renders a horizontal sequence of 14×14 colored squares for "last N runs"
 * displays (Test Health Grid style). The squares are intentionally chunky
 * enough to read individual statuses at a glance and form a visual pattern
 * across rows when stacked in tables.
 *
 * Usage: {{ sparkline(runs=[true, false, true, true, none], passed_label='Passed') }}
 *   Each entry: True = pass, False = fail, None = no data.
 *
 * Same component used in:
 *   - Dashboard Top Flaky Tests / Top Flaky Jobs / Slowest Tests tables
 *   - Marketing homepage Top Flaky Tests demo card
 */

@layer components {
  .repo-sparkline {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .repo-sparkline-item {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-1);
    flex-shrink: 0;
  }

  .repo-sparkline-item--empty {
    background: var(--neutral-200);
  }

  .repo-sparkline-item--success {
    background: var(--brand);
  }

  .repo-sparkline-item--error {
    background: var(--danger);
  }
}