/*
	radio checkbox - minimalism

	we have such structure:

	label.dem__checkbox_label or label.dem__radio_label
	   └── input.dem__checkbox or input.dem__radio
	   └── input + .dem__spot

	Don't use TAG names in selectors: use `.dem__checkbox_label` but not `label.dem__checkbox_label`
*/


.dem__checkbox,
.dem__radio{ display:none !important; }

.dem__checkbox_label,
.dem__radio_label{ position: relative; box-sizing: content-box; }

.dem__checkbox_label .dem__spot { border-radius: 3px; }
.dem__radio_label .dem__spot { border-radius:50%; }

.dem__checkbox_label .dem__spot,
.dem__radio_label .dem__spot {
	position: relative;
	display: inline-block;
	vertical-align: baseline;
	width: .9em;
	height: .9em;
	margin-right: .3em;
	cursor: pointer;

	background:#fff;
	border: 1px solid #ccc;
}

.dem__checkbox_label .dem__spot:after {
	width: .9em;
	height: .32em;
	top: -.1em;
	left: .145em;
	border:.17em solid #333;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);

	background: transparent;
}
.dem__radio_label .dem__spot:after {
	width: .5em;
    height: .5em;
	border-radius:50%;
	top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);

	background: #333;
}

.dem__checkbox_label .dem__spot:after,
.dem__radio_label .dem__spot:after{
	content: '';
	position: absolute;
	opacity: 0;
}

.dem__checkbox_label:hover .dem__spot::after,
.dem__radio_label:hover .dem__spot::after {
	opacity: 0.2;
}

.dem__checkbox:checked + .dem__spot,
.dem__radio:checked + .dem__spot {
	border-color:#999;
}
.dem__checkbox:checked + .dem__spot:after,
.dem__radio:checked + .dem__spot:after {
	opacity: 1;
}
.dem__checkbox:disabled + .dem__spot,
.dem__radio:disabled + .dem__spot {
	opacity: .5;
}
.dem__checkbox:not(:checked):disabled + .dem__spot:after,
.dem__radio:not(:checked):disabled + .dem__spot:after {
	opacity:0;
}