@use "../theme.scss" as *;

.progress-bar {
  background-color: $progress-bar-container-bg-color;
  color: $progress-bar-progress-label-color;
  height: 0.405em;
  position: relative;
  overflow: hidden;

  & .progress {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0, 0.5, 0.5, 1);

    &.primary {
      background-color: $progress-bar-primary-progress-bg-color;
      z-index: 2;
    }

    &.secondary {
      background-color: $progress-bar-secondary-progress-bg-color;
      z-index: 1;
    }
  }

  &.transparent {
    background-color: transparent;
  }

  &.indeterminate {
    & .progress {
      transform-origin: center center;
      animation: indeterminate-animation 1s linear infinite;
    }
  }
}

@keyframes indeterminate-animation {
  0% {
    transform: translate(-50%) scaleX(0);
  }

  50% {
    transform: translate(0%) scaleX(0.3);
  }

  100% {
    transform: translate(50%) scaleX(0);
  }
}