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

//// /// @group slider ////

/// Default height of the slider. /// @type Number $slider-height: 0.5rem !default;

/// Default background color of the slider's track. /// @type Color $slider-background: $light-gray !default;

/// Default color of the active fill color of the slider. /// @type Color $slider-fill-background: $medium-gray !default;

/// Default height of the handle of the slider. /// @type Number $slider-handle-height: 1.4rem !default;

/// Default width of the handle of the slider. /// @type Number $slider-handle-width: 1.4rem !default;

/// Default color of the handle for the slider. /// @type Color $slider-handle-background: $primary-color !default;

/// Default fade amount of a disabled slider. /// @type Number $slider-opacity-disabled: 0.25 !default;

/// Default radius for slider. /// @type Number $slider-radius: $global-radius !default;

@mixin foundation-range-input {

// scss-lint:disable QualifyingElement
input[type="range"] {
  $margin: ($slider-handle-height - $slider-height) / 2;

  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  margin-top: $margin;
  margin-bottom: $margin;
  border: 0;
  line-height: 1;

  @if has-value($slider-radius) {
    border-radius: $slider-radius;
  }

  &:focus {
    outline: 0;
  }

  &[disabled] {
    opacity: $slider-opacity-disabled;
  }

  // Chrome/Safari
  &::-webkit-slider-runnable-track {
    height: $slider-height;
    background: $slider-background;
  }

  &::-webkit-slider-handle {
    -webkit-appearance: none;
    background: $slider-handle-background;
    width: $slider-handle-width;
    height: $slider-handle-height;
    margin-top: -$margin;

    @if has-value($slider-radius) {
      border-radius: $slider-radius;
    }
  }

  // Firefox
  &::-moz-range-track {
    -moz-appearance: none;
    height: $slider-height;
    background: $slider-background;
  }

  &::-moz-range-thumb {
    -moz-appearance: none;
    background: $slider-handle-background;
    width: $slider-handle-width;
    height: $slider-handle-height;
    margin-top: -$margin;

    @if has-value($slider-radius) {
      border-radius: $slider-radius;
    }
  }

  // Internet Explorer
  &::-ms-track {
    height: $slider-height;
    background: $slider-background;
    color: transparent;
    border: 0;
    overflow: visible;
    border-top: $margin solid $body-background;
    border-bottom: $margin solid $body-background;
  }

  &::-ms-thumb {
    background: $slider-handle-background;
    width: $slider-handle-width;
    height: $slider-handle-height;
    border: 0;

    @if has-value($slider-radius) {
      border-radius: $slider-radius;
    }
  }

  &::-ms-fill-lower {
    background: $slider-fill-background;
  }

  &::-ms-fill-upper {
    background: $slider-background;
  }

  @at-root {
    output {
      line-height: $slider-handle-height;
      vertical-align: middle;
      margin-left: 0.5em;
    }
  }
}

}