.progress {
  appearance: none;
  display: block;
  overflow: hidden;
  width: 100%;
  height: $progress-bar-thin-height;
  border-radius: 0;
  &::-webkit-progress-bar {
    height: $progress-bar-thin-height;
    background-color: $gray-lighter;
  }
  &::-webkit-progress-value {
    height: $progress-bar-thin-height;
    background-color: $info;
  }
}

.progress.thick,
.progress.thick {
  height: $spacing-xs;
  border-radius: $border-radius;
  &::-webkit-progress-value,
  &::-webkit-progress-bar {
    height: $spacing-xs;
  } 
}

.progress.empty,
.progress.empty-progress-bar {
  border-bottom: $border-width solid $white;
}

.progress .progress-bar  {
  float: left;
  height: 100%;
}

.progress-vertical {
  background-color: $gray-lighter;
  @include border-radius($border-radius);
  overflow: hidden;
  width: $spacing-xs;
  margin: auto;

  &.thin-progress-bar {
    height: $progress-vertical-bar-thin-height;
  }

  .progress-bar {
    width: 100%;
  }
}


.progress-bar-success,
.progress-bar-success::-webkit-progress-value {
  background-color: $success;
}

.progress-bar-danger,
.progress-bar-danger::-webkit-progress-value {
  background-color: $danger;
}

.progress.test-progress {
  &::-webkit-progress-bar {
    height: $progress-bar-thin-height;
    background-color: $gray-lighter;
  }
  &::-webkit-progress-value {
    height: $progress-bar-thin-height;
    background-color: $info;
  }
}

// progress bar colors

.progress-bar-blue {
  background-color: $blue;
}

.progress.bg-gray::-webkit-progress-bar {
  background-color: $gray-light;
}

.progress.purple {
  background-color: $purple;
}

.progress.purple::-webkit-progress-value {
  background-color: $purple;
}

.progress.purple::-moz-progress-bar {
  background-color: $purple;
}

.progress.teal::-webkit-progress-value {
  background-color: $teal-darker;
}

.progress.teal::-moz-progress-bar {
  background-color: $teal-darker;
}

.progress.orange::-webkit-progress-value {
  background-color: $orange;
}

.progress.orange::-moz-progress-bar {
  background-color: $orange;
}

.progress.pink::-webkit-progress-value {
  background-color: $pink;
}

.progress.pink::-moz-progress-bar {
  background-color: $pink;
}

.progress.yellow::-webkit-progress-value {
  background-color: $yellow;
}

.progress.yellow::-moz-progress-bar {
  background-color: $yellow;
}

.progress.green::-webkit-progress-value {
  background-color: $green;
}

.progress.green::-moz-progress-bar {
  background-color: $green;
}


.progress-wrap {
  position: relative;
}

.progress-threshold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: $gray-darkest;
  border-radius: 1px;
  pointer-events: none;
  transform: translateX(-50%);
}