.root {
  --progress-duration: 6s;

  position: relative;

  overflow: hidden;
  flex: 1 1 auto;

  margin: 0 0.125rem;
  border-radius: 0.125rem;

  background-color: rgba(255, 255, 255, 0.25);
}

.viewed {
  background-color: var(--color-white);
}

.active {
  background-color: rgba(255, 255, 255, 0.5);
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 50%;
  transform: translateX(-100%);

  width: 100%;
  height: 100%;
  border-radius: 0.125rem;

  background: var(--color-white);

  animation: progress var(--progress-duration) linear forwards;
}

.paused .inner {
  animation-play-state: paused;
}

@keyframes progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
