input[type=checkbox] {
	display: none;
}

input[type=checkbox] + label {
	background-color: #fafafa;
	border: 1px solid $blue;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
    position: relative;
    cursor: pointer;
    margin-bottom: 0px;
}

input[type=checkbox][disabled]:checked + label {
    background-color: $light-grey;
    cursor: not-allowed
}
input[type=checkbox][disabled]:not(:checked) + label {
    background-color: $light-grey;
    cursor: not-allowed;
}

input[type=checkbox] + label:active, input[type=checkbox]:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type=checkbox]:checked + label {
	background-color: white;
	border: 1px solid $grey;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: $blue;
}

input[type=checkbox]:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: $blue;
}
