// 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;
  }
}

}