pre
	span.token--sel #boo
	| 
	span.token--punc {
	br
	span.token--rule
		span.token--prop width
		span.token--punc :
		| 
		span.token--val
			span.token--len
				span.token--num 5
				span.token--unit em
		span.token--punc ;
	br
	span.token--rule
		span.token--prop height
		span.token--punc :
		| 
		span.token--val
			span.token--len
				span.token--num 5
				span.token--unit em
		span.token--punc ;
	br
	span.token--rule
		span.token--prop border
		span.token--punc :
		| 
		span.token--val
			span.token--keyw solid
			| 
			span.token--len
				span.token--num 2
				span.token--unit em
			| 
			span.token--keyw goldenrod
		span.token--punc ;
	br
	span.token--rule
		span.token--prop background
		span.token--punc :
		| 
		span.token--val
			span.token--hex #ff7a18
			| 
			span.token--keyw content-box
		span.token--punc ;
	br
	span.token--rule
		input#bi(type='checkbox')
		label(for='bi')
			span.token--prop border-image
			span.token--punc :
			| 
			span.token--val
				span.token--func conic-gradient
				span.token--punc (
				span.token--args
					span.token--arg
						span.token--hex #ff7a18
					span.token--punc ,
					span.token--arg 
						span.token--hex #af002d
				span.token--punc )
				| 
				span.token--num 1
			span.token--punc ;
	br
	span.token--rule
		input#br(type='checkbox' checked)
		label(for='br')
			span.token--prop border-radius
			span.token--punc :
			| 
			span.token--val
				span.token--perc
					span.token--num 50
					span.token--unit %
			span.token--punc ;
	br
	span.token--punc }
section
	#boo.br

$d: 1.375em;

* {
	margin: 0;
	padding: 0;
	font: inherit
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh
}

pre {
	padding: .5em;
	background: #111;
	color: #eee;
	font: 1em/ 1.75 consolas, monaco, monospace
}

label {
	position: relative;
	white-space: pre;
	text-decoration: line-through;
	cursor: pointer;
	
	&:before {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%; right: calc(100% + .5em);
		box-shadow: inset 0 0 0 2px;
		border-radius: 5px;
		width: $d; height: $d;
		transform: translatey(-50%);
		color: #b53;
		font-weight: 900;
		content: '✘'
	}
}

section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	background: #444;
}

.token {
	&--rule {
		padding-left: 2.375em;
		white-space: normal;
	}
	
	&--sel { color: #ffcd98 }
	
	&--prop { color: #dbbae5 }
	
	&--num { color: #f8f087 }
	
	&--unit { color: #f39dd4 }
	
	&--keyw { color: #b7e3c0 }
	
	&--func { color: #b8d0dd }
	
	&--hex { color: #d1ffa1 }
}

[type='checkbox'] {
	position: absolute;
	left: -100vw;
	
	&:hover, &:focus {
		+ label {
			filter: saturate(4);
			
			&:before {
				color: inherit;
				content: ''
			}
		}
	}
	
	&:checked + label {
		text-decoration: none;
		
		&:before {
			color: #4ca454;
			content: '✔'
		}
	}
}

#boo {
	border: solid 2em goldenrod;
	width: 5em;
	height: 5em;
	background: #319197 content-box;
	
	&.bi { border-image: conic-gradient(#ff7a18, #af002d) 1 }
	
	&.br { border-radius: 50% }
}

const _B = document.getElementById('boo');

addEventListener('change', e => {	
	_B.classList.toggle(e.target.id)
}, false);