@import '../core/style/variables';


$md-progress-bar-height: 5px !default;
$md-progress-bar-full-animation-duration: 2000ms !default;
$md-progress-bar-piece-animation-duration: 250ms !default;


:host {
  display: block;
  // Height is provided for md-progress-bar to act as a default.
  height: $md-progress-bar-height;
  overflow: hidden;
  position: relative;
  // translateZ is added to force the md-progress-bar into its own GPU layer.
  transform: translateZ(0);
  transition: opacity $md-progress-bar-piece-animation-duration linear;
  width: 100%;

  // The progress bar background is used to show the bubble animation scrolling behind a
  // buffering progress bar.
  .md-progress-bar-background {
    background-repeat: repeat-x;
    background-size: 10px 4px;
    height: 100%;
    position: absolute;
    visibility: hidden;
    width: 100%;
  }

  // The progress bar buffer is the bar indicator showing the buffer value and is only visible
  // beyond the current value of the primary progress bar.
  .md-progress-bar-buffer {
    height: 100%;
    position: absolute;
    transform-origin: top left;
    transition: transform $md-progress-bar-piece-animation-duration ease;
    width: 100%;
  }

   // The secondary progress bar is only used in the indeterminate animation, because of this it
   // is hidden in other uses.
  .md-progress-bar-secondary {
    visibility: hidden;
  }

  // The progress bar fill fills the progress bar with the indicator color.
  .md-progress-bar-fill {
    animation: none;
    height: 100%;
    position: absolute;
    transform-origin: top left;
    transition: transform $md-progress-bar-piece-animation-duration ease;
    width: 100%;
  }

  // A pseudo element is created for each progress bar bar that fills with the indicator color.
  .md-progress-bar-fill::after {
    animation: none;
    content: '';
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
  }

  &[mode='query'] {
    transform: rotateZ(180deg);
  }

  &[mode='indeterminate'],
  &[mode='query'] {
    .md-progress-bar-fill {
      transition: none;
    }
    .md-progress-bar-primary {
      animation: md-progress-bar-primary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;
      left: -145.166611%;
    }
    .md-progress-bar-primary.md-progress-bar-fill::after {
      animation: md-progress-bar-primary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;
    }
    .md-progress-bar-secondary {
      animation: md-progress-bar-secondary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;
      left: -54.888891%;
      visibility: visible;
    }
    .md-progress-bar-secondary.md-progress-bar-fill::after {
      animation: md-progress-bar-secondary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;
    }
  }

  &[mode='buffer'] {
    .md-progress-bar-background {
      animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear;
      visibility: visible;
    }
  }
}


// Reverse the apparent directionality of progress vars for rtl.
:host-context([dir='rtl']) {
  transform: rotateY(180deg);
}

// The values used for animations in md-progress-bar, both timing and transformation, can be
// considered magic values. They are sourced from the Material Design example spec and duplicate
// the values of the original designers definitions.
//
// The indeterminate state is essentially made up of two progress bars, one primary (the one that
// is shown in both the determinate and indeterminate states) and one secondary, which essentially
// mirrors the primary progress bar in appearance but is only shown to assist with the
// indeterminate animations.

// KEYFRAME BLOCK	                   DESCRIPTION
// primary-indeterminate-translate     Translation of the primary progressbar across the screen
// primary-indeterminate-scale         Scaling of the primary bar as it's being translated across the screen
// secondary-indeterminate-translate   Translation of the secondary bar across the screen
// secondary-indeterminate-scale       Scaling of the secondary bar as it's being translated across the screen
//
// Because two different transform animations need to be applied at once, the translation is
// applied to the outer element and the scaling is applied to the inner element, which provides the
// illusion necessary to make the animation work.


// Progress Bar Timing functions:
// $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;
$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;
// $md-progress-bar-primary-indeterminate-translate-step-4 has no timing function.

// $md-progress-bar-primary-indeterminate-scale-step-1 has no timing function
$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;
$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default;
// $md-progress-bar-primary-indeterminate-scale-step-4 has no timing function

$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
// $md-progress-bar-secondary-indeterminate-translate-step-4 has no timing function

$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
// $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function


// Animations for indeterminate and query mode.

// Primary indicator.
@keyframes md-progress-bar-primary-indeterminate-translate {
  0% {
    transform: translateX(0);
  }
  20% {
    animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-2;
    transform: translateX(0);
  }
  59.15% {
    animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-3;
    transform: translateX(83.67142%);
  }
  100% {
    transform: translateX(200.611057%);
  }
}

@keyframes md-progress-bar-primary-indeterminate-scale {
  0% {
    transform: scaleX(0.08);
  }
  36.65% {
    animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-2;
    transform: scaleX(0.08);
  }
  69.15% {
    animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-3;
    transform: scaleX(0.661479);
  }
  100% {
    transform: scaleX(0.08);
  }
}

// Secondary indicator.
@keyframes md-progress-bar-secondary-indeterminate-translate {
  0% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-1;
    transform: translateX(0);
  }
  25% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-2;

    transform: translateX(37.651913%);
  }
  48.35% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-3;
    transform: translateX(84.386165%);
  }
  100% {
    transform: translateX(160.277782%);
  }
}

@keyframes md-progress-bar-secondary-indeterminate-scale {
  0% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-1;
    transform: scaleX(0.08);
  }
  19.15% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-2;
    transform: scaleX(0.457104);
  }
  44.15% {
    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-3;
    transform: scaleX(0.72796);
  }
  100% {
    transform: scaleX(0.08);
  }
}

// Animation for buffer mode.
@keyframes md-progress-bar-background-scroll {
  to {
    transform: translateX(-10px);
  }
}