/* progress-bar.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── ProgressBar ── */
.ProgressBar_bar {
  position:relative;
  width:100%;
  height:7px;
  border-radius:15px;
}

.ProgressBar_track {
  inset:0;
  opacity:.15;
}

.ProgressBar_fill,
.ProgressBar_track {
  position:absolute;
  border-radius:15px;
  background:var(--color-green);
}

.ProgressBar_fill {
  top:0;
  left:0;
  height:100%;
  transition:width .3s cubic-bezier(.4,0,.2,1);
}

.ProgressBar_ball {
  --ball-size:30px;
  position:absolute;
  top:50%;
  width:var(--ball-size);
  height:var(--ball-size);
  transform:translate(-50%,-50%);
  transition:left .3s cubic-bezier(.4,0,.2,1);
}

.ProgressBar_ballImage {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:50%;
  animation:ProgressBar_ball-in .25s ease-out;
}

.ProgressBar_ballLeaving {
  animation:ProgressBar_ball-out .15s ease-in forwards;
}

@keyframes ProgressBar_ball-in {
  0% {
    opacity:0;
    transform:scale(.3);
  }
}

@keyframes ProgressBar_ball-out {
  to {
    opacity:0;
    transform:scale(.3);
  }
}

@media (prefers-reduced-motion:reduce) {
  .ProgressBar_ball {
    transition:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .ProgressBar_ballImage,
  .ProgressBar_ballLeaving {
    animation:none;
  }
}