// ********************************************
// container definition
$indeterminate-progress-indicator: #{$prefix}-indeterminate-progress-indicator;
$complete: #{$indeterminate-progress-indicator}-complete;
$failed: #{$indeterminate-progress-indicator}-failed;
$bar: #{$indeterminate-progress-indicator}__bar;
$indicator: #{$indeterminate-progress-indicator}__bar-indicator;
$tooltip-text: #{$indeterminate-progress-indicator}-tooltip-text;
.#{$bar} {
  background-color: color(neutral, 100);
  overflow: hidden;
}
.#{$indicator} {
  height: space(xxs);
}

@keyframes indeterminateAnimation {
  0% {
    transform: scaleX(0.015);
    transform-origin: 0% 0%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
  }

  25% {
    transform: scaleX(0.4);
  }

  50% {
    transform: scaleX(0.015);
    transform-origin: 100% 0%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
  }

  50.1% {
    transform: scaleX(0.015);
    transform-origin: 100% 0%;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
  }

  75% {
    transform: scaleX(0.4);
  }

  100% {
    transform: scaleX(0.015);
    transform-origin: 0% 0%;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
  }
}

@keyframes processingSuccess {
  0%,
  30% {
    transform: translateX(-50%);
    width: 50%;
  }
  15% {
    transform: translateX(150%);
    width: 50%;
  }
  0%,
  60% {
    transform: translateX(-50%);
    width: 50%;
  }
  45% {
    transform: translateX(150%);
    width: 50%;
  }
  0%,
  90% {
    transform: translateX(-50%);
    width: 50%;
  }
  75% {
    transform: translateX(150%);
    width: 50%;
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes processingSuccessEnd {
  0% {
    transform: translateX(-50%);
    width: 50%;
  }
  45% {
    transform: translateX(150%);
    width: 50%;
  }
  100% {
    transform: translateX(0%);
    background-color: color(success, 900);
  }
}

@keyframes processingFail {
  0%,
  30% {
    transform: translateX(-50%);
    width: 50%;
  }
  15% {
    transform: translateX(150%);
    width: 50%;
  }
  0%,
  60% {
    transform: translateX(-50%);
    width: 50%;
  }
  45% {
    transform: translateX(150%);
    width: 50%;
  }
  0%,
  90% {
    transform: translateX(-50%);
    width: 50%;
  }
  75% {
    transform: translateX(150%);
    width: 50%;
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes processingFailEnd {
  0% {
    transform: translateX(-50%);
    width: 50%;
  }
  45% {
    transform: translateX(150%);
    width: 50%;
  }
  100% {
    transform: translateX(0%);
    background-color: #e34256;
  }
}
@keyframes labelAnimation {
  0% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.#{$indeterminate-progress-indicator} {
  width: 100%;
  padding: space(xs) space(m);

  &-default {
    .#{$indicator} {
      background-color: color(neutral, 500);
      width: 50%;
    }
  }
  &-complete {
    .#{$indicator} {
      background-color: color(success, 900);
    }
  }
  &-failed {
    .#{$indicator} {
      background-color: #e34256;
    }
  }
  &-processing {
    .#{$indicator} {
      background-color: color(brand-primary, 500);
      width: 50%;
    }
    &.animated {
      .#{$indicator} {
        width: 100%;
        animation: indeterminateAnimation 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
      }
    }
    &.#{$complete} {
      .#{$indicator} {
        animation: processingSuccessEnd 1s ease-in-out;
        animation-fill-mode: forwards;
      }
      .#{$tooltip-text} {
        animation: labelAnimation 1s ease-in-out;
      }
    }
  }
  &-processing-complete {
    .#{$indicator} {
      background-color: color(brand-primary, 500);
      width: 50%;
      animation: processingSuccess 4s infinite;
      animation-fill-mode: forwards;
    }
    &.#{$complete} {
      .#{$indicator} {
        animation: processingSuccessEnd 1s ease-in-out;
        animation-fill-mode: forwards;
      }
      .#{$tooltip-text} {
        animation: labelAnimation 1s ease-in-out;
      }
    }
  }
  &-processing-fail {
    .#{$indicator} {
      background-color: color(brand-primary, 500);
      width: 50%;
      animation: processingFail 4s infinite;
      animation-fill-mode: forwards;
    }
    &.#{$failed} {
      .#{$indicator} {
        animation: processingFailEnd 1s ease-in-out;
        animation-fill-mode: forwards;
      }
      .#{$tooltip-text} {
        animation: labelAnimation 1s ease-in-out;
      }
    }
  }
  &.line-only {
    padding: 0;
  }
}