/*---------------- RadioButtonList ----------------*/

[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] {
	width: 100%;
	border-collapse: separate !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style-type: none;
	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);
	background-color: var(--trasparent);
}

/*evidenzio la entity su over e focus*/
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container]:not([ML_PageControl_Attributes*=NotEditable]) [ML_PageControl_Type=RadioButtonList]:where(:focus, :hover) {
	border-color: var(--primary);
	outline-color: var(--primary);
}

	/*evidenzio la label dell'entity su hover e focus*/
	[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container]:not([ML_PageControl_Attributes*=NotEditable]) [ML_PageControl_Type=RadioButtonList]:where(:focus, :hover) ~ span {
		color: var(--primary);
		outline-color: var(--primary);
		cursor: text;
	}

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

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory]:has([ML_PageControl_Type=RadioButtonList]) span:has(~[ML_PageControl_Type=RadioButtonList]:not(input:checked)) {
	color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory]:has([ML_PageControl_Type=RadioButtonList]) span:has(~[ML_PageControl_Type=RadioButtonList] input:checked) {
	color: var(--primary) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList]:has(input[type=radio]:checked) {
	outline-color: var(--primary);
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li:hover {
	background-color: var(--primary-50);
	transition: background-color 0.3s ease-in-out;
}

[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li {
	margin: 9px 2px 2px 2px;
	/*	min-width: 160px;*/
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 30px;
	padding-inline: 5px;
	border-radius: 4px;
	cursor: pointer;
}


	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li input[type=radio] + label {
		color: var(--text-500);
	}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li:has(input[type=radio]:checked) {
		border: 1px solid var(--primary);
		background-color: var(--primary-200);
		border: 0px;
	}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li input[type=radio]:checked + label {
		color: var(--primary);
	}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li input[type=radio] {
		padding: 0;
		border: 0;
		outline: 0;
		width: auto;
		height: auto;
		cursor: inherit;
		accent-color: var(--primary);
		display: none;
	}

		[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li input[type=radio] + label {
			margin: 2px;
			padding: 2px 8px;
			-moz-transition: all 0.3s;
			-o-transition: all 0.3s;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}

			[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li input[type=radio] + label:has( > svg:only-child ) {
				padding: 0px;
				display: inline-flex;
			}

div[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] input[type=radio] + label {
	cursor: pointer;
}

[ML_PageContainer_Status=READONLY] div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=RadioButtonList] li:has(input:not(:checked)) {
	display: none;
}