/* Range

========================================================================== */

.range-field {

position: relative;

}

input, input + .thumb {

@extend .no-select;
cursor: pointer;

}

input {

position: relative;
background-color: transparent;
border: none;
outline: none;
width: 100%;
margin: 15px 0;
padding: 0;

&:focus {
  outline: none;
}

}

input + .thumb {

position: absolute;
top: 10px;
left: 0;
border: none;
height: 0;
width: 0;
border-radius: 50%;
background-color: $radio-fill-color;
margin-left: 7px;

transform-origin: 50% 50%;
transform: rotate(-45deg);

.value {
  display: block;
  width: 30px;
  text-align: center;
  color: $radio-fill-color;
  font-size: 0;
  transform: rotate(45deg);
}

&.active {
  border-radius: 50% 50% 50% 0;

  .value {
    color: $input-background;
    margin-left: -1px;
    margin-top: 8px;
    font-size: 10px;
  }
}

}

// Shared @mixin range-track {

height: $track-height;
background: #c2c0c2;
border: none;

}

@mixin range-thumb {

border: none;
height: $range-height;
width: $range-width;
border-radius: 50%;
background: $radio-fill-color;
transition: box-shadow .3s;

}

// WebKit input {

-webkit-appearance: none;

}

input::-webkit-slider-runnable-track {

@include range-track;

}

input::-webkit-slider-thumb {

@include range-thumb;
-webkit-appearance: none;
background-color: $radio-fill-color;
transform-origin: 50% 50%;
margin: -5px 0 0 0;

}

input.focused:focus:not(.active)::-webkit-slider-thumb {

box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);

}

// FireFox input {

/* fix for FF unable to apply focus style bug  */
border: 1px solid white;

/*required for proper track sizing in FF*/

}

input::-moz-range-track {

@include range-track;

}

input::-moz-focus-inner {

border: 0;

}

input::-moz-range-thumb {

@include range-thumb;
margin-top: -5px;

}

// hide the outline behind the border input:-moz-focusring {

outline: 1px solid #fff;
outline-offset: -1px;

}

input.focused:focus:not(.active)::-moz-range-thumb {

box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);

}

// IE 10+ input::-ms-track {

height: $track-height;

// remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
background: transparent;

// leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;

/*remove default tick marks*/
color: transparent;

}

input::-ms-fill-lower {

background: #777;

}

input::-ms-fill-upper {

background: #ddd;

}

input::-ms-thumb {

@include range-thumb;

}

input.focused:focus:not(.active)::-ms-thumb {

box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);

}