/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Fiori 3 theme                   */
/* =============================== */

.sapMCb {
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 0 0 2.75rem;
}

.sapMCbBg {
	left: 0.6875rem;
	top: 0.6875rem;
	height: 1.375rem;
	width: 1.375rem;
	line-height: 1.125rem;
	border-width: 0.0625rem;
	box-sizing: border-box;

	&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > & {
		line-height: 1.25rem;
	}
}

.sapMCb.sapMCbWarn .sapMCbBg {
	background-color: var(--sapField_WarningBackground);
	border: 0.125rem solid var(--sapField_WarningColor);

	&.sapMCbMarkChecked::before {
		color: var(--sapField_TextColor);
	}
}

.sapMCb.sapMCbSucc .sapMCbBg {
	background-color: var(--sapField_SuccessBackground);
	border: 0.0625rem solid var(--sapField_SuccessColor);

	&.sapMCbMarkChecked::before {
		color: var(--sapField_SuccessColor);
	}
}

.sapMCb.sapMCbErr .sapMCbBg {
	background-color: var(--sapField_InvalidBackground);
	border: 0.125rem solid var(--sapField_InvalidColor);

	&.sapMCbMarkChecked::before {
		color: var(--sapField_InvalidColor);
	}
}

.sapMCb.sapMCbInfo .sapMCbBg {
	background-color: var(--sapField_InformationBackground);
	border: 0.125rem solid var(--sapField_InformationColor);

	&.sapMCbMarkChecked::before {
		color: var(--sapField_InformationColor);
	}
}

.sapMCbBg.sapMCbMarkChecked::before {
	color: var(--sapSelectedColor);
}

.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
	border: 0.25rem solid transparent;
}

/* CheckBox focus */
.sapMCb:focus {
	outline: none;
}

/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
.sapUiForm {

	.sapMCbBg {
		left: 0;
	}

	.sapMCb {
		padding-left: 2.0625rem; /* to have right gap between checkbox and label */
	}
}

html.sap-desktop {

	.sapMCbBg:focus,
	.sapMCbBg:active,
	.sap-desktop .sapMCbBg.sapMCbBgDis:focus {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		outline: none;
	}

	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus > .sapMCbBg {
		outline-width: 1px;
		outline-style: dotted;
		outline-color: var(--sapContent_FocusColor);
		outline-offset: 0.0625rem;
	}

	.sapMCb:not(.sapMCbBgDis):not(.sapMCbDisplayOnly).sapMCbHasLabel {

		&:focus::before {
			content: '';
			display: block;
			position: absolute;
			top: 0.5625rem;
			bottom: 0.5625rem;
			left: 0.5625rem;
			right: -0.0625rem;
			border: 1px dotted var(--sapContent_FocusColor);
		}

		&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn):focus::before {
			bottom: 0.5625rem;
		}
	}

	.sapUiForm .sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus::before {
		left: -0.125rem;
	}
}

/* CheckBox in Footer Context */
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis):focus > .sapMCbBg,
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis) > .sapMCbBg:focus {
	outline-color: var(--sapContent_ContrastFocusColor);
}

.sapMLIBActive .sapMCbBg,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked,
.sapMLIBActive .sapMCbBg.sapMCbBgDis,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked {
	border-color: var(--sapList_Active_TextColor);
}

.sapMLIBActive .sapMCbBg {
	background-color: var(--sapList_Active_Background);
}

.sapMCbHoverable:hover {
	border-color: var(--sapField_Hover_BorderColor);
	background: var(--sapField_Hover_Background);
}

.sapMCbBgDis {
	opacity: var(--sapContent_DisabledOpacity);
}

.sapMLIBActive .sapMActive .sapMCbBg.sapMCbActiveStateOff.sapMCbMarkChecked::before,
.sapMLIBActive .sapMCbBg:active.sapMCbActiveStateOff.sapMCbMarkChecked::before,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked::before,
.sapMLIBActive .sapMActive .sapMCbBg.sapMCbMarkChecked::before,
.sapMLIBActive .sapMCbBg:active.sapMCbMarkChecked::before,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked::before {
	color: var(--sapList_Active_TextColor);
}

.sapMCbBg.sapMCbBgDis.sapMCbMarkChecked::before {
	color: fade(@sapUiSelected, 25);
}

/* Compact size */
.sapUiSizeCompact {

	.sapMCbBg {
		border-radius: 0.125rem;
	}

	/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
	.sapUiForm {

		.sapMCbBg {
			left: 0;
		}

		.sapMCb {
			padding-left: 1.5rem; /* to have right gap between checkbox and label */
		}
	}
}

html.sap-desktop {

	.sapUiSizeCompact {

		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel {

			&:focus::before {
				top: 0.365rem;
				bottom: 0.365rem;
				left: 0.365rem;
			}

			&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn):focus::before {
				bottom: 0.375rem;
			}
		}

		.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
			border-width: 0.1875rem;
		}

		.sapUiForm .sapMCb:not(.sapMCbBgDis):focus::before {
			left: -0.125rem;
		}

		.sapMCbBg {
			height: 1rem;
			width: 1rem;
			box-sizing: border-box;
		}

		.sapMCb:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > .sapMCbBg {
			line-height: 0.875rem;
		}
	}
}