$d: 3em;
$bw: .25em;
$pw: .3125em;
$bd: $d - 2*($bw + $pw + .15em);
$ad: $bd - .125em;
$alpha: .45;

html { background: #191f2f; }

[type='checkbox'] {
	position: absolute;
	margin-left: -100%;
}

label {
	&, &:before, &:after {
		box-sizing: border-box;
		position: absolute;
		top: 50%; left: 50%;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}
	
	
	border: solid .25em transparent;
	padding: $pw;
	width: $d; height: $d;
	box-shadow: inset 0 0 0 3px #12171f, 
		inset 0 0 1px 8px rgba(#1d1f2b, .56);
	background: 
		linear-gradient(#1a2238, #373944) content-box, 
		radial-gradient(rgba(#12171f, 0) 70%, #12171f 70%) padding-box,
		linear-gradient(#414859, #272d3b) padding-box, 
		radial-gradient(rgba(#808384, 0) 70%, rgba(#808384, .32) 71%) 0 -1px border-box, 
		linear-gradient(#10111b, #292c3d) border-box;
	color: #5d6474;
	font: 900 5em/#{$d - 2*($bw + $pw) + .125em} monospace;
	text-align: center;
	text-shadow: 0 -2px 1px #4b545e;
	cursor: pointer;
	
	&:before, &:after {
		z-index: -1;
		content: '';
	}
	&:before {
		width: $bd; height: $bd;
		box-shadow: 0 0 0 4px rgba(#02050a, .7);
		background: 
			linear-gradient(#c8cbd4, #383c44)
	}
	&:after {
		width: $ad; height: $ad;
		box-shadow: 0 2px 2px -1px #3a3d4b, 
			0 -2px 2px -1px #f5f4fd;
		background: 
			conic-gradient(rgba(#d5d8e1, $alpha), rgba(#666c80, $alpha) 36deg, rgba(#e6e7eb, $alpha) 75deg, rgba(grey, $alpha) 105deg, rgba(#c5c7d3, $alpha) 135deg, rgba(#898c9b, $alpha) 170deg, rgba(#d7dee8, $alpha), rgba(#787d90, $alpha) 230deg, rgba(#c6c9d2, $alpha) 280deg, rgba(#9296a3, $alpha) 310deg, rgba(#d5d8e1, $alpha)),
			repeating-radial-gradient(transparent, rgba(#6d7285, 0) 2px, rgba(#6d7285, .65) 3px, rgba(#6d7285, .65) 4px, rgba(#6d7285, 0) 5px) #cecfd6;
	}
	
	[type='checkbox']:checked + & {
		color: #e6ffff;
		text-shadow: 0 0 .125em #399fe7;
	}
}