@use "../../variables";
@use "../../utils" as *;

.mie.progressbar.indeterminate {
  &::before {
    border-radius: mvar("progress.rounded");
    position: absolute;
    content: "";

    bottom: 0;
    left: 0;
    top: 0;

    animation: progress-pulsating 2s ease-in infinite;
    transform-origin: center;
    width: 100%;
  }

  &.pulsating::before {
    animation-name: progress-pulsating;
    animation-duration: 2s;

    background-color: mvar("progressbar.indeterminate.bg");
  }

  &.filling::before {
    animation-name: progress-filling;
    animation-duration: 2s;

    background-color: mvar("progressbar.indeterminate.bg");
  }

  &.sliding::before {
    animation-name: progress-sliding;
    animation-duration: 3s;

    background-color: mvar("progressbar.indeterminate.bg");
  }

  &.swinging::before {
    animation-name: progress-swinging;
    animation-duration: 3s;

    background-color: mvar("progressbar.indeterminate.bg");
  }
}

@keyframes progress-swinging {
  0%,
  100% {
    width: 10%;
    left: -25%;
  }

  25%,
  65% {
    width: 70%;
  }

  50% {
    width: 10%;
    left: 100%;
  }
}

@keyframes progress-sliding {
  0% {
    width: 10%;
    left: -25%;
  }

  50% {
    width: 70%;
  }

  100% {
    width: 10%;
    left: 100%;
  }
}

@keyframes progress-filling {
  0% {
    transform: scale(0, 1);
  }

  80% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes progress-pulsating {
  0% {
    transform: scale(0, 1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
