$progress-height: 1rem !default;
$progress-margin-bottom: 0.4rem !default;
$progress-bar-color: var(--color-light-grey) !default;
$progress-bar-value-color: var(--color-dark) !default;

$pseudo-fill-classes: -moz-progress-bar, -webkit-progress-value, -ms-fill;

.progress {
  --bar-height: #{$progress-height};
  --margin-bottom: #{$progress-margin-bottom};
  --bar-color: #{$progress-bar-color};
  --value-color: #{$progress-bar-value-color};

  border: none;
  display: flex;
  height: var(--bar-height);
  margin-bottom: var(--margin-bottom);
  -webkit-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  width: 100%;

  &.is-round {
    border-radius: 50px;

    &::-webkit-progress-bar {
      border-radius: 50px;
    }

    &::#{nth($pseudo-fill-classes, 2)} {
      border-radius: 50px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &::#{nth($pseudo-fill-classes, 1)} {
      border-radius: 50px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

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

  @each $class in $pseudo-fill-classes {
    &::#{$class} {
      background-color: var(--value-color);
      border: none;
    }
  }

  @each $color in $color-palette {
    &.is-#{nth($color, 1)}::#{nth($pseudo-fill-classes, 3)} {
      --value-color: var(--color-#{nth($color, 1)});
    }

    &.is-#{nth($color, 1)}::#{nth($pseudo-fill-classes, 1)} {
      --value-color: var(--color-#{nth($color, 1)});
    }

    &.is-#{nth($color, 1)}::#{nth($pseudo-fill-classes, 2)} {
      --value-color: var(--color-#{nth($color, 1)});
    }
  }
}