// stylelint-disable selector-no-qualifying-type

//
// Progress
//

progress[value] {
  position: relative;
  appearance: none;
  width: 100%;
  height: 12px;
  text-align: center;
  border: none;

  // No border in IE
  &::-ms-fill {
    border: none;
  }

  // Background color
  &::-webkit-progress-bar {
    background-color: $progress-bg;
  }

  // Progress value
  &.value::after {
    position: absolute;
    top: -7px;
    font-size: 12px;
    // stylelint-disable declaration-no-important
    color: $gray-00 !important;
    content: attr(value);
  }

  // Colors
  &::-webkit-progress-value { background-color: $progress-default-bar-bg; }
  &::-moz-progress-bar { background-color: $progress-default-bar-bg; }

  @each $color, $value in $ui-colors {
    &.#{$color} { color: $value; }
    &.#{$color}::-webkit-progress-value { background-color: $value; }
    &.#{$color}::-moz-progress-bar { background-color: $value; }
  }
}