$progress-bar-background-color: v("border-light") !default
$progress-value-background-color: v("text") !default
$progress-border-radius: v("radius-rounded") !default

$progress-indeterminate-duration: 1.5s !default

+register(progress-border-radius,$progress-border-radius, true)
+register(progress-bar-background-color,$progress-bar-background-color, true)
+register(progress-value-background-color,$progress-value-background-color, true)
+register(progress-indeterminate-duration,$progress-indeterminate-duration, true)

.progress
  @extend %block
  -moz-appearance: none
  -webkit-appearance: none
  border: none
  border-radius: v("progress-border-radius")
  display: block
  height: v("size-normal")
  overflow: hidden
  padding: 0
  width: 100%
  &::-webkit-progress-bar
    background-color: v("progress-bar-background-color")
  &::-webkit-progress-value
    background-color: v("progress-value-background-color")
  &::-moz-progress-bar
    background-color: v("progress-value-background-color")
  &::-ms-fill
    background-color: v("progress-value-background-color")
    border: none
  // Colors
  @each $name in $colors-list
    $color: v($name)
    &.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%, v("progress-bar-background-color") 30%)

  &:indeterminate
    animation-duration: v("progress-indeterminate-duration")
    animation-iteration-count: infinite
    animation-name: moveIndeterminate
    animation-timing-function: linear
    background-color: v("progress-bar-background-color")
    background-image: linear-gradient(to right, v("text") 30%, v("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

  // Sizes
  &.is-small
    height: v("size-small")
  &.is-medium
    height: v("size-medium")
  &.is-large
    height: v("size-large")

@keyframes moveIndeterminate
  from
    background-position: 200% 0
  to
    background-position: -200% 0