.default {
	@media (max-width: 600px) {
		&.root {
			.label {
				position: absolute;
				top: -22px;
				left: -8px;
			}
		}
	}
	&.root {
		.label {
			font-size: 1rem;
			color: var(--mantine-color-primary-0);
		}
		.track {
			transition: all .2s ease !important;
			border: none;
			background-color: var(--mantine-color-search-0);
			border-color: var(--mantine-color-accent-0);
		}
		.thumb {
			transition: all .2s ease !important;
			border: none;
			background-color: var(--mantine-color-accent-0);
		}
		.input:checked + * > .thumb {
			transition: all .2s ease !important;
			background-color: var(--mantine-color-background-0);
		}
		.input:checked + .track {
			transition: all .2s ease !important;
			background-color: var(--mantine-color-accent-0);
		}
	}
}

.enable {
	@media (max-width: 600px) {
		&.root {
			.label {
				position: absolute;
				top: -22px;
				left: -8px;
			}
		}
	}
	&.root {
		.track {
			transition: all .2s ease !important;
			background-color: color-mix(in srgb, var(--mantine-color-primary-0), transparent 90%);
			overflow: visible;
			height: 2px;
		}
		.thumb {
			transition: all .2s ease !important;
			border: none;
			background-color: var(--mantine-color-background-0);
			height: 1.5rem;
			width: 1.5rem;
			font-size: 1rem;
			margin-left: -4px;
		}
		.input:checked + * > .thumb {
			transition: all .2s ease !important;
			background-color: var(--mantine-color-background-0);
		}
		.input:checked + .track {
			transition: all .2s ease !important;
			background-color: color-mix(in srgb, var(--mantine-color-primary-0), transparent 30%);
		}
	}
}