ontime/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

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

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

.multiprogress-bar {
  position: relative;
  width: 100%;
  height: $progress-bar-size;
  border-radius: $progress-bar-br;
  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
  display: flex;

  &--hidden {
    display: none;
    transition: display 0.5s;
  }
}

.multiprogress-bar__indicator {
  position: absolute;
  height: inherit;
  background-color: black;
  opacity: 0.8;
  transition: 1s linear;
  transition-property: width;
  right: 0;
}

.multiprogress-bar__bg-normal {
  position: absolute;
  height: inherit;
  right: 0;
  border-radius: $progress-bar-br;
  width: 100%;
}

.multiprogress-bar__bg-warning {
  position: absolute;
  height: inherit;
  right: 0;
  border-radius: 0 $progress-bar-br $progress-bar-br 0;
}

.multiprogress-bar__bg-danger {
  position: absolute;
  height: inherit;
  right: 0;
  border-radius: 0 $progress-bar-br $progress-bar-br 0;
}