/* ======================================================= */
/* CSS for control sap.suite.ui.microchart/AreaMicroChart  */
/* Base theme                                              */
/* ======================================================= */

.sapSuiteAMC {
	background-color: transparent;
	position: relative;
	outline: none;
	display: flex;
	align-items: center;
}

.sapSuiteAMCVerticalAlignmentContainer {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 5.875rem;
	min-height: 1.125rem;
	min-width: 4rem;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
}

.sapSuiteAMCHorizontalContainer {
	display: flex;
	width: 100%;
	height: 100%;
}

.sapSuiteAMCCanvasContainer {
	position: relative;
	height: 100%;
	width: 100%;
}

.sapSuiteAMCCanvas {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
}

/* helper classes for canvas rendering */
.sapSuiteAMCTarget {
	outline-style: dotted;
	width: 2px;
}

.sapSuiteAMCChart {
	width: 2px;
}

.sapSuiteAMCLine {
	width: 2px;
}

.sapSuiteAMCThreshold {
	width: 1px;
}

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

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

/* sizes */
.sapSuiteAMC.sapSuiteAMCSizeResponsive {
	width: 100%;
	height: 100%;
}

.sapSuiteAMC.sapSuiteAMCSizeL {
	height: 5.875rem;
	width: 12rem;
}

html.sapUiMedia-Std-Desktop .sapSuiteAMC.sapSuiteAMCSizeAuto,
html.sapUiMedia-Std-Tablet .sapSuiteAMC.sapSuiteAMCSizeAuto,
.sapSuiteAMC.sapSuiteAMCSizeM {
	height: 4.5rem;
	width: 10.5rem;
}

html.sapUiMedia-Std-Phone .sapSuiteAMC.sapSuiteAMCSizeAuto,
.sapSuiteAMC.sapSuiteAMCSizeS {
	height: 3.5rem;
	width: 8.25rem;
}

.sapSuiteAMC.sapSuiteAMCSizeXS {
	height: 1.5rem;
	width: 6rem;
}

.sapSuiteAMC.sapSuiteAMCLookM {

	.sapSuiteAMCLbl {
		font-size: var(--sapFontSmallSize);
	}
}

.sapSuiteAMC.sapSuiteAMCLookS {

	.sapSuiteAMCLbl {
		font-size: var(--sapFontSmallSize);
	}
}

.sapSuiteAMC.sapSuiteAMCLookXS {

	.sapSuiteAMCLabels,
	.sapSuiteAMCSideLabels {
		display: none;
	}
}

/* labels */
.sapSuiteAMCLabels {
	display: flex;
	flex: 0 0 auto;
}

.sapSuiteAMCSideLabels {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	justify-content: space-between;
	min-width: 1px; /* https://css-tricks.com/flexbox-truncated-text/ */
}

.sapSuiteAMCLbl {
	font-size: @sapMFontMediumSize;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sapSuiteAMCLabels .sapSuiteAMCLbl {
	flex: 1;
}

.sapSuiteAMCSideLabels.sapSuiteAMCPositionLeft {
	margin-right: 0.5rem;
}

.sapSuiteAMCSideLabels.sapSuiteAMCPositionRight {
	margin-left: 0.5rem
}

.sapSuiteAMCPositionTop {
	margin-bottom: 0.125rem;
}

.sapSuiteAMCLbl.sapSuiteAMCPositionLeft {
	text-align: start;
}

.sapSuiteAMCLbl.sapSuiteAMCPositionCenter {
	text-align: center;
}

.sapSuiteAMCLbl.sapSuiteAMCPositionRight {
	text-align: end;
}

.sapSuiteAMCWideMode {

	.sapSuiteAMCPositionLeft {
		text-align: end;
	}

	.sapSuiteAMCPositionRight {
		text-align: start;
	}

	.sapSuiteAMCCanvasContainer {
		flex: 1 0 4rem;
	}
}

.sapSuiteAMCNoLabels {

	.sapSuiteAMCLabels,
	.sapSuiteAMCSideLabels {
		display: none;
	}
}

.sapSuiteAMCNoMinMaxLabels {

	.sapSuiteAMCPositionCenter {
		display: none;
	}
}

.sapSuiteAMCNoTopLabels:not(.sapSuiteAMCWideMode) {

	.sapSuiteAMCPositionTop,
	.sapSuiteAMCPositionCenter {
		display: none;
	}
}

.sapSuiteAMCNoTopLabels.sapSuiteAMCWideMode {

	.sapSuiteAMCSideLabels .sapSuiteAMCLbl:first-child {
		visibility: hidden;
	}
}

/* colors */

.sapSuiteAMCTarget.sapSuiteAMCSemanticColorNeutral,
.sapSuiteAMCChart.sapSuiteAMCSemanticColorNeutral,
.sapSuiteAMCLine.sapSuiteAMCSemanticColorNeutral {
	color: var(--sapChart_LineColor_3);
}


.sapSuiteAMCTarget.sapSuiteAMCNeutralNoThreshold,
.sapSuiteAMCChart.sapSuiteAMCNeutralNoThreshold,
.sapSuiteAMCLine.sapSuiteAMCNeutralNoThreshold {
	color: var(--sapChart_LineColor_3);
}

.sapSuiteAMCLbl.sapSuiteAMCSemanticColorNeutral {
	color: var(--sapNeutralTextColor);
}

.sapSuiteAMCLbl.sapSuiteAMCSemanticColorGood {
	color: var(--sapPositiveTextColor);
}

.sapSuiteAMCLbl.sapSuiteAMCSemanticColorCritical {
	color: var(--sapCriticalTextColor);
}

.sapSuiteAMCLbl.sapSuiteAMCSemanticColorError {
	color: var(--sapNegativeTextColor);
}

.sapSuiteAMCThreshold {
	color: @sapUiChoroplethRegionBorder;
}

.sapSuiteAMCThreshold {
	.sapSuiteBackgroundSemanticColor(sapSuiteAMCSemanticColor)
}

.sapSuiteAMCThreshold.sapSuiteAMCSemanticColorNeutral {
	background-color: var(--sapChart_Sequence_Neutral);
}

.sapSuiteAMCTextColor {
	color: var(--sapChart_Data_TextColor);
}