@import '../../_style/animation/variables.scss';

@mixin md-progress-bar-indeterminate($hue) {
  .md-progress-bar-buffer,
  .md-progress-bar-fill {
    &::after {
      background-color: var(--md-#{$hue});
    }
  }

  .md-progress-bar-buffer {
    opacity: 0.38;
  }
}

@mixin md-progress-bar-buffer($hue) {
  .md-progress-bar-fill,
  .md-progress-bar-track {
    background-color: var(--md-#{$hue});
  }

  .md-progress-bar-buffer {
    border-color: var(--md-#{$hue});
  }

  .md-progress-bar-buffer,
  .md-progress-bar-track {
    opacity: 0.38;
  }
}

.md-progress-bar {
  height: 5px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0) scaleY(1);
  transform-origin: center center;
  transition: opacity 0.3s $md-transition-default-timing, transform 0.4s $md-transition-default-timing;
  will-change: opacity, transform;

  &.md-indeterminate,
  &.md-query {
    &.md-indeterminate,
    &.md-query {
      @include md-progress-bar-indeterminate(primary);

      &.md-accent {
        @include md-progress-bar-indeterminate(accent);
      }
    }

    .md-progress-bar-track {
      left: -150%;
      animation: md-progress-bar-indeterminate-track 2s infinite linear;

      &::after {
        animation: md-progress-bar-indeterminate-track-alternate 2s infinite linear;
      }
    }

    .md-progress-bar-fill {
      left: -55%;
      animation: md-progress-bar-indeterminate-fill 2s infinite linear;

      &::after {
        animation: md-progress-bar-indeterminate-fill-alternate 2s infinite linear;
      }
    }
  }

  &.md-determinate,
  &.md-buffer {
    .md-progress-bar-track {
      opacity: 0.38;
    }

    .md-progress-bar-fill,
    .md-progress-bar-track,
    .md-progress-bar-buffer {
      transition: 0.25s $md-transition-stand-timing;
    }
  }

  &.md-determinate {
    @include md-progress-bar-indeterminate(primary);

    &.md-accent {
      @include md-progress-bar-indeterminate(accent);
    }

    .md-progress-bar-track {
      display: none;
    }
  }

  &.md-buffer {
    .md-progress-bar-buffer {
      border-top: 4px dotted;
      animation: md-progress-bar-buffer 0.25s infinite linear;
    }

    @include md-progress-bar-buffer(primary);

    &.md-accent {
      @include md-progress-bar-buffer(secondary);
    }
  }

  &.md-query {
    transform: rotateZ(180deg);
  }
}

.md-progress-bar-enter,
.md-progress-bar-leave-active {
  opacity: 0.5;
  transform: translateZ(0) scaleY(0);
}

.md-progress-bar-buffer,
.md-progress-bar-track,
.md-progress-bar-fill {
  transform-origin: top left;

  &,
  &::after {
    width: 100%;
    height: 100%;
    position: absolute;
    will-change: transform;
  }

  &::after {
    display: inline-block;
    left: 0;
    content: ' ';
  }
}

@keyframes md-progress-bar-indeterminate-track {
  0% {
    transform: translateX(0);
  }

  20% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.5);
    transform: translateX(0);
  }

  60% {
    animation-timing-function: cubic-bezier(0.3, 0.38, 0.55, 0.96);
    transform: translateX(83.67%);
  }

  100% {
    transform: translateX(200.61%);
  }
}

@keyframes md-progress-bar-indeterminate-track-alternate {
  0% {
    transform: scaleX(0.08);
  }

  35% {
    animation-timing-function: cubic-bezier(0.33, 0.12, 0.79, 1);
    transform: scaleX(0.08);
  }

  70% {
    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
    transform: scaleX(0.66);
  }

  100% {
    transform: scaleX(0.08);
  }
}

@keyframes md-progress-bar-indeterminate-fill {
  0% {
    animation-timing-function: cubic-bezier(0.15, 0, 0.52, 0.41);
    transform: translateX(0);
  }

  25% {
    animation-timing-function: cubic-bezier(0.31, 0.28, 0.8, 0.73);
    transform: translateX(37.65%);
  }

  50% {
    animation-timing-function: cubic-bezier(0.4, 0.63, 0.6, 0.9);
    transform: translateX(84.39%);
  }

  100% {
    transform: translateX(160.28%);
  }
}

@keyframes md-progress-bar-indeterminate-fill-alternate {
  0% {
    animation-timing-function: cubic-bezier(0.15, 0, 0.52, 0.41);
    transform: scaleX(0.08);
  }

  20% {
    animation-timing-function: cubic-bezier(0.31, 0.28, 0.8, 0.73);
    transform: scaleX(0.46);
  }

  45% {
    animation-timing-function: cubic-bezier(0.4, 0.63, 0.6, 0.9);
    transform: scaleX(0.73);
  }

  100% {
    transform: scaleX(0.08);
  }
}

@keyframes md-progress-bar-buffer {
  to {
    transform: translate3d(-8px, 0, 0);
  }
}