Metered Usage Calculator

<!-- Metered Usage Calculator — bars grow in, then the estimate settles -->
<div class="nuda-pr2-metered-calc">
  <span class="nuda-pr2-metered-calc__name">Pay as you go</span>
  <span class="nuda-pr2-metered-calc__rate">$0.002 <i>/request</i></span>
  <div class="nuda-pr2-metered-calc__bars" aria-hidden="true">
    <span class="nuda-pr2-metered-calc__bar" style="--h:.3"></span>
    <span class="nuda-pr2-metered-calc__bar" style="--h:.55"></span>
    <span class="nuda-pr2-metered-calc__bar" style="--h:.8"></span>
    <span class="nuda-pr2-metered-calc__bar" style="--h:.45"></span>
    <span class="nuda-pr2-metered-calc__bar" style="--h:1"></span>
  </div>
  <div class="nuda-pr2-metered-calc__total">Est. <b>$48.20</b><i>/mo</i></div>
</div>

.nuda-pr2-metered-calc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  width: 170px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}

.nuda-pr2-metered-calc__name {
  font: 600 9px ui-sans-serif,system-ui;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nuda-pr2-metered-calc__rate {
  font: 700 12px ui-sans-serif,system-ui;
  color: #fafafa;
}

.nuda-pr2-metered-calc__rate i {
  font-style: normal;
  font-weight: 500;
  color: #63636e;
  font-size: 10px;
}

.nuda-pr2-metered-calc__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}

.nuda-pr2-metered-calc__bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg,#e4ff54,rgba(228,255,84,.25));
  transform: scaleY(0);
  transform-origin: bottom;
  animation: nuda-pr2-metered-calc-grow .5s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-pr2-metered-calc__bar:nth-child(1) {
  animation-delay: 0s;
}

.nuda-pr2-metered-calc__bar:nth-child(2) {
  animation-delay: .06s;
}

.nuda-pr2-metered-calc__bar:nth-child(3) {
  animation-delay: .12s;
}

.nuda-pr2-metered-calc__bar:nth-child(4) {
  animation-delay: .18s;
}

.nuda-pr2-metered-calc__bar:nth-child(5) {
  animation-delay: .24s;
}

.nuda-pr2-metered-calc__total {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  font: 600 10px ui-sans-serif,system-ui;
  color: #a1a1aa;
}

.nuda-pr2-metered-calc__total b {
  color: #fafafa;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}

.nuda-pr2-metered-calc__total i {
  font-style: normal;
  color: #63636e;
}

@keyframes nuda-pr2-metered-calc-grow {
  to {
    transform: scaleY(var(--h));
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pr2-metered-calc__bar {
    animation: none !important;
    transform: scaleY(var(--h));
  }
}