$code-bg: #222;
$code-c: #ddd;

$vb-hl: crimson;

$cs-c: #777;
$guides-c: #777;
$meas-c: #222;
$poly-c: #000;
$poly-bg: #d49b00;

pre {
	padding: .5em;
	background: $code-bg;
	color: $code-c;
	tab-size: 4;
	
	[class*=values] span {
		display: inline-block;
		margin: .125em 0;
		padding: .25em .125em;
		border-radius: 3px;
		vertical-align: middle;
		transition: .35s;
		cursor: pointer;
	}
}

.values {
	&--vb {
		.hl { background: $vb-hl; }
	}
	
	&--pt {
		@for $i from 0 to 8 {
			$c: hsl($i*45, 100%, 50%);
			
			span:nth-of-type(#{$i + 1}) {
				color: lighten($c, 25%);
			}
			
			.hl:nth-of-type(#{$i + 1}) {
				background: lighten($c, 25%);
				color: #000;
			}
			
			@at-root {
				use[id*='v']:nth-of-type(#{$i + 1}) {
					fill: $c;
					stroke: rgba(lighten($c, 10%), .16);
					opacity: .65;
				}
				use.hl[id*='v']:nth-of-type(#{$i + 1}) {
					fill: darken($c, 45%);
					stroke: rgba(lighten($c, 10%), .64);
					opacity: .99;
				}
			}
		}
	}
}

.container {
	position: relative;
	margin: 0 auto;
	min-width: 20em; min-height: 20em;
	width: 80vmin; height: 80vmin;
}

svg {
	overflow: hidden; // IE
	position: absolute;
}

.adjustable {
	$r: 25/32;
	
	top: 50%; left: 50%;
	width: $r*100%; height: $r*100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

line, path {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

circle {
	vector-effect: non-scaling-stroke;
}

.cs path {
	fill: $cs-c;
	stroke: $cs-c;
}

.guides {
	fill: transparent;
	stroke: $guides-c;
	stroke-dasharray: 5;
}

.meas path {
	fill: $meas-c;
	stroke: $meas-c;
}

[id='topleft'] .hl {
	fill: $vb-hl;
}

text {
	font: 700 2em monospace;
	text-anchor: middle;
}

.label {
	use { fill: rgba($vb-hl, .01); }
	text { cursor: pointer; }
}

.hl {
	use { fill: $vb-hl; }
	text { fill: $code-c; }
}

polygon {
	&:nth-of-type(1) {
		stroke: rgba($poly-bg, .32);
		stroke-width: 20;
		stroke-miterlimit: 32;
	}

	&:nth-of-type(2) {
		stroke: $poly-c;
		stroke-dasharray: 3;
		vector-effect: non-scaling-stroke;
	}
	
	fill: transparent;
}

[id='vertices'] { pointer-events: auto; }

use[id*='v'] {
	stroke-width: 20;
	cursor: pointer;
}

/* controls */

$theme-hl: #e18728;

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

$track-w: 13em;
$track-h: .25em;

$thumb-d: 1.25em;

@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;
}

form {
	position: absolute;
	bottom: .25em; right: .25em;
	margin: .25em;
	padding: .5em;
	background: $ctrl-bg;
	color: $ctrl-ll;
	font: 1em/1.375em trebuchet ms, sans serif;
}

input[type='range'] {
	&, 
	&::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
	}
	
	display: block;
	margin: 1em auto 0;
	padding: 0;
	width: $track-w; height: 2em;
	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;
		text-align: center;
	}
		
	&:focus { outline: none; }
}