/* ================================== */
/* CSS for control sap.m/ColorPalette */
/* Horizon High Contrast White theme  */
/* ================================== */

.sapMColorPalette .sapMColorPaletteSquare:hover > div,
.sapMColorPalette .sapMColorPaletteSquare.sapMColorPaletteSquareSelected > div,
.sapMColorPalette .sapMColorPaletteSquare,
html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:hover > div,
html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare.sapMColorPaletteSquareSelected > div,
html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare {
	border-radius: 0.25rem;
}

.sapMColorPalette .sapMColorPaletteSquare div {
	border-radius: 0.125rem;
}

html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare {

	&:focus::before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		left: 0.125rem;
		top: 0.125rem;
		right: 0.125rem;
		bottom: 0.125rem;
		border: 0.125rem solid var(--sapButton_Lite_Background);
		pointer-events: none;
	}

	&:hover,
	&.sapMColorPaletteSquareSelected {
		border: 0;

		> div {
			border: 0.125rem solid var(--sapContent_ForegroundBorderColor);
		}
	}

	&:focus::after {
		content: '';
		position: absolute;
		box-sizing: border-box;
		left: 0.125rem;
		top: 0.125rem;
		right: 0.125rem;
		bottom: 0.125rem;
		border: 0.125rem dotted var(--sapContent_ContrastFocusColor);
		pointer-events: none;
	}
}

.sap-desktop .sapMColorPalette .sapMBtn:focus {

	&::after {
		border-width: 0.125rem;
		border-color: var(--sapContent_FocusColor);
	}
}

html:not(.sap-phone) .sapMColorPalette .sap-desktop .sapContrast,
.sap-desktop.sapContrast {

	.sapMColorPalette .sapMBtn {

		&:focus::after {
			border-color: var(--sapContent_FocusColor);

		}

		&:active,
		> .sapMBtnActive,
		&:hover > .sapMBtnActive,
		&:active > .sapMBtnActive {
			color: var(--sapList_TextColor);
		}
	}
}

.sap-phone .sapMColorPaletteSquare {

	&:active > div {
		box-shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundBorderColor);
	}
}