$progress-bar-background-color: $border !default $progress-value-background-color: $text !default

$progress-indeterminate-duration: 1.5s !default

.progress

@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $radius-rounded
display: block
height: $size-normal
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
  background-color: $progress-bar-background-color
&::-webkit-progress-value
  background-color: $progress-value-background-color
&::-moz-progress-bar
  background-color: $progress-value-background-color
&::-ms-fill
  background-color: $progress-value-background-color
  border: none
&:indeterminate
  animation-duration: $progress-indeterminate-duration
  animation-iteration-count: infinite
  animation-name: moveIndeterminate
  animation-timing-function: linear
  background-color: $progress-bar-background-color
  background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
  background-position: top left
  background-repeat: no-repeat
  background-size: 150% 150%
  &::-webkit-progress-bar
    background-color: transparent
  &::-moz-progress-bar
    background-color: transparent
// Colors
@each $name, $pair in $colors
  $color: nth($pair, 1)
  &.is-#{$name}
    &::-webkit-progress-value
      background-color: $color
    &::-moz-progress-bar
      background-color: $color
    &::-ms-fill
      background-color: $color
    &:indeterminate
      background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)

// Sizes
&.is-small
  height: $size-small
&.is-medium
  height: $size-medium
&.is-large
  height: $size-large

@keyframes moveIndeterminate

from
  background-position: 200% 0
to
  background-position: -200% 0