/* See: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

:root {
    --range-slider-track-background: #d3d3d3;
    --range-slider-track-background-faded: #e3e3e3;
    --range-slider-accent-color: #23985D;
    --range-slider-thumb-gradient-start-color: rgba(227,227,227,1);
    --range-slider-thumb-gradient-end-color: rgba(255,255,255,1);
    --range-slider-thumb-gradient: linear-gradient(315deg, var(--range-slider-thumb-gradient-start-color) 0%, var(--range-slider-thumb-gradient-end-color) 60%);
}

input[type=range] {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%;
    height: 5px;
    background-color: var(--range-slider-track-background-faded);
    outline: none; /* Remove outline */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: background-color .2s;
    margin: 5px 0px;
}

input[type=range]:hover {
    background-color: var(--range-slider-track-background); /* Grey background */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    cursor: pointer; /* Cursor on hover */
    border-radius: 100px;
    border: 1px solid var(--range-slider-track-background);
    background: var(--range-slider-thumb-gradient-start-color);
    background: var(--range-slider-thumb-gradient)
}

input[type=range]::-moz-range-thumb {
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    cursor: pointer; /* Cursor on hover */
    border-radius: 100px;
    border: 1px solid var(--range-slider-track-background);
    background: var(--range-slider-thumb-gradient-start-color);
    background: var(--range-slider-thumb-gradient);
}

input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 2px var(--range-slider-accent-color);
    border-color: var(--range-slider-accent-color);
}

input[type=range]:focus::-moz-range-thumb {
    box-shadow: 0 0 2px var(--range-slider-accent-color);
    border-color: var(--range-slider-accent-color);
}