/* =================================== */
/* CSS for control sap.m/ColorPalette  */
/* Base theme                          */
/* ==================================== */

.sapMColorPalette {
	--_sap_m_ColorPalette_SwatchesPerRow: 5;
	--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy: 0.6875rem;
	--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCozy: 0.3125rem;
	--_sap_m_ColorPalette_SwatchWidthHitAreaCozy: 2.375rem;
	--_sap_m_ColorPalette_SwatchWidthCozy: 1.75rem;
	--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact: 0.8125rem;
	--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCompact: 0.1875rem;
	--_sap_m_ColorPalette_SwatchWidthHitAreaCompact: 1.625rem;
	--_sap_m_ColorPalette_SwatchWidthCompact: 1.25rem;
	--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightPhone: 0.625rem;
	--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomPhone: 0.375rem;
	--_sap_m_ColorPalette_SwatchMaxWidthPhone: 4.5rem;
	--_sap_m_ColorPalette_SwatchMarginPhone: 0.375rem;
	--_sap_m_ColorPalette_SwatchWidthPhone: 20%;
	--_sap_m_ColorPalette_SwatchSelectedMarginPhone: 0.0625rem;
}

.sapMColorPalette {
	height: 100%;
	/* overstyling the button to more like a menu item */
	.sapMBtnText {
		text-align: left;
	}

	.sapMBtn {
		/* Remove paddings and border of the inner element, so we defined them at root level */
		.sapMBtnInner {
			border: none;
			position: static; /* used to show the left and right border of the outline when focused */
			background-color: inherit;

			&.sapMBtnText {
				padding: 0 0 0 1rem;
			}
		}
		/* Define paddings, margins and border at root level */
		margin: 0;
		padding: 0;
		border: none;

		/* Remove hover & active styling of the inner button element */
		> .sapMBtnActive,
		&:hover > .sapMBtnActive,
		&:active > .sapMBtnActive {
			color: inherit;
			background: inherit;
		}

		.sapMBtnTransparent {
			color: inherit;
		}

		&:hover > .sapMBtnTransparent.sapMBtnHoverable {
			background-color: inherit;
		}

		/* define active & hover on the root button level */
		&:not(active) {
			color: var(--sapButton_TextColor);
			text-shadow: none;
		}

		/* active */
		&:active:not(:hover) {
			background-color: var(--sapButton_Background);
			color: var(--sapButton_TextColor);
			text-shadow: none;
		}

		&:active > .sapMBtnInner {
			text-shadow: none;
		}

		&:active {
			background-color: var(--sapButton_Lite_Active_Background);
			color: var(--sapButton_Active_TextColor);
		}

		/* hover */
		&:hover:not(:active) {
			background: var(--sapButton_Lite_Hover_Background);
		}

		&:focus {

			> .sapMFocusable { /* The focus should go at the outside container */

				.sap-desktop & {
					outline: none;
					outline-offset: 0;

					.sapMBtnFocusDiv { /* Button has special focus handling for IE, so remove it as well */
						box-sizing: inherit;
						position: inherit;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						border-radius: 0;
						border: none;
						pointer-events: none;
					}
				}

				.sap-desktop .sapContrast &,
				.sap-desktop .sapContrastPlus & {
					outline: none;
					outline-offset: 0;
				}
			}

			.sap-desktop & {

				&::after {
					content: ' ';
					position: absolute;
					box-sizing: border-box;
					left: 2px;
					top: 2px;
					right: 2px;
					bottom: 2px;
					border-radius: 0;
					border: 0.0625rem dotted var(--sapContent_FocusColor);
					pointer-events: none;
				}
			}
		}
	}

	.sapMColorPaletteContent .sapMRecentColorSquareDisabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.sapMColorPaletteSeparator {
		position: relative;
		height: 0.0625rem;

		/* overstyling the hr to look like menu separator line */
		> hr {
			display: inline-block;
			position: absolute;
			margin: 0;
			left: 0;
			right: 0;
			border-width: 0;
			border-top: 1px solid var(--sapToolbar_SeparatorColor);
			color: var(--sapToolbar_SeparatorColor);
		}
	}

	:focus {
		outline: none;
	}

	.sapMColorPaletteSquare:focus {
		outline: none
	}
}

html:not(.sap-phone) {

	/* Dimension and paddings of the Palette */
	.sapMColorPalette {
		max-width: ~'calc(var(--_sap_m_ColorPalette_SwatchesPerRow) * var(--_sap_m_ColorPalette_SwatchWidthHitAreaCozy) + 2 * var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy))';
		min-width: ~'calc(var(--_sap_m_ColorPalette_SwatchesPerRow) * var(--_sap_m_ColorPalette_SwatchWidthHitAreaCozy) + 2 * var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy))';

		.sapMColorPaletteContent {
			padding: var(--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCozy) var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy);
		}
	}

	&.sapUiSizeCompact .sapMColorPalette,
	& .sapUiSizeCompact .sapMColorPalette {
		max-width: ~'calc(var(--_sap_m_ColorPalette_SwatchesPerRow) * var(--_sap_m_ColorPalette_SwatchWidthHitAreaCompact) + 2 * var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact))';
		min-width: ~'calc(var(--_sap_m_ColorPalette_SwatchesPerRow) * var(--_sap_m_ColorPalette_SwatchWidthHitAreaCompact) + 2 * var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact))';

		.sapMColorPaletteContent {
			padding: var(--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCompact) var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact);
		}
	}

	.sapMColorPalette {

		.sapMBtnInner {
			border-radius: 0.25rem 0.25rem 0 0;
		}

		.sapMColorPaletteSquare {
			box-sizing: border-box;
			position: relative;
			border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
			border-radius: 0.125rem;
			width: var(--_sap_m_ColorPalette_SwatchWidthCozy);
			height: var(--_sap_m_ColorPalette_SwatchWidthCozy);
			display: inline-block;
			margin: ~'calc((var(--_sap_m_ColorPalette_SwatchWidthHitAreaCozy) - var(--_sap_m_ColorPalette_SwatchWidthCozy)) / 2)';

			&:hover,
			&.sapMColorPaletteSquareSelected { /* now the hit area (margin) gets occupied by the content */
				margin: 0;
				width: var(--_sap_m_ColorPalette_SwatchWidthHitAreaCozy);
				height: var(--_sap_m_ColorPalette_SwatchWidthHitAreaCozy);

				> div {
					border: 1px solid var(--sapGroup_ContentBackground);
				}
			}

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

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

			> div {
				box-sizing: border-box;
			}
		}
	}

	&.sapUiSizeCompact .sapMColorPalette,
	& .sapUiSizeCompact .sapMColorPalette {

		.sapMColorPaletteSquare {
			width: var(--_sap_m_ColorPalette_SwatchWidthCompact);
			height: var(--_sap_m_ColorPalette_SwatchWidthCompact);
			display: inline-block;
			margin: ~'calc((var(--_sap_m_ColorPalette_SwatchWidthHitAreaCompact) - var(--_sap_m_ColorPalette_SwatchWidthCompact)) / 2)';

			&:hover,
			&.sapMColorPaletteSquareSelected {
				margin: 0;
				width: var(--_sap_m_ColorPalette_SwatchWidthHitAreaCompact);
				height: var(--_sap_m_ColorPalette_SwatchWidthHitAreaCompact);
			}
		}
	}

	.sapMColorPaletteContent {
		display: flex;
		flex-wrap: wrap;
	}

	.sapMColorPaletteSquare {

		& > div {
			height: 100%;
			width: 100%;
		}
	}
}

.sap-phone {

	.sapMColorPalette {

		&html:not(.sap-phone) .sapMBtnInner {
			border-radius: 0.25rem 0.25rem 0 0;
		}
	}

	.sapMColorPaletteContent {
		display: flex;
		flex-wrap: wrap;
		padding: var(--_sap_m_ColorPalette_SwatchContainerPaddingTopBottomPhone) var(--_sap_m_ColorPalette_SwatchContainerPaddingLeftRightPhone);
		max-width: 22.5rem;
		margin: auto;
	}

	.sapMColorPaletteContainer .sapMDialogScroll {
		height: 100%;

		.sapMDialogScrollCont.sapMDialogStretchContent {
			padding: 0;
		}
	}

	.sapMColorPaletteSquare {
		width: var(--_sap_m_ColorPalette_SwatchWidthPhone);
		max-width: var(--_sap_m_ColorPalette_SwatchMaxWidthPhone);
		position: relative;
		aspect-ratio: 1 / 1;

		& > div {
			border: 1px solid var(--sapContent_ForegroundBorderColor);
			border-radius: 0.125rem;
			position: absolute;
			top: var(--_sap_m_ColorPalette_SwatchMarginPhone);
			bottom: var(--_sap_m_ColorPalette_SwatchMarginPhone);
			left: var(--_sap_m_ColorPalette_SwatchMarginPhone);
			right: var(--_sap_m_ColorPalette_SwatchMarginPhone);
			aspect-ratio: 1 / 1;
		}

		&:active > div {
			box-shadow: inset 0 0 0 1px var(--sapGroup_ContentBackground);
			top: -0.0625rem;
			bottom: -0.0625rem;
			left: -0.0625rem;
			right: -0.0625rem;
		}

		&.sapMColorPaletteSquareSelected {
			width: ~'calc(var(--_sap_m_ColorPalette_SwatchWidthPhone) + 0.625rem)';
			aspect-ratio: 1 / 1;

			& > div {
				aspect-ratio: 1 / 1;
				box-shadow: inset 0 0 0 1px var(--sapGroup_ContentBackground);
				top: var(--_sap_m_ColorPalette_SwatchSelectedMarginPhone);
				bottom: var(--_sap_m_ColorPalette_SwatchSelectedMarginPhone);
				left: var(--_sap_m_ColorPalette_SwatchSelectedMarginPhone);
				right: var(--_sap_m_ColorPalette_SwatchSelectedMarginPhone);
			}
		}
	}
}

@media (orientation: landscape) {

	.sap-phone {

		.sapMColorPaletteContent {
			max-width: initial;
		}
	}
}

html.sap-desktop .sapMDialog.CPDialog {
	min-width: 18rem; /* override the  Dialog's min-width for desktop */

	.sapUiColorPicker-ColorPickerMatrix {

		&.sapUiRespGrid.sapUiRespGridHSpace1 {
			padding-bottom: 0.5rem;
		}

		/* in a dialog ColorPicker doesn't have padding-top in order to be as compact as possible */
		&.sapUnifiedColorPicker.sapUiRespGrid.sapUiRespGridHSpace1 > div:first-child {
			height: auto;
			padding-top: 0;
		}
	}
}

html.sap-phone .sapMColorPalette .sapMBtn:focus-visible {

	> .sapMFocusable {
		outline: none;
		outline-offset: 0;

		.sapMBtnFocusDiv {
			box-sizing: inherit;
			position: inherit;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			border-radius: 0;
			border: none;
			pointer-events: none;
		}
	}

	&::after {
		content: ' ';
		position: absolute;
		box-sizing: border-box;
		left: 2px;
		top: 2px;
		right: 2px;
		bottom: 2px;
		border-radius: 0;
		border: 0.0625rem dotted var(--sapContent_FocusColor);
		pointer-events: none;
	}
}

html.sap-phone .sapMColorPalette .sapMColorPaletteSquare:focus-visible:not(.sapMColorPaletteSquareSelected)::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0.1875rem;
	top: 0.1875rem;
	right: 0.1875rem;
	bottom: 0.1875rem;
	border: 1px solid var(--sapContent_FocusColor);
	pointer-events: none;
}

html.sap-phone .sapMColorPalette .sapMColorPaletteSquare:focus-visible:not(.sapMColorPaletteSquareSelected)::after {
	content: '';
	position: absolute;
	box-sizing: border-box;
	left: 0.1875rem;
	top: 0.1875rem;
	right: 0.1875rem;
	bottom: 0.1875rem;
	border: 1px dotted var(--sapContent_ContrastFocusColor);
	pointer-events: none;
}