@import "../settings/variables";
@import "../animations/loading";

.progress-bar {
  $progress-complete: #{&}--progress-complete;
  $finalized: #{&}--finalized;

  overflow: hidden;
  position: relative;
  display: block;
  height: $loader-grid-unit;
  background-color: $progress-bar-background-color;
  border-radius: $loader-grid-unit * 2;
  margin: $loader-grid-unit * 2 0;
  transition: background-color 0s linear;

  &--progress-complete {
    background-color: $progress-bar-complete-background-color;
  }

  &--finalized {
    transition-delay: $animation-delay;
  }

  &__loader {
    #{$progress-complete}:not(#{$finalized}) & {
      opacity: 0;
    }
    #{$finalized} & {
      @include fade-in-animation($animation-delay, 0s);
    }
  }
}