@charset "UTF-8";

//-----------------------------------------------------
// range
//-----------------------------------------------------

$rangeHeight:             $barHeight !default;
$thumbBg:                 $primary !default;
$trackBg:                 $colorC !default;

$rangeValueWidth:         40px !default;


input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
}
input[type=range]:focus {
  outline: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-webkit-slider-container, 
input[type=range]::-webkit-media-slider-container{
  height: $rangeHeight;
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: $trackBg;
  border-radius: 1px;
  border: 0 none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: $trackBg;
}

input[type=range]::-webkit-slider-thumb, 
input[type=range]::-webkit-media-slider-thumb{
  -webkit-appearance:none;
  width: 20px;
  height: 20px;
  background: $thumbBg;
  border-radius: 50%;
  display: block;
  margin-top: -10px;
  border: 0 none;
  box-shadow: none;
}
.range-wrap{
  position: relative;
  &:before{
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    background: $trackBg;
    top: ($rangeHeight - 2px) / 2;
    z-index: 0;
  }
  input[type=range]{
    position: relative;
    z-index: 2;
  }
}

.range-all{
  display: flex;
  background: #fff;
  .range-value{
    width: $rangeValueWidth;
    text-align: center;
    line-height: $rangeHeight;
  }
  .range-wrap{
    flex: 1;
    width: 1%;
  }
}

// input[type=range]::-ms-track {
//   width: 100%;
//   height: 4px;
//   cursor: pointer;
//   background: transparent;
//   border-color: transparent;
//   color: transparent;
// }
// input[type=range]::-ms-fill-lower {
//   background: #c9c9c9;
//   border: 0px solid #010101;
//   border-radius: 2px;
//   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
// }
// input[type=range]::-ms-fill-upper {
//   background: #cccccc;
//   border: 0px solid #010101;
//   border-radius: 2px;
//   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
// }
// input[type=range]::-ms-thumb {
//   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
//   border: 0px solid rgba(204, 204, 204, 0);
//   height: 20px;
//   width: 20px;
//   border-radius: 10px;
//   background: #188eee;
//   cursor: pointer;
//   height: 4px;
// }
// input[type=range]:focus::-ms-fill-lower {
//   background: #cccccc;
// }
// input[type=range]:focus::-ms-fill-upper {
//   background: #cfcfcf;
// }