/*
 * PureCSS.com
 * https://purecss.com/examples/range-slider/
 * A custom-styled range input using CSS track and thumb pseudo-elements.
 */

.demo-range-slider input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		width: 220px;
		height: 6px;
		background: var(--border);
		border-radius: 999px;
		outline: none;
		cursor: pointer;
	}

:is(.demo-range-slider input[type="range"])::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 22px;
			height: 22px;
			background: var(--accent);
			border-radius: 50%;
			box-shadow: 0 1px 4px rgba(0,0,0,.35);
			transition: box-shadow .2s;
		}

:is(:is(.demo-range-slider input[type="range"])::-webkit-slider-thumb):hover {
				box-shadow: 0 1px 10px rgba(0,0,0,.5);
			}

:is(.demo-range-slider input[type="range"])::-moz-range-thumb {
			width: 22px;
			height: 22px;
			background: var(--accent);
			border: none;
			border-radius: 50%;
			box-shadow: 0 1px 4px rgba(0,0,0,.35);
		}

:is(.demo-range-slider input[type="range"])::-moz-range-track {
			background: var(--border);
			height: 6px;
			border-radius: 999px;
		}