@use '../../../theme/viewerDefs' as *;

$progress-bar-size: 12px;
$progress-bar-br: 3px;

.progress-bar__bg {
  width: 100%;
  height: $progress-bar-size;
  border-radius: $progress-bar-br;
  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
  overflow: clip;

  &--hidden {
    display: none;
  }
}

.progress-bar__indicator {
  height: $progress-bar-size;
  background-color: var(--timer-progress-override, $accent-color);
  transition: 1s linear;
  transition-property: width;
}