/**
 * CleanLogic – Customizer toggle switch styles
 * Scope: Customizer controls only (admin).
 */

.cleanlogic-customizer-control .cleanlogic-toggle {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
	margin-right: 10px;
}

.cleanlogic-customizer-control .cleanlogic-toggle input[type="checkbox"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
}

.cleanlogic-customizer-control .cleanlogic-switch {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background-color: #ccc;
	transition: .4s;
	border-radius: 24px;
}

.cleanlogic-customizer-control .cleanlogic-switch::before {
	content: "";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: #fff;
	transition: .4s;
	border-radius: 50%;
}

.cleanlogic-customizer-control .cleanlogic-toggle input[type="checkbox"]:checked+.cleanlogic-switch {
	background-color: #0085ba;
}

.cleanlogic-customizer-control .cleanlogic-toggle input[type="checkbox"]:checked+.cleanlogic-switch::before {
	transform: translateX(26px);
}

.cleanlogic-customizer-control .cleanlogic-control-title {
	width: 200px;
	margin-top: 15px;
}