/*————————————

TAG Progress Bars

————————————*/ // // Common Styles //

.u-progress {

      display: block;
      width: 100%;
height: 12px;
overflow: hidden;
background-color: $g-color-gray-light-v4;
      border: none;
      outline: none;
      appearance: none;

      &::-webkit-progress-bar {
              background-color: $g-color-gray-light-v4;
      }

      &::-ms-fill {
              background-color: $g-color-primary;
      }
      &::-webkit-progress-value {
              background-color: $g-color-primary;
      }
      &::-moz-progress-bar {
              background-color: $g-color-primary;
      }

}

// // Progress Bars Additional BG colors //

.u-progress {

// Color Blue
&--blue::-ms-fill {
  background-color: $g-color-blue;
}
&--blue::-webkit-progress-value {
  background-color: $g-color-blue;
}
&--blue::-moz-progress-bar {
  background-color: $g-color-blue;
}

// Color Light Blue
&--lightblue::-ms-fill {
  background-color: $g-color-lightblue;
}
&--lightblue::-webkit-progress-value {
  background-color: $g-color-lightblue;
}
&--lightblue::-moz-progress-bar {
  background-color: $g-color-lightblue;
}

// Color Dark Blue
&--darkblue::-ms-fill {
  background-color: $g-color-darkblue;
}
&--darkblue::-webkit-progress-value {
  background-color: $g-color-darkblue;
}
&--darkblue::-moz-progress-bar {
  background-color: $g-color-darkblue;
}

// Color Indigo
&--indigo::-ms-fill {
  background-color: $g-color-indigo;
}
&--indigo::-webkit-progress-value {
  background-color: $g-color-indigo;
}
&--indigo::-moz-progress-bar {
  background-color: $g-color-indigo;
}

// Color Red
&--red::-ms-fill {
  background-color: $g-color-red;
}
&--red::-webkit-progress-value {
  background-color: $g-color-red;
}
&--red::-moz-progress-bar {
  background-color: $g-color-red;
}

// Color Light Red
&--lightred::-ms-fill {
  background-color: $g-color-lightred;
}
&--lightred::-webkit-progress-value {
  background-color: $g-color-lightred;
}
&--lightred::-moz-progress-bar {
  background-color: $g-color-lightred;
}

// Color Dark Red
&--darkred::-ms-fill {
  background-color: $g-color-darkred;
}
&--darkred::-webkit-progress-value {
  background-color: $g-color-darkred;
}
&--darkred::-moz-progress-bar {
  background-color: $g-color-darkred;
}

// Color Purple
&--purple::-ms-fill {
  background-color: $g-color-purple;
}
&--purple::-webkit-progress-value {
  background-color: $g-color-purple;
}
&--purple::-moz-progress-bar {
  background-color: $g-color-purple;
}

// Color Dark Purple
&--darkpurple::-ms-fill {
  background-color: $g-color-darkpurple;
}
&--darkpurple::-webkit-progress-value {
  background-color: $g-color-darkpurple;
}
&--darkpurple::-moz-progress-bar {
  background-color: $g-color-darkpurple;
}

// Color Pink
&--pink::-ms-fill {
  background-color: $g-color-pink;
}
&--pink::-webkit-progress-value {
  background-color: $g-color-pink;
}
&--pink::-moz-progress-bar {
  background-color: $g-color-pink;
}

// Color Orange
&--orange::-ms-fill {
  background-color: $g-color-orange;
}
&--orange::-webkit-progress-value {
  background-color: $g-color-orange;
}
&--orange::-moz-progress-bar {
  background-color: $g-color-orange;
}

// Color Deep Orange
&--deeporange::-ms-fill {
  background-color: $g-color-deeporange;
}
&--deeporange::-webkit-progress-value {
  background-color: $g-color-deeporange;
}
&--deeporange::-moz-progress-bar {
  background-color: $g-color-deeporange;
}

// Color Yellow
&--yellow::-ms-fill {
  background-color: $g-color-yellow;
}
&--yellow::-webkit-progress-value {
  background-color: $g-color-yellow;
}
&--yellow::-moz-progress-bar {
  background-color: $g-color-yellow;
}

// Color Aqua
&--aqua::-ms-fill {
  background-color: $g-color-aqua;
}
&--aqua::-webkit-progress-value {
  background-color: $g-color-aqua;
}
&--aqua::-moz-progress-bar {
  background-color: $g-color-aqua;
}

// Color Cyan
&--cyan::-ms-fill {
  background-color: $g-color-cyan;
}
&--cyan::-webkit-progress-value {
  background-color: $g-color-cyan;
}
&--cyan::-moz-progress-bar {
  background-color: $g-color-cyan;
}

// Color Teal
&--teal::-ms-fill {
  background-color: $g-color-teal;
}
&--teal::-webkit-progress-value {
  background-color: $g-color-teal;
}
&--teal::-moz-progress-bar {
  background-color: $g-color-teal;
}

// Color Brown
&--brown::-ms-fill {
  background-color: $g-color-brown;
}
&--brown::-webkit-progress-value {
  background-color: $g-color-brown;
}
&--brown::-moz-progress-bar {
  background-color: $g-color-brown;
}

// Color Blue Gray
&--bluegray::-ms-fill {
  background-color: $g-color-bluegray;
}
&--bluegray::-webkit-progress-value {
  background-color: $g-color-bluegray;
}
&--bluegray::-moz-progress-bar {
  background-color: $g-color-bluegray;
}

// Color Beige
&--beige::-ms-fill {
  background-color: $g-color-beige;
}
&--beige::-webkit-progress-value {
  background-color: $g-color-beige;
}
&--beige::-moz-progress-bar {
  background-color: $g-color-beige;
}

// Color Black
&--black::-ms-fill {
  background-color: $g-color-black;
}
&--black::-webkit-progress-value {
  background-color: $g-color-black;
}
&--black::-moz-progress-bar {
  background-color: $g-color-black;
}

}