:root
{
	--checkbox-font-size: 16px;
	--checkbox-size: .75em;
	--checkbox-border-radius: .1875em;
	--checkbox-box-shadow-size: .0625em;
	--checkbox-border-color: rgba(0, 0, 0, .2);

	--checkbox-outline-size: .1875em;
	--checkboux-outline-color: #91c6fd;

	--checkbox-background: #fff;
	--checkbox-background-active: rgba(0, 0, 0, .1);
	--checkbox-background-checked: #3b99fc;
	--checkbox-background-checked-active: #0a7ffb;

	--checkbox-check-width: .5em;
	--checkbox-check-height: .625em;
	--checkbox-check-top-offset: .125em;
	--checkbox-check-url: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%228%22%20height%3D%2210%22%20viewBox%3D%223%203%208%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20opacity%3D%22.2%22%20d%3D%22M3.9%208.91l2.102%202.384%204.23-6.534%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20d%3D%22M3.9%207.91l2.102%202.384%204.23-6.534%22%2F%3E%3C%2Fsvg%3E';
}

.checkbox
{
	position: relative;
	font-size: var(--checkbox-font-size);
}

.checkbox__real
{
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.checkbox__fake
{
	position: relative;
	display: inline-block;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	vertical-align: middle;
	border-radius: var(--checkbox-border-radius);
	background: var(--checkbox-background);
	box-shadow: 0 0 0 var(--checkbox-box-shadow-size) var(--checkbox-border-color), /* border */
				inset 0 var(--checkbox-box-shadow-size) var(--checkbox-box-shadow-size) 0 var(--checkbox-border-color); /* top shadow */
}

.checkbox__fake::before /* used for outline */
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: var(--checkbox-border-radius);
}

.checkbox__real:focus + .checkbox__fake::before
{
	box-shadow: 0 0 0 var(--checkbox-outline-size) var(--checkboux-outline-color); /* outline */
}

.checkbox__real:checked + .checkbox__fake
{
	background-color: var(--checkbox-background-checked);
	background-image: url(var(--checkbox-check-url));
	background-repeat: no-repeat;
	background-position: center var(--checkbox-check-top-offset);
	background-size: var(--checkbox-check-width) var(--checkbox-check-height);
	box-shadow: 0 0 0 var(--checkbox-box-shadow-size) var(--checkbox-background-checked); /* border */
}

.checkbox__real:not(:checked):active + .checkbox__fake
{
	box-shadow: 0 0 0 var(--checkbox-outline-size) var(--checkboux-outline-color), /* outline */
				0 0 0 var(--checkbox-box-shadow-size) var(--checkbox-border-color), /* border */
				inset 0 0 0 var(--checkbox-box-shadow-size) var(--checkbox-border-color), /* inner border */
				inset 0 var(--checkbox-box-shadow-size) var(--checkbox-box-shadow-size) 0 var(--checkbox-border-color), /* top shadow */
				inset 0 0 var(--checkbox-size) 0 var(--checkbox-background-active); /* background as box-shadow for lightness */
}

.checkbox__real:checked:active + .checkbox__fake
{
	background-color: var(--checkbox-background-checked-active);
	box-shadow: 0 0 0 var(--checkbox-outline-size) var(--checkboux-outline-color), /* outline */
				0 0 0 var(--checkbox-box-shadow-size) var(--checkbox-background-checked-active), /* border */
				inset 0 0 0 var(--checkbox-box-shadow-size) color(var(--checkbox-background-checked-active) lightness(45%)); /* inner border */
}
