@function progress-bar-height($height: base) {
  $base: 16px;
  $data: (
    small: rem($base / 2),
    base: rem($base),
    large: rem($base * 2),
  );

  @return map-get($data, $height);
}

@keyframes fillup {
  0% {
    width: 0;
  }
}

.p_l7 {
  overflow: hidden;
  width: 100%;
  background-color: color(sky, base);
  border-radius: border-radius();
}

.p_t9 {
  height: progress-bar-height(small);
}

.p_kv {
  height: progress-bar-height();
}

.p_b9 {
  height: progress-bar-height(large);
}

.p_vg {
  height: inherit;
  width: 0;
  will-change: width;
  background-color: color(teal);
  animation: fillup duration(slowest) easing();
  transition: width duration(slowest) easing();
}

.p_ly,
.p_sm {
  @include visually-hidden;
}
