@import url("../../_style/_mixins.less");
@import url("../../_style/_theme.less");

// Slider
.range-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: -1px;
  .align-self(center);
  input[type="range"] {
      position: relative;
      height: 28px;
      width: 100%;
      margin: 4px 0 5px 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
      background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
      background-position: center;
      background-size: 100% 2px;
      background-repeat: no-repeat;
      outline: 0;
      border: none;
      box-sizing: content-box;
      -ms-background-position-y: 500px;
      &:focus, &:active {
          border: 0;
          outline: 0;
      }
  }



  // Range thumb mixin
  .range-thumb() {
      height: 28px;
      width: 28px;
      border-radius: 28px;
      background: #fff;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
      border: 0;
      outline: 0;
      position: absolute;
      box-sizing: border-box;
      content: ' ';
  }

  // ======= WebKit/Blink ========

  // Before Track
  input[type="range"]:after {
      height: 2px;
      background: #fff;
      content:' ';
      width: 5px;
      top: 50%;
      margin-top: -1px;
      left: -5px;
      z-index: 1;
      position: absolute;
  }
  // Thumb
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      .range-thumb();
      position: relative;
      cursor: pointer;
      margin-top: -1px;
  }
  input[type="range"]::-webkit-slider-thumb:after {
      .range-thumb();
      left: 0;
      top: 0;
  }
  // Track Active Highlight
  input[type="range"]::-webkit-slider-thumb:before {
      position: absolute;
      top: 50%;
      right: 100%;
      width: 2000px;
      height: 2px;
      margin-top: -1px;
      z-index: 1;
      background: @themeColor;
      content: ' ';
  }

  // ======= FireFox ========
  input[type="range"]::-moz-range-track {
      width: 100%;
      height: 2px;
      background: #b7b8b7;
      border: none;
      outline: 0;
  }
  input[type="range"]::-moz-range-thumb {
      .range-thumb();
  }

  // ======= IE ========
  input[type="range"]::-ms-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
  }
  input[type="range"]::-ms-thumb {
      .range-thumb();
      box-shadow: none;
      border: 1px solid rgba(0,0,0,0.2);
      box-sizing: border-box;
      margin-top: 0;
      top: 50%;
  }

  input[type="range"]::-ms-fill-lower {
      background: @themeColor;
  }
  input[type="range"]::-ms-fill-upper {
      background: #b7b8b7;
  }
}