.ºcheckbox{
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--size-3) - 2px) auto;
	height: var(--control-height);
	align-items: center;
	cursor: pointer;
}
	.ºcheckbox .check{
		position: relative;
		width: calc(var(--size-3) - 2px);
		height: calc(var(--size-3) - 2px);
		background: var(--color-12);
		border: 1px solid var(--control-border-color);
		border-radius: var(--control-border-radius);

		transition: 
			background-color .3s ease-in,
			border-color .3s ease-in;
	}
		.ºcheckbox:hover .check{
			border-color: var(--color-5);
		}
		.ºcheckbox.checked .check{
			background: var(--color-5);
			border-color: var(--color-5);
		}
			.ºcheckbox.checked .check:before{
				content: '\f00c';
				position: absolute;
				margin: -1px 0 0 2px;
				color: var(--color-12);
				font-family: "Font Awesome 6 Pro";
				font-size: 12px;
				font-weight: 900;
				line-height: 16px;
			}
		.ºcheckbox.partial .check{
			border-color: var(--color-5);
		}
			.ºcheckbox.partial .check:before{
				content: '';
				position: absolute;
				top: 2px;
				left: 2px;
				bottom: 2px;
				right: 2px;
				background: var(--color-5);
				border-radius: var(--control-border-radius);
			}
		.ºcheckbox:focus .check{
			border-color: var(--color-5);
			box-shadow:
				0 0 0 3px var(--control-border-hover-2);
		}

		
	.ºcheckbox .label:not(:empty){
		display: flex;
		padding: 1px 0 0 var(--size-1);
		white-space: nowrap;
		align-items: center;
	}
	
.ºcheckbox .check.checked:after{
	content: '';
	visibility: hidden;
	left: 0; top: 0; right: 0;  bottom: 0;
	background: var(--control-border-hover);	
	box-shadow: inset 0 0 2px var(--color-3);
	border-radius: var(--control-border-radius-2);	
	opacity: .9;
	transition:
		all .5s ease-in-out;
}
.ºcheckbox.checked.animate .check:after{
	visibility: visible;
	position: absolute;
	left: -12px; top: -12px; right: -12px;  bottom: -12px;
	border-width: 1px;
	opacity: .2;
}


.ºcontrol.disabled .ºcheckbox.partial .check:before,
.ºcontrol.disabled .ºcheckbox.checked .check{
	background: var(--color-text-3);
}
.ºcontrol.disabled .ºcheckbox .check{
	border: 1px solid var(--control-border-color);
}