/*---------------- ToggleSwitch ----------------*/

div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=ToggleSwitch] {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	list-style-type: none;
	flex-wrap: wrap;
	padding-inline: 5px;
	margin-block: 0px;
	min-height: 43px;
	border-radius: 5px;
	transition: all 0.3s;
	border: 1px solid var(--content-color);
	outline: 1px solid var(--border-color);
	align-items: center;
}

/*Toggle Cookieman Client*/

[ML_PageControl_Type=ToggleSwitch] {
	--cookieman-switch-background-no: var(--background-200);
	--cookieman-switch-color-toggle: var(--content-color);
	--cookieman-switch-background-yes: var(--primary);
	--cookieman-Box_ToggleTrueColor: var(--primary);
	/* ratio 2:1 width con height */
	--cookieman-switch-w: 60px;
	--cookieman-switch-h: 30px;
	--cookieman-switch-gap: 5px;
	--cookieman-switch-toggle-d: calc(var(--cookieman-switch-h) - var(--cookieman-switch-gap) * 2);
	--cookieman-switch-toggle-active-w: calc(var(--cookieman-switch-toggle-d) * 1.2);
}

	[ML_PageControl_Type=ToggleSwitch] li input {
		height: 0;
		width: 0;
		visibility: hidden;
		float: right;
	}

	[ML_PageControl_Type=ToggleSwitch] li label {
		cursor: pointer;
		/*Soluzione per adattare il toggle switch del client al admin */
		/*Il problema è che il toggle client si appoggia sulla label, e qua io sulla label vado a scrivere il nome della risorsa*/
		/*La soluzione è un po' stink*/
		padding-left: calc(var(--cookieman-switch-w));
		display: flex;
		align-items: center;
		padding-top: 2px;
		text-wrap-mode: nowrap;
		text-indent: 6px;
		position: relative;
		width: var( --cookieman-switch-w);
		height: var( --cookieman-switch-h);
		background: var( --cookieman-switch-background-no);
		border-radius: var( --cookieman-switch-w);
		transition: all .3s ease;
	}

		[ML_PageControl_Type=ToggleSwitch] li label:after {
			content: "";
			position: absolute;
			top: var(--cookieman-switch-gap);
			left: var(--cookieman-switch-gap);
			width: var(--cookieman-switch-toggle-d);
			height: var(--cookieman-switch-toggle-d);
			background: var(--cookieman-switch-color-toggle);
			border-radius: var(--cookieman-switch-toggle-d);
			transition: all .3s ease;
		}

	[ML_PageControl_Type=ToggleSwitch] li input:checked + label {
		background: var(--cookieman-Box_ToggleTrueColor);
	}

		[ML_PageControl_Type=ToggleSwitch] li input:checked + label:after {
			left: calc(100% - var(--cookieman-switch-gap));
			transform: translateX(-100%);
		}

	/* mha... */
	[ML_PageControl_Type=ToggleSwitch] li label:active:after {
		width: var(--cookieman-switch-toggle-active-w);
	}

	[ML_PageControl_Type=ToggleSwitch] li:has(input:disabled) {
		opacity: .5;
		/*cursor: not-allowed;*/
	}

		[ML_PageControl_Type=ToggleSwitch] li:has(input:disabled) * {
			/*cursor: not-allowed;*/
		}

/*CookiemanClient fine toggle*/


/*[ML_PageControl_Type=ToggleSwitch] li {*/
/*--toggle-size: 1em;
	font-size: clamp(1em, 1em, var(--toggle-size));
	position: relative;
	display: flex;
	min-height: 36px;
	min-width: calc(var(--toggle-size)* 3.5);*/
/*}*/

/*[ML_PageControl_Type=ToggleSwitch] li > span {
		display: flex;
		min-height: 36px;
		min-width: calc(var(--toggle-size)* 3.5);
	}

	[ML_PageControl_Type=ToggleSwitch] li input {
		width: unset;
		margin-left: 10px;
		cursor: inherit;
		visibility: hidden;
	}

	[ML_PageControl_Type=ToggleSwitch] li label {
		padding-left: calc(var(--toggle-size) * 3.7);
		display: flex;
		align-items: center;
		cursor: inherit;
	}

	[ML_PageControl_Type=ToggleSwitch] li input::before {
		content: " ";
		position: absolute;
		top: calc( 50% - var(--toggle-size)/2 - max( 2%, 3px));
		left: 0.6em;
		background-color: var(--secondary-300);
		transition: 0.4s;
		border-radius: 30px;
		padding-bottom: 20px;
		width: calc(var(--toggle-size) * 3.25);
		height: calc(var(--toggle-size)* 1.25);
		visibility: visible;
	}*/


/*
	[ML_PageControl_Type=ToggleSwitch] li input::after {
		position: absolute;
		content: "\002717";
		display: grid;
		text-align: center;
		vertical-align: middle;
		place-items: center;
		font-size: var(--toggle-size);
		font-weight: 900;
		width: 2em;
		aspect-ratio: 1;
		border-radius: 50%;
		top: 50%;
		transform: translate(-.5em, -50%);
		color: var(--secondary-900);
		background-color: var(--secondary-100);
		border: 1px solid var(--secondary-300);
		transition: 0.4s;
		text-indent: 0;
		cursor: inherit;
		visibility: visible;
	}

	[ML_PageControl_Type=ToggleSwitch] li input:checked::before {
		background-color: var(--primary);
	}

	[ML_PageControl_Type=ToggleSwitch] li input:checked::after {
		content: "\002713";
		color: var(--primary-600);
		background: var(--primary-100);
		border: 1px solid var(--primary-600);
		transform: translate(1.75em, -50%) rotateZ(360deg);
		text-indent: 0;
		cursor: inherit;
	}

[ML_Status=Disabled] > [ML_PageControl_Type=ToggleSwitch] li input::after {
	content: "\f08d";
	font-family: 'Font Awesome 6 Pro'
}
*/

[ML_Status=Disabled] > [ML_PageControl_Type=ToggleSwitch] li {
	/*cursor: not-allowed !important;*/
}


[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=ToggleSwitch] li {
	cursor: pointer;
}


[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ml_pagecontrol_attributes*=Mandatory] [ML_PageControl_Type=ToggleSwitch] :has(ul) {
	border-left-width: 5px;
	border-right-width: 5px;
}


[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ml_pagecontrol_attributes*=Mandatory] [ML_PageControl_Type=ToggleSwitch]:has( input[type=checkbox]:checked ) {
	border-color: var(--primary) !important;
	outline-color: var(--primary) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ml_pagecontrol_attributes*=Mandatory] [ML_PageControl_Type=ToggleSwitch]:has( input[type=checkbox]:not(:checked) ) {
	border-color: var(--error) !important;
	outline-color: var(--error) !important;
}