File: engine/modules/contrib/foundation/source/scss/forms/_progress.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group progress-bar
////

/// Height of a progress bar.
/// @type Number
$progress-height: 1rem !default;

/// Background color of a progress bar.
/// @type Color
$progress-background: $medium-gray !default;

/// Bottom margin of a progress bar.
/// @type Number
$progress-margin-bottom: $global-margin !default;

/// Default color of a progress bar's meter.
/// @type Color
$progress-meter-background: $primary-color !default;

/// Default radius of a progress bar.
/// @type Number
$progress-radius: $global-radius !default;

@mixin foundation-progress-element {
  progress {
    display: block;
    width: 100%;
    height: $progress-height;
    margin-bottom: $progress-margin-bottom;

    appearance: none;

    @if hasvalue($progress-radius) {
      border-radius: $progress-radius;
    }

    // For Firefox
    border: 0;
    background: $progress-background;

    &::-webkit-progress-bar {
      background: $progress-background;

      @if hasvalue($progress-radius) {
        border-radius: $progress-radius;
      }
    }

    &::-webkit-progress-value {
      background: $progress-meter-background;

      @if hasvalue($progress-radius) {
        border-radius: $progress-radius;
      }
    }

    &::-moz-progress-bar {
      background: $progress-meter-background;

      @if hasvalue($progress-radius) {
        border-radius: $progress-radius;
      }
    }

    @each $name, $color in $foundation-palette {
      &.#{$name} {
        // Internet Explorer sets the fill with color
        color: $color;

        &::-webkit-progress-value {
          background: $color;
        }

        &::-moz-progress-bar {
          background: $color;
        }
      }
    }

    // For IE and Edge
    &::-ms-fill {
      @if hasvalue($progress-radius) {
        border-radius: $progress-radius;
      }

      border: 0;
    }
  }
}