.label {
	@apply inline-flex select-none text-muted items-center cursor-pointer;
}

.label.disabled {
	@apply opacity-40 pointer-events-none;
}

.input {
	@apply invisible absolute pointer-events-none;
}

.bg {
	@apply w-8 h-3.5 rounded-full transition-colors relative;
}

.glider {
	top: -3px;
	@apply absolute w-5 h-5 rounded-full shadow-md inline-flex items-center justify-center transition-transform;
}

.glider::before {
	content: '';
	@apply rounded-full bg-transparent absolute inset-0 transform-gpu transition-transform;
}

.label:hover .glider::before {
	@apply bg-muted opacity-10;
	--tw-scale-x: 1.8;
	--tw-scale-y: 1.8;
	transform: var(--tw-transform);
}

.label.active:hover .glider::before {
	@apply bg-accent;
}

.label :global(.icon) {
	width: 12px;
	height: 12px;
	@apply text-black;
}

.label.active :global(.icon) {
	@apply text-white;
}

.label.active .bg {
	@apply bg-opacity-50;
}

.label.active .glider {
	@apply translate-x-3;
}