@if $css-variable-enabled {
  $primary-transition: var(--primary-transition);
  $progress-bar-border-radius: var(--progress-bar-border-radius);
}

progress.#{$prefix}progress {
  appearance: none;
  border: none;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 5px;
  width: 100%;
  height: 16px;
  color: var(--primary-color);
  background-color: var(--progress-back-bg-color);
  border-radius: $progress-bar-border-radius;

  &.#{$prefix}line {
    height: 3px;
  }

  &.#{$prefix}thin, &.#{$prefix}narrow {
    height: 5px;
  }

  &.#{$prefix}small {
    height: 12px;
  }

  &.#{$prefix}large {
    height: 28px;
  }

  &.#{$prefix}xlarge {
    height: 36px;
  }
}

progress.#{$prefix}progress::-webkit-progress-bar {
  background-color: var(--progress-back-bg-color);
  transition: $primary-transition;
}

progress.#{$prefix}progress::-moz-progress-bar {
  background-color: var(--progress-bar-bg-color);
  border-radius: $progress-bar-border-radius;
  transition: $primary-transition;
}

@mixin base {
  background-color: var(--primary-color);
  border-radius: $progress-bar-border-radius;
  transition: $primary-transition;
}

progress[value].#{$prefix}progress {

  &::-webkit-progress-value {
    @include base;
  }

  &::-moz-progress-value {
    @include base;
  }

  &::-ms-fill {
    border: none;
    @include base;
  }

  @each $name, $color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        &::-webkit-progress-value {
          background-color: $color;
        }

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

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