/* ========================================================== */
/* CSS for control sap.suite.ui.commons/ImageEditorContainer  */
/* Base theme                                                 */
/* ========================================================== */

.sapSuiteUiCommonsImageEditorContainer {
	width: 100%;
	height: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column;

	&:focus{
		outline: 1px dotted var(--sapContent_FocusColor);
		outline-offset: 1px;
	}
}

.sapSuiteUiCommonsImageEditorContainerHeaderToolbar {
	flex: 0 0 auto;
}

.sapSuiteUiCommonsImageEditorContainerMobileToolbar {
	flex: 0 0 auto;
	display: none;
}

.sapSuiteUiCommonsImageEditorContainerMobileSlider {
	display: none;
}

.sapSuiteUiCommonsImageEditorContainerContent {
	display: flex;
	flex: 1 1 auto;
	min-height: 1px; /* fix for problems with height propagation to min-height property */
}

.sapSuiteUiCommonsImageEditorContainerPanel {
	flex: 0 0 16.25rem;
	overflow: auto;
	background-color: var(--sapPageFooter_Background);

	.sapSuiteUiCommonsImageEditorContainerPanelArea {
		padding: 0.5rem 0.75rem 0.5rem 0.75rem;
	}
}

.sapUiMedia-Std-Phone {

	.sapSuiteUiCommonsImageEditorContainerContent {
		flex-direction: column;
	}

	.sapSuiteUiCommonsImageEditorContainerWrapper {
		order: 0;
	}

	.sapSuiteUiCommonsImageEditorContainerWrapper {
		min-height: 1px;
	}

	.sapSuiteUiCommonsImageEditorContainerPanel {
		order: 1;
		flex: 0 0 auto;
	}

	.sapSuiteUiCommonsImageEditorContainerGridList > ul {
		flex-wrap: nowrap;
		overflow: auto;
	}

	.sapSuiteUiCommonsImageEditorContainerGridItem {
		width: 5.5rem;
		flex: 0 0 auto;
	}

	.sapSuiteUiCommonsImageEditorContainerGridItem > .sapMLIBContent {
		height: 5rem;
	}

	.sapSuiteUiCommonsImageEditorContainerGridItemHeaderContent.sapSuiteUiCommonsImageEditorContainerGridItemHeaderFilterContent {
		height: 2.5rem;
	}

	.sapSuiteUiCommonsImageEditorContainerMobileToolbar {
		display: flex;
	}

	.sapSuiteUiCommonsImageEditorContainerMobileSlider {
		display: inline-block;
	}

	.sapSuiteUiCommonsImageEditorContainerPanelArea, .sapSuiteUiCommonsImageEditorContainerHeaderToolbar {
		display: none;
	}

	.sapSuiteUiCommonsImageEditorContainerPanelArea.sapSuiteUiCommonsImageEditorContainerPanelAreaMobile {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorContainerFilterIcons {
	font-family: var(--sapContent_IconFontFamily);

	.sapMITBText {
		font-size: var(--sapFontLargeSize);
	}
}

/* grid list */
.sapSuiteUiCommonsImageEditorContainerGridList > ul {
	display: flex;
	flex-wrap: wrap;
}

/* change z-index to show whole outline when the items are in focus */
.sapSuiteUiCommonsImageEditorContainerGridList .sapMLIBFocusable:focus {
	z-index: 1;
}

.sapSuiteUiCommonsImageEditorContainerTabBar {

	/* override default padding of the icon tab bar */
	.sapMITBContent {
		padding: 0;
		border-bottom: 0;
	}

	.sapMITH {
		border-bottom: 0;
	}
}

.sapSuiteUiCommonsImageEditorContainerGridItem {
	width: 50%;
}

.sapSuiteUiCommonsImageEditorContainerGridItem > .sapMLIBContent {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	height: 6.25rem;
	padding: 0.5rem;
	box-shadow: 0 0 0 1px var(--sapList_BorderColor);
}

.sapSuiteUiCommonsImageEditorContainerGridItemIcon {
	flex: 1 1 auto;
}

.sapSuiteUiCommonsImageEditorContainerGridItemHeaderContent {
	width: 100%;
	height: 3.125rem; /* absolute height, because 100% causes problems in some browsers */
	fill: var(--sapButton_Background);
	stroke: var(--sapButton_BorderColor);
	stroke-width: 1.001; /* decimal number to force rendering even with crispEdges turned on */

	&.sapSuiteUiCommonsImageEditorContainerGridItemHeaderFilterContent {
		height: 3.625rem;
	}

	rect {
		vector-effect: non-scaling-stroke; /* prevents stroke from scaling because of the viewBox */
		shape-rendering: crispEdges;
	}

	ellipse {
		vector-effect: non-scaling-stroke;
	}
}

.sapSuiteUiCommonsImageEditorContainerGridItemLabel {
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSmallSize);
	color: var(--sapTextColor);
	margin-top: 0.75rem;
}

&.sapSuiteUiCommonsImageEditorContainerGridItemSelected {
	background-color: var(--sapList_SelectionBackgroundColor);
	box-shadow: 0 0 0 1px var(--sapList_SelectionBackgroundColor);
}

.sapSuiteUiCommonsImageEditorContainerWrapper {
	display: flex;
	flex: 1 1 auto;
	min-height: 100%;
	padding: 1rem;
	min-width: 1px;
	background-color: var(--sapContent_ForegroundColor);
	box-sizing: border-box;
}