$progress-bar-background-color ?= $border-light
$progress-value-background-color ?= $text
$progress-border-radius ?= $radius-rounded

$progress-indeterminate-duration ?= 1.5s

$progress-colors ?= $colors

.progress
  @extend $block
  -moz-appearance none
  -webkit-appearance none
  border none
  border-radius $progress-border-radius
  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
  // Colors
  for $name, $pair in $progress-colors
    $color = $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%)

  &: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
    &::-ms-fill
      animation-name none

  // 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