Segmented Bar Countdown

<div class="nuda-cd2-segbar" role="timer" aria-label="Segmented bar countdown">
  <div class="nuda-cd2-segbar__row">
    <span class="nuda-cd2-segbar__lbl">Days</span>
    <div class="nuda-cd2-segbar__track">
      <!-- 30 segments; add --on for remaining days -->
      <span class="nuda-cd2-segbar__seg nuda-cd2-segbar__seg--on"></span>
      <span class="nuda-cd2-segbar__seg"></span>
    </div>
    <span class="nuda-cd2-segbar__val">12</span>
  </div>
  <div class="nuda-cd2-segbar__row">
    <span class="nuda-cd2-segbar__lbl">Hrs</span>
    <div class="nuda-cd2-segbar__track">
      <!-- 24 segments; add --on --hrs for remaining hours -->
      <span class="nuda-cd2-segbar__seg nuda-cd2-segbar__seg--on nuda-cd2-segbar__seg--hrs"></span>
      <span class="nuda-cd2-segbar__seg"></span>
    </div>
    <span class="nuda-cd2-segbar__val">07</span>
  </div>
  <div class="nuda-cd2-segbar__row">
    <span class="nuda-cd2-segbar__lbl">Min</span>
    <div class="nuda-cd2-segbar__track">
      <!-- 60 segments; add --on --min for remaining minutes -->
      <span class="nuda-cd2-segbar__seg nuda-cd2-segbar__seg--on nuda-cd2-segbar__seg--min"></span>
      <span class="nuda-cd2-segbar__seg"></span>
    </div>
    <span class="nuda-cd2-segbar__val">34</span>
  </div>
</div>

.nuda-cd2-segbar {
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .8rem 1rem;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.nuda-cd2-segbar__row {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.nuda-cd2-segbar__lbl {
  color: #555;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  width: 22px;
  flex-shrink: 0;
}

.nuda-cd2-segbar__track {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}

.nuda-cd2-segbar__seg {
  height: 8px;
  flex: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
}

.nuda-cd2-segbar__seg--on {
  background: #e4ff54;
}

.nuda-cd2-segbar__seg--hrs {
  background: #a8d8ff;
}

.nuda-cd2-segbar__seg--min {
  background: #ff9f7a;
}

.nuda-cd2-segbar__val {
  color: #cfcfcf;
  font-size: .7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}