.e-progress {
  -moz-appearance   : none;
  -webkit-appearance: none;
  border            : none;
  border-radius     : 100px;
  display           : block;
  height            : 1rem;
  overflow          : hidden;
  padding           : 0;
  width             : 100%;
  background-color  : $default !important;

  &::-webkit-progress-bar {
    background-color: $default !important;
  }

  &::-webkit-progress-value {
    background-color: $progress-bg;
  }

  &::-moz-progress-bar {
    background-color: $progress-bg;
  }

  &::-ms-fill {
    background-color: $progress-bg;
    border          : none;
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.#{$name} {
      &::-webkit-progress-value {
        background-color: $color;
      }

      &::-moz-progress-bar {
        background-color: $color;
      }

      &::-ms-fill {
        background-color: $color;
      }
    }
  }

  &.warning {
    &::-webkit-progress-value {
      background-color: $warning;
    }

    &::-moz-progress-bar {
      background-color: $warning;
    }

    &::-ms-fill {
      background-color: $warning;
    }
  }
}
