.pagination-container {
  display: flex;
  flex: 1 0 33%;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 15px;
  position: static;
  width: unset;
}
.pagination-item {
  border-radius: 1000px;
  flex-basis: 43.5px;
  flex-shrink: 1;
  height: 1.3px;
  position: relative;
}
.pagination-item,
.pagination-item.active {
  background-color: var(--theme-background-neutral);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .pagination-item.active.viewed {
    background-color: var(--theme-background);
    opacity: 1;
  }
  .pagination-item.active.viewed .bullet-progress {
    animation-play-state: paused;
  }
}
.pagination-item.active .bullet-progress {
  opacity: 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .pagination-item.active .bullet-progress {
    animation-duration: 3s;
    animation-name: enter-bullet-progress;
    animation-timing-function: linear;
  }
}
.pagination-item:after {
  content: "";
  inset: -9px -3px;
  position: absolute;
}
.pagination-item .bullet-progress {
  background-color: var(--theme-background);
  border-radius: 1000px;
  height: 100%;
  opacity: 0;
}
@keyframes enter-bullet-progress {
  0% {
    width: 0;
  }
  to {
    width: 100%;
  }
}