//
// Basic progress bar
//

.progress[value] {
  // Set overall background
  background-color: $progress-bg;
}

// Filled-in portion of the bar
.progress[value]::-ms-fill {
  background-color: $progress-bar-color;
}
.progress[value]::-moz-progress-bar {
  background-color: $progress-bar-color;
}
.progress[value]::-webkit-progress-value {
  background-color: $progress-bar-color;
}

// Unfilled portion of the bar
.progress[value]::-webkit-progress-bar {
  background-color: $progress-bg;
  @include box-shadow($progress-box-shadow);
}
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
.progress[value] {
  background-color: $progress-bg;
  @include box-shadow($progress-box-shadow);
}

// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (min-width:0\0) {
  .progress {
    background-color: $progress-bg;
    @include box-shadow($progress-box-shadow);
  }
  .progress-bar {
    background-color: $progress-bar-color;
  }
}

//
// Striped
//

.progress-striped[value]::-webkit-progress-value {
  @include gradient-striped();
}
.progress-striped[value]::-moz-progress-bar {
  @include gradient-striped();
}
.progress-striped[value]::-ms-fill {
  @include gradient-striped();
}
// IE9
@media screen and (min-width:0\0) {
  .progress-bar-striped {
    @include gradient-striped();
  }
}


//
// Animated
//

// Firefox styles must be entirely separate or it busts Webkit styles.
//
// Commented out for now because linter.
//


// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (min-width:0\0) {
  .progress[width^="0"] {
    color: $gray-light;
  }
}

//
// Variations
//

.progress-success {
  @include progress-variant($progress-bar-success-bg);
}
.progress-info {
  @include progress-variant($progress-bar-info-bg);
}
.progress-warning {
  @include progress-variant($progress-bar-warning-bg);
}
.progress-danger {
  @include progress-variant($progress-bar-danger-bg);
}