// Material design does not have specs for striped progress bars
// so striped progress bars have been styled according to the "buffer" variation of linear indicator
// (https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators)

.progress {
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.progress-bar {
  &::after {
    content: '';
    display: block;
    height: $progress-bar-height;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}

// Animated & striped

.progress-bar-animated {
  &::before {
    animation-direction: reverse;
    animation-duration: $transition-duration-mobile;
    animation-iteration-count: infinite;
    animation-name: progress-bar-animation;
    animation-timing-function: linear;

    @include media-breakpoint-up(sm) {
      animation-duration: $transition-duration-tablet;
    }

    @include media-breakpoint-up(lg) {
      animation-duration: $transition-duration-desktop;
    }
  }
}

.progress-bar-animated,
.progress-bar-striped {
  box-sizing: content-box;
  position: relative;

  &::after {
    @include border-right-radius($progress-bar-border-radius);

    right: ($progress-bar-buffer-width * -1);
    bottom: ($progress-bar-height * -1);
  }

  &::before {
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: ($progress-bar-height * 3) ($progress-bar-height * 3);
    content: '';
    display: block;
    height: $progress-bar-height;
    position: absolute;
    right: -100vw;
    bottom: ($progress-bar-height * -1);
    left: 0;
    z-index: -1;
  }
}

@keyframes progress-bar-animation {
  from {
    background-position: 0 0;
  }

  to {
    background-position: ($progress-bar-height * 3) 0;
  }
}

// Indeterminate

.progress-bar-indeterminate {
  position: relative;
  width: 100%;

  &::after,
  &::before {
    @include border-radius($progress-bar-border-radius);

    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 0%;
  }

  &::after {
    animation-name: progress-bar-indeterminate-after;
    bottom: ($progress-bar-height * -1);
    z-index: 0;
  }

  &::before {
    animation-name: progress-bar-indeterminate-before;
    content: '';
    display: block;
    height: $progress-bar-height;
    position: absolute;
    bottom: ($progress-bar-height * -1);
    z-index: 0;
  }
}

@keyframes progress-bar-indeterminate-after {
  0% {
    left: 0%;
    width: 0%;
  }

  50% {
    left: 25%;
    width: 75%;
  }

  75% {
    left: 100%;
    width: 0%;
  }
}

@keyframes progress-bar-indeterminate-before {
  0%,
  62.5% {
    left: 0%;
    width: 0%;
  }

  71.875% {
    left: 0%;
    width: 25%;
  }

  81.25% {
    left: 25%;
    width: 50%;
  }

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