/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Horizon theme                   */
/* =============================== */

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

.sapMCbBg {
	height: 1.375rem;
	width: 1.375rem;
	top: 0.6875rem;
	left: 0.6875rem;
	box-sizing: border-box;
	border-radius: var(--sapField_BorderCornerRadius);
	background-color: var(--sapField_Background);
	border: var(--sapField_BorderWidth) var(--sapField_BorderColor) solid;
	display: flex;
    align-items: center;
    justify-content: center;
	color: var(--sapContent_Selected_ForegroundColor);

	&.sapMCbMarkChecked::before {
		font-size: 1rem;
		color: currentColor;
	}

	&.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
		border-width: 0.25rem;
	}
}

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

.sapMCbRo .sapMCbBg {
	background-color: var(--sapField_ReadOnly_Background);
	border: var(--sapElement_BorderWidth) dashed var(--sapField_ReadOnly_BorderColor);
}

.sapMCbRo > .sapMCbBg.sapMCbMarkChecked::before {
	color: var(--sapField_TextColor);
}

.sapMCb:not(.sapMCbErr):not(.sapMCbWarn):not(.sapMCbInfo):not(.sapMCbSucc):hover .sapMCbHoverable {
	border: var(--sapField_BorderWidth) solid var(--sapField_Hover_BorderColor);
	color: var(--sapContent_Selected_ForegroundColor);
	background-color: var(--sapContent_Selected_Hover_Background);
}

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

/* value state */
.sapMCbErr {

	.sapMCbBg {
		background-color: var(--sapField_InvalidBackground);
		border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
		color: var(--sapField_InvalidColor);

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

.sapMCbWarn {

	.sapMCbBg {
		background-color: var(--sapField_WarningBackground);
		border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
		color: var(--sapField_WarningColor);

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

.sapMCbInfo {

	.sapMCbBg {
		background-color: var(--sapField_InformationBackground);
		border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
		color: var(--sapField_InformationColor);

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

.sapMCbSucc {

	.sapMCbBg {
		background-color: var(--sapField_SuccessBackground);
		border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
		color: var(--sapField_SuccessColor);
	}
}

.sapMCb.sapMCbDisplayOnly:not(.sapMCbBgDis) {
	padding-left: 2.75rem;
}

.sapMCbDisplayOnly .sapMCbBg {
	top: 0.5625rem;
	left: 0.5625rem;

	&:not(.sapMCbMarkPartiallyChecked).sapMCbMarkChecked::before {
		color: var(--sapTextColor);
		font-size: 1rem;
	}

	&:not(.sapMCbMarkPartiallyChecked)::before {
		color: var(--sapTextColor);
		font-size: 1rem;
	}

	&.sapMCbMark.sapMCbMarkChecked.sapMCbMarkPartiallyChecked {
		width: 0.875rem;
		height: 0.875rem;
		border-radius: 0.0675rem;
		top: 0.9375rem;
		left: 0.9375rem;

		&::before {
			border-width: 0.125rem;
		}
	}
}

/* FOCUS */
.sapMCb {
	outline: none;
}

.sapMCb:focus::before {
	content: '';
	border: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
	inset: 0.3125rem;
	position: absolute;
	border-radius: var(--sapField_BorderCornerRadius);
}

.sapMCb.sapMCbHasLabel {
	padding-right: 0.3125rem;
}

.sapMCb.sapMCbHasLabel:focus::before {
	content: '';
	border: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
	top: 0.3125rem;
	left: 0.3125rem;
	bottom: 0.3125rem;
	right: 0;
	position: absolute;
	border-radius: 0.5rem;
}

/* 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 */
	}

	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus::before,
	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus::before {
		left: -0.25rem; /* more is not possible as this would cut off the focus border */
	}
}

.sapUiSizeCompact {

	.sapMCb {
		height: 2rem;
		padding-left: 2rem;
		line-height: 2rem;
	}

	.sapMCbBg {
		height: 1rem;
		width: 1rem;
		top: 0.5rem;
		left: 0.5rem;
		border-radius: var(--sapField_BorderCornerRadius);

		&.sapMCbMarkChecked::before {
			font-size: 0.75rem;
		}

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

	.sapMCbErr .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before,
	.sapMCbWarn .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before,
	.sapMCbInfo .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
		border-width: 0.125rem;
	}

	.sapMCbDisplayOnly .sapMCbBg:not(.sapMCbMarkPartiallyChecked) {
		margin: 0;
	}

	.sapMCbDisplayOnly .sapMCbBg.sapMCbMark.sapMCbMarkChecked.sapMCbMarkPartiallyChecked {
		top: 0.5625rem;
		left: 0.5625rem;
	}

	/* 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 */
		}

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