// ==========================================================================
// Shorthand input range styling classes
// UNUSED.
// Originally developed for job title percentage selection.
// ==========================================================================


.field-range {

	&-input {
	  @include prefixer(appearance, none, webkit);

	  &:focus {
	    outline: none;

	  	&::-webkit-slider-runnable-track {
		    background: map-get($colors, 3);
		  }
			&::-ms-fill-lower {
		    background: map-get($colors, 4);
		  }
		  &::-ms-fill-upper {
		    background: map-get($colors, 3);
		  }
		}

	  &::-webkit-slider-runnable-track {
	    width: 100%;
	    height: 4px;
	    cursor: pointer;
	    background: map-get($colors, 3);
	    border-radius: 2px;
	  }

	  &::-webkit-slider-thumb {
	    height: 12px;
	    width: 12px;
	    border-radius: 6px;
	    background: map-get($colors, 10);;
	    cursor: pointer;
	    -webkit-appearance: none;
	    margin-top: -4.5px;
	  }

	  &::-moz-range-track {
	    width: 100%;
	    height: 3px;
	    cursor: pointer;
	    background: map-get($colors, 3);
	    border-radius: 0px;
	  }

	  &::-moz-range-progress {
	    background: map-get($colors, 4);
	  }

	  &::-moz-range-thumb {
	    height: 12px;
	    width: 12px;
	    border-radius: 6px;
	    background: #000000;
	    cursor: pointer;
	  }

	  &::-ms-track {
	    width: 100%;
	    height: 3px;
	    cursor: pointer;
	    background: transparent;
	    border-color: transparent;
	    color: transparent;
	  }

	  &::-ms-thumb {
	    height: 12px;
	    width: 12px;
	    border-radius: 6px;
	    background: map-get($colors, 10);;
	    cursor: pointer;
	    height: 3px;
	  }
	}
}