.ºradio{
	position: relative;
	display: flex;
	height: var(--control-height);
	align-items: center;
	cursor: pointer;
}
	.ºradio .check{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		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: 100%;
		
		transition: 
			background-color .3s ease-in,
			border-color .3s ease-in;
	}
		.ºradio .check:before{
			content: '';
			width: 0;
			height: 0;
			background: var(--color-5);
			border-radius: 100%;
			transition: 
				all .3s ease-in;
		}
		.ºradio:hover .check{
			border-color: var(--color-5);
		}
		.ºradio:focus .check{
			border-color: var(--color-5);
			box-shadow:
				0 0 0 3px var(--control-border-hover-2);
		}
		.ºradio.checked .check{
			border-color: var(--color-5);
		}
			.ºradio.checked .check:before{
				width: calc(var(--size-3) - 8px);
				height: calc(var(--size-3) - 8px);
			}		
	.ºradio .label:not(:empty){
		display: flex;
		padding: 1px 0 0 var(--size-1);
		white-space: nowrap;
		align-items: center;
	}
	
.ºradio .check::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: 100%;
	opacity: .9;
	transition:
		all .5s ease-in-out;
}
.ºradio.checked.animate .check::after{
	visibility: visible;
	position: absolute;
	left: -12px; top: -12px; right: -12px;  bottom: -12px;
	border-width: 1px;
	opacity: .2;
}