<form>
	<code>
		<span class='token--prop'>box-shadow</span><!--
		--><span class='token--punctuation'>:</span>
		<span class='trigger' id='trigger-0'>
			<span class='token--val'>0</span>
			<div class='popup hidden'>
				<input type='range' id='r0' class='control'
							 min='-20' value='0' max='20'/>
				<label for='r0'>x offset</label>
			</div>
		</span>
		<span class='trigger' id='trigger-1'>
			<span class='token--val'>0</span>
			<div class='popup hidden'>
				<input type='range' id='r1' class='control'
							 min='-20' value='0' max='20'/>
				<label for='r1'>y offset</label>
			</div>
		</span>
		<span class='trigger' id='trigger-2'>
			<span class='token--val'>0</span>
			<div class='popup hidden'>
				<input type='range' id='r2' class='control'
							 min='0' value='0' max='20'/>
				<label for='r2'>blur radius</label>
			</div>
		</span>
		<span class='trigger' id='trigger-3'>
			<span class='token--val'>0</span>
			<div class='popup hidden'>
				<input type='range' id='r3' class='control'
							 min='-10' value='0' max='10'/>
				<label for='r3'>spread radius</label>
			</div>
		</span>
		<span class='token--val'></span>
	</code>
</form>

<div id='boo'>boo!</div>

<form>
	<input type='checkbox' id='io'/>
	<label for='io'><code>inset</code></label>
</form>

$theme-c: #e18728;
$ctrl-bg: #262626;
$ctrl-ll: #aaa;
$ctrl-hl: $theme-c;

$pad: .5em;
$track-w: 10em;
$track-h: .25em;

$thumb-d: 1.25em;

$check-d: 1.25em;



/* ========== BASIC STYLING ========== */
html {
	height: 100%;
	background: 
		linear-gradient(rgba(#ddd, .5), rgba(#ddd, .5)), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg) #aaa;
	background-size: cover;
}



/* ========== ELEMENT ========== */
[id='boo'] {
	position: absolute;
	top: 50%; left: 50%;
	border: solid .5em rgba($ctrl-hl, .5);
	width: 5em; height: 3em;
	transform: translate(-50%, -50%);
	background: rgba(#4ca454, .65);
	color: white;
	font: 700 2em/3 comic sans ms, verdana, sans serif;
	text-align: center;
}



/* ========== FORM ========== */
/* -------- Mixins -------- */
@mixin track() {
	width: $track-w; 
	height: $track-h;
	background: $ctrl-ll;
}

@mixin fill() {
	background: $ctrl-hl;
}

@mixin thumb() {
	border: none;
	width: $thumb-d; 
	height: $thumb-d;
	border-radius: 50%;
	background: $ctrl-hl;
}


/* -------- Generic form styling -------- */
form {
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
	left: 0;
	padding: $pad 2*$pad;
	background: $ctrl-bg;
	color: $ctrl-ll;
	
	&:first-of-type { top: 0; right: 0; }
	
	&:last-of-type {
		bottom: 0;
	}
}


/* -------- Popup -------- */
.popup {
	position: absolute;
	top: 100%; left: 0;
	margin: .75em 0;
	width: $track-w;
	padding: $pad;
	background: $ctrl-bg;
	text-align: center;
	font: 1rem/1.375em trebuchet ms, sans serif;
}

.hidden { opacity: .001; pointer-events: none; }


/* -------- Code -------- */
code {
	font: 1.0625em courier, monospace;
}

span {
	display: inline-block;
	
	&:not([class*='token']) {
		position: relative;
		padding: 0 .5em;
		border-radius: 3px;
		transition: .3s;
		cursor: pointer;
		
		&:hover {
			background: $theme-c;
			color: #fff;
			text-shadow: 1px 1px 1px $ctrl-bg;
		}
	}
	
	&[class*='token'] {
		pointer-events: none;
	}
}

.highlight { box-shadow: 0 0 1px 1px $theme-c; }


/* -------- Range inputs -------- */
input[type='range'] {
	&, 
	&::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
	}
	
	display: block;
	margin: .25em auto 0;
	padding: 0;
	width: $track-w; height: 1.75em;
	background: none;
	font-size: 1em;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track {
		@include track();
	}
	&::-moz-range-track {
		@include track();
	}
	&::-ms-track {
		border: none;
		@include track();
		color: transparent;
	}
	
	&::-moz-range-progress {
		height: $track-h;
		@include fill();
	}
	&::-ms-fill-lower {
		@include fill();
	}
	
	&::-webkit-slider-thumb {
		margin-top: ($track-h - $thumb-d)/2;
		@include thumb();
	}
	&::-moz-range-thumb {
		@include thumb();
	}
	&::-ms-thumb {
		@include thumb();
	}
	
	&::-ms-tooltip { display: none; }
	
	+ label {
		display: block;
	}
		
	&:focus {
		outline: none;
		
		+ label { color: $theme-c; }
	}
}


/* -------- Checkbox -------- */
input[type='checkbox'] {
	transform: translate(-100vw);
	
	+ label {
		display: inline-block;
		position: relative;
		margin-left: -1.5*$check-d;
		padding-left: 1.5*$check-d;
		color: $ctrl-ll;
		line-height: 2;
		cursor: pointer;
		
		&:hover {
			color: mix($ctrl-ll, $ctrl-hl);
		}
		
		&:before {
			box-sizing: border-box;
			position: absolute;
			top: 50%; left: 0;
			margin: -$check-d/2 0;
			border: solid .125em $ctrl-ll;
			padding: .25em;
			width: $check-d; height: $check-d;
			color: transparent;
			font: 900 1em/.5 sans-serif;
			text-indent: -.125em;
			transition: .3s ease-out;
			pointer-events: none;
			content: '✓';
		}
	}
	
	&:focus + label {
		color: mix($ctrl-ll, $ctrl-hl);
	}
	
	&:checked + label {
		&, &:before { color: $ctrl-hl; }
	}
}

var currID = null, 
		boo = document.getElementById('boo'), 
		trigs = document.querySelectorAll('.trigger'), 
		n = trigs.length, 
		popups = document.querySelectorAll('.popup'), 
		ctrls = document.querySelectorAll('.control'), 
		css = document.querySelectorAll('.token--val'), 
		num_val = [], txt_val = [], inset = false, 
		io = document.getElementById('io');

var update = function(ctrl) {
	var idx = ~~ctrl.id.replace('r', '');
	
	if(num_val[idx] !== ~~ctrl.value) {
		num_val[idx] = ~~ctrl.value;
		txt_val[idx] = css[idx].textContent = 
			num_val[idx] + (num_val[idx] ? 'px' : '');

		boo.style.boxShadow = txt_val.join(' ');
	}
};

for(var i = 0; i < n; i++) {
	num_val.push(0);
	txt_val.push(0);
	
	ctrls[i].addEventListener('input', function(e) {
		update(this);
	}, false);
}

txt_val.push('');

addEventListener('click', function(e) {
	var target = e.target;
	
	if(!target.classList.contains('popup') && 
		 !target.classList.contains('control')) {
		if(currID || currID === 0) {
			trigs[currID].classList.remove('highlight');
			popups[currID].classList.add('hidden');
			currID = null;
		}
	}
	
	if(target.classList.contains('trigger')) {
		currID = ~~target.id.replace('trigger-', '');
		popups[currID].classList.remove('hidden');
		target.classList.add('highlight');
	}
	
	if(target.id === 'io' || 
		 target.getAttribute('for') === 'io') {
		inset = io.checked;
		
		txt_val[n] = inset ? 'inset' : '';
		css[n].textContent = txt_val[n];
		
		boo.style.boxShadow = txt_val.join(' ');
	}
}, false);