.switcher {
	@apply inline-flex items-center gap-2 cursor-pointer select-none;
	--switcher-bg: white;
	--switcher-color: white;
	--switcher-border: theme('colors.muted.200');
	--rounded: calc(var(--switcher-size) / 4);
}

.switcher__wrap {
	@apply relative inline-flex;
}

.switcher__input {
	@apply appearance-none transition-colors cursor-pointer;
	height: var(--switcher-size);
	width: var(--switcher-size);
	border: 1px solid var(--switcher-border);
	background: var(--switcher-bg);
	border-radius: var(--rounded);
}

.switcher.sm {
	@apply text-sm;
	--switcher-size: 16px;
}

.switcher__wrap::after {
	@apply absolute inset-0 transition-colors z-10;
	content: '';
	border-radius: var(--rounded);
}

.switcher:hover .switcher__wrap::after {
	@apply bg-black/10;
}

.switcher.checked {
	--switcher-bg: theme('colors.primary');
	--switcher-border: theme('colors.primary');
}

.swtcher.disabled {
	--switcher-bg: theme('colors.muted.200');
	--switcher-border: theme('colors.muted.200');
}

.switcher.checked.disable {
	--switcher-bg: theme('colors.muted.300');
	--switcher-border: theme('colors.muted.300');
}

.switcher-svg {
	@apply absolute z-1 text-white fill-current;
	left: 50%;
	top: 50%;
	width: calc(var(--switcher-size) - 6px);
	transform: translate(-50%, -50%);
}

.switcher.sm .switcher-svg {
	width: 12px;
}