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

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

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

.p_jn {
  overflow: hidden;
  width: 100%;
  background-color: color('sky', 'light');
  border-radius: border-radius();
}

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

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

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

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

.p_xd {
  height: inherit;
  width: 0;
  min-width: 2px;
  will-change: width;
  background-color: color('blue');
  animation: fillup duration(slowest) easing();
  transition: width duration(slowest) easing();
}

.p_dx,
.p_vm {
  @include visually-hidden;
}