@if $css-variable-enabled {
  $primary-transition: var(--primary-transition);
  $progress-bar-border-radius: var(--progress-bar-border-radius);
}

.#{$prefix}progress:not(progress) {
  display: flex;
  width: fill-available;
  height: 20px;
  padding: 0;
  background-color: var(--progress-back-bg-color);
  overflow: hidden;
  color: var(--progress-back-text-color);
  align-items: center;
  justify-content: flex-start;
  margin: 8px;
  transition: $primary-transition;
  border-radius: $progress-bar-border-radius;

  &.#{$prefix}in-progress:not(.#{$prefix}striped) > .#{$prefix}bar:after {
    animation: progress-anim 2s linear infinite;
  }

  &.#{$prefix}rtl {
    justify-content: flex-end;

    > .#{$prefix}bar:after {
      right: 0;
    }

    &.#{$prefix}indeterminate > .#{$prefix}bar {
      animation-name: progress-indeterminate-rtl;
    }
  }

  &.#{$prefix}indeterminate > .#{$prefix}bar {
    width: 30%;
    animation: progress-indeterminate 2s linear infinite;
  }

  &:not(.#{$prefix}rtl) {
    > .#{$prefix}bar:after {
      left: 0;
    }

    &.#{$prefix}striped.#{$prefix}in-progress > .#{$prefix}bar {
      animation: progress-anim-striped 3s linear infinite;
    }

    &.#{$prefix}striped > .#{$prefix}bar.#{$prefix}in-progress {
      animation: progress-anim-striped 3s linear infinite;
    }
  }

  &.#{$prefix}rtl.#{$prefix}striped.#{$prefix}in-progress > .#{$prefix}bar {
    animation: progress-anim-striped-rtl 3s linear infinite;
  }

  &.#{$prefix}striped > .#{$prefix}bar {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, var(--progress-bar-stripe-color) 25%, transparent 25%,
                      transparent 50%, var(--progress-bar-stripe-color) 50%, var(--progress-bar-stripe-color) 75%,
                      transparent 75%, transparent);
  }

  &:not(.#{$prefix}striped) > .#{$prefix}bar.#{$prefix}in-progress:not(.#{$prefix}striped):after {
    animation: progress-anim 2s linear infinite;
  }

  &.#{$prefix}rtl.#{$prefix}striped > .#{$prefix}bar.#{$prefix}in-progress {
    animation: progress-anim-striped-rtl 3s linear infinite;
  }

  &.#{$prefix}rtl > .#{$prefix}bar.#{$prefix}striped.#{$prefix}in-progress {
    animation: progress-anim-striped-rtl 3s linear infinite;
  }

  > .#{$prefix}bar {
    position: relative;
    user-select: none;
    height: 100%;
    width: 0;
    background-color: var(--progress-bar-bg-color);
    color: var(--progress-bar-text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    @each $name, $color, $txt-color in $item-colors {
      @if $name {
        &.#{$prefix}#{$name} {
          background-color: $color;
          color: $txt-color;
        }
      }
    }

    &.#{$prefix}striped {
      background-size: 30px 30px;
      background-image: linear-gradient(135deg, var(--progress-bar-stripe-color) 25%, transparent 25%,
                          transparent 50%, var(--progress-bar-stripe-color) 50%, var(--progress-bar-stripe-color) 75%,
                          transparent 75%, transparent);

      &.#{$prefix}in-progress {
        animation: progress-anim-striped 3s linear infinite;
      }
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: var(--progress-bar-stripe-color);
      border-radius: 3px;
    }

    @for $i from 0 through 100 {
      &[value="#{$i}"] {
        width: percentage($i/100);
      }
    }

    &:only-of-type {
      border-radius: $progress-bar-border-radius;
    }

    &:first-of-type:not(:only-of-type) {
      border-radius: $progress-bar-border-radius 0 0 $progress-bar-border-radius;
    }

    &:last-of-type:not(:only-of-type) {
      border-radius: 0 $progress-bar-border-radius $progress-bar-border-radius 0;
    }

    &.#{$prefix}text-right {
      justify-content: flex-end;
    }

    &.#{$prefix}text-left {
      justify-content: flex-start;
    }

    > span {
      margin: 0 10px;
    }
  }

  &[value] > .#{$prefix}bar {
    width: 100%;
  }

  @for $i from 0 through 100 {
    &[value="#{$i}"] {
      > .#{$prefix}bar {
        width: percentage($i/100);
      }
    }
  }

  &.#{$prefix}line {
    height: 3px;
  }

  &.#{$prefix}thin, &.#{$prefix}narrow {
    height: 5px;
  }

  &.#{$prefix}small {
    height: 12px;
  }

  &.#{$prefix}large {
    height: 28px;
  }

  &.#{$prefix}xlarge {
    height: 36px;
  }

  @each $name, $color, $txt-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} > .#{$prefix}bar {
        background-color: $color;
        color: $txt-color;
      }
    }
  }
}

// Animation Keyframes
@keyframes progress-anim {
  0% { opacity: 0; width: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; width: 95%; }
}

@keyframes progress-anim-striped {
  0% { background-position: 0 0; }
  100% { background-position: 60px 0; }
}

@keyframes progress-anim-striped-rtl {
  0% { background-position: 0 0; }
  100% { background-position: -60px 0; }
}

@keyframes progress-indeterminate {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  50% {
    width: 40%;
  }
  100% {
    left: 100%;
    transform: none;
  }
}

@keyframes progress-indeterminate-rtl {
  0% {
    right: 0;
    transform: translateX(100%);
  }
  50% {
    width: 60%;
  }
  100% {
    right: 100%;
    transform: none;
  }
}