label.label
	input(type="checkbox").checkbox

.label {
	// I'm sorry for using base64 image here
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJdSURBVHhe7drRbsIwEERR6P//M50qKaVJSU3wrNf2PS8gHkByrnYjhQsAAACAPlzX12+32219B53OdXs+jzirR5uz+lhfgaoICxaEBQvCggVhwYKwYEFYsCAsWBAWLAgLFoQFC8KCBWHhD9ff1k9fQVjY2pd0oi3Cwi/n5tMeYcGCsPCj1rgSwsKqYlVCWPhyXNWJP2ETFiwIC/XHlRDW7BxVCWFNzVSVEBYsCGtevnElhDUpa1VCWNh6vyohrBkdj6sqCGs67iW4IKy5xFQlhIVVxaqEsCYScGt1R1izCFuCC8KaQnBVQlizc1QlhDW+yFurO8IaXPwSXBDWyFpVJYQFC8IaVsNxJYQ1prZVCWENqHlVQliwIKzRZBhXQlhDSVKVENYsIqsSwjLS/Hi0fmoT8BPlCMtlf5mtF/74y4PHlRBWKFNb2aoSwopmnVt7TaoSwupecKmFCKuBiikkXIILwnI5vqhV2kpblRCWUUBbz7StSgirpXfasnb5PsLyMk2OzEtwQVh21Rdi/qqEsCJUbys/wgpSq60uxpUQVhYlbfVSlRBWnDcvfEdVCWGFqrUQ8yOsaOfa6mtcCWE18Gpb3VUlhJVR+U7MWZUQVhvlQZRHlgphNVOyEHtcggvCaqmkrWcyVyWE1di5PpJXJYQFC8Jq79Xxk39cCWGlUN5KF1UJYWVRUkwvVQlhJdJRN/8irG70lR1h5TLM0CKsdMZoi7Ay2rfVXW3bhwbDjOIqun6oEmxzVkwsWBAWLAgLFoQFC8KCBWHBgrBgQViwICxYEBYAAAAAzOty+QSAV8zCW56hPgAAAABJRU5ErkJggg==');
	width: 100px;
	height: 100px;
	display: inline-block;
	input[type="checkbox"] {
		display: none;
	}
}

// I'm sorry for using newer technology here... :)
body {
	background-color: #8f8f8f;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

$(document).ready(function() {
	$('.checkbox').change(function() {
		if ($(this).prop('checked')) {
			$(this).parent().css('background-position', '100px 0px');
		}
		else {
			$(this).parent().css('background-position', '0px 0px');
		}
	});
});