/* ============================================================== */
/* CSS for control sap.suite.ui.microcharts/StackedBarMicroChart  */
/* Base theme                                                     */
/* ============================================================== */

.sapSuiteStackedMC {
	font-size: var(--sapFontSmallSize);
	outline: none;
	display: flex;
	align-items: center;

	.sapSuiteStackedMCContainer {
		display: flex;
		align-items: center;
		position: relative;
		height: 100%;
		width: 100%;
		min-width: 2rem;
		max-width: 20rem;
		height:fit-content;
		max-height: 3.5rem;
		border: 1px solid var(--sapGroup_ContentBackground);
		outline: 1px solid var(--sapContent_ForegroundBorderColor);
		min-height: 1.125rem;
	}

	.sapSuiteStackedMCBar {
		position: relative;
		height: 1rem;
		-moz-box-sizing: border-box;
		min-width: 0.25rem;

		&:not(:last-child) {
			border-right: 1px solid @sapUiChartDataPointBGBorderColor;
		}
		&.sapSuiteStackedMCBarZeroValue {
			background-color: var(--sapChart_Neutral) !important;
		}
	}
}

html.sap-desktop .sapSuiteStackedMC:focus:not([tabindex]),
.sapSuiteStackedMC:focus:not([tabindex]) {
	outline: none;
}

.sapSuiteStackedMCBarLabel {
	text-align: center;
	vertical-align: middle;
	margin-left: 3px;
	margin-right: 3px;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1rem;

	&.sapSuiteStackedMCBarLabelHidden {
		display: none;
	}
}

.sapSuiteStackedMC.sapSuiteStackedMCSizeL {
	width: 12rem;
	height: 5.875rem;
}

html.sapUiMedia-Std-Desktop .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
html.sapUiMedia-Std-Tablet .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
.sapSuiteStackedMC.sapSuiteStackedMCSizeM {
	width: 10.5rem;
	height: 3.5rem;
}

html.sapUiMedia-Std-Phone .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
.sapSuiteStackedMC.sapSuiteStackedMCSizeS{
	width: 8.25rem;
	height: 3.5rem;
}

.sapSuiteStackedMC.sapSuiteStackedMCSizeXS {
	width: 6rem;
	height: 1.5rem;
	justify-content: center;

	.sapSuiteStackedMCContainer {

		.sapSuiteStackedMCBar {
			height: 1.125rem;
		}
	}
}

.sapSuiteStackedMC.sapSuiteStackedMCSizeXS:focus {
	&::after {
		content: '';
		position: absolute;
		inset: 0;
	}
}

.sapSuiteStackedMC.sapSuiteStackedMCSizeResponsive {
	width: 100%;
	height: 100%;
}

.sapSuiteStackedMCSmallLook {

	.sapSuiteStackedMCBar {
		height: 0.75rem;
	}

	.sapSuiteStackedMCBarLabel {
		display: none;
	}
}

html.sap-desktop .sapSuiteStackedMC:focus {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: 1px;
}

.sapSuiteBackgroundSemanticColor(sapSuiteStackedMCBarSemanticColor);

.sapSuiteChartTextSemanticColor(sapSuiteStackedMCBarLabel);