@import "../utilities/mixins";

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

$progress-indeterminate-duration: 1.5s !default;

$progress-colors: $colors !default;

:root {
  @include register-vars(
    (
      progress-bar-background-color: #{$progress-bar-background-color},
      progress-value-background-color: #{$progress-value-background-color},
      progress-border-radius: #{$progress-border-radius},
      progress-indeterminate-duration: #{$progress-indeterminate-duration},
    )
  );
}

.#{$class-prefix}progress {
  @extend %block;

  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: getVar("progress-border-radius");
  display: block;
  height: getVar("size-normal");
  overflow: hidden;
  padding: 0;
  width: 100%;

  &::-webkit-progress-bar {
    background-color: getVar("progress-bar-background-color");
  }

  &::-webkit-progress-value {
    background-color: getVar("progress-value-background-color");
  }

  &::-moz-progress-bar {
    background-color: getVar("progress-value-background-color");
  }

  &::-ms-fill {
    background-color: getVar("progress-value-background-color");
    border: none;
  }

  // Colors
  @each $name, $pair in $progress-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%,
          #{getVar("progress-bar-background-color")} 30%
        );
      }
    }
  }

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

  &.is-medium {
    height: getVar("size-medium");
  }

  &.is-large {
    height: getVar("size-large");
  }
}

@keyframes moveIndeterminate {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: (-200%) 0;
  }
}