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

.sapSuiteLMC {
	height: inherit;
	width: inherit;
	outline: none;
	position: relative;
	background-color: transparent;
	display: flex;
	align-items: center;
}

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

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

.sapSuiteLMCContentWrapper {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	height: 100%;
	width: 100%;
}

.sapSuiteLMCSvgCanvas {
	position: relative;
	width: 100%;
	/* margin to take up for size of the emphasized points (5.5px each side) */
	margin: 0.344rem;
}

.sapSuiteLMCNoTopLabels .sapSuiteLMCLabelsTop,
.sapSuiteLMCNoBottomLabels .sapSuiteLMCLabelsBottom,
.sapSuiteLMCNoLabels .sapSuiteLMCLabel,
.sapSuiteLMCNoLabels .sapSuiteLMCThresholdLabel,
.sapSuiteLMCNoThresholdLabel .sapSuiteLMCThresholdLabel{
	display: none;
}

.sapSuiteLMCSvgElement {
	position: absolute;
	height: 100%;
	width: 100%;
	preserveAspectRatio: none;
	overflow: visible;
	left: 0;
}

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

html[dir=rtl] {
	.sapSuiteLMCSvgElement {
		transform: scaleX(-1);
	}

	.sapSuiteLMCPointsContainer {
	  transform: scaleX(-1);
	}

	.sapSuiteLMCPoint {
	  transform: translate(50%,-50%);
	}
}

.sapSuiteLMCVerticalAlignmentContainer {
	width: 100%;
	height: 100%;
	position: relative;
	min-width: 4rem;
	max-width: 20rem;
	min-height: 1.125rem;
	max-height: 5.875rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sapSuiteLMCLeftTopLabel,
.sapSuiteLMCLeftBottomLabel {
	text-align: start;
}

.sapSuiteLMCRightTopLabel,
.sapSuiteLMCRightBottomLabel {
	text-align: end;
}

.sapSuiteLMCLabel {
	font-size: @sapMFontMediumSize;
	font-weight: normal;
	color: var(--sapChart_Data_TextColor);
	width: 50%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sapSuiteLMCThresholdLabelWrapper {
	position: relative;
	height: ~"calc(100% - 0.344rem)"; /* to compensate for the sapSuiteLMCSvgCanvas margin */
	top: 0.172rem; /* half of the margin */
	flex: 0 0 auto;
	max-width: 50%;
}

.sapSuiteLMCThresholdLabel {
	position: relative;
	border-color: @sapUiChartPaletteSemanticNeutralLight1;
	border-style: solid;
	border-width: 1px;
	color: var(--sapTextColor);
	font-size: 0.6875rem;
	line-height: 0.6875rem;
	height: 0.6875rem;
	padding: 0.1875rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sapSuiteLMCLabels {
	display: flex;
	flex: 0 0 auto;
}

.sapSuiteLMCLineThreshold {
	stroke: var(--sapChart_LineColor_3);
	stroke-width: 1px;
}

.sapSuiteLMCLine {
	stroke-width: 0.125rem;
}

.sapSuiteLMCPoint {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%,-50%);
	border-color: @sapUiChartDataPointBorderColor;
	border-width: 1px;
	border-style: solid;
	background-clip: padding-box;
	width: 0.375rem;
	height: 0.375rem;
}

.sapSuiteLMCPointEmphasized {
	width: 0.5625rem;
	height: 0.5625rem;
}

/* Point Colors */
.sapSuiteBackgroundSemanticColor(sapSuiteLMCPoint);

/* Point Type colors */
.sapSuiteLMCPointDotted {
	.sapSuiteBackgroundSemanticColor(sapSuiteLMCPoint);
}

/* Line Colors */
.sapSuiteStrokeSemanticColor(sapSuiteLMCLine);

/* Line Patterns */
.sapSuiteLMCLineDashed {
	stroke-dasharray: 5, 3;
}

.sapSuiteLMCLineDotted {
	stroke-dasharray: 0, 4;
	stroke-linecap: round;
}

/* Label Colors */
.sapSuiteLMCLabelCritical {
	color: var(--sapCriticalTextColor);
}

.sapSuiteLMCLabelGood {
	color: var(--sapPositiveTextColor);
}

.sapSuiteLMCLabelError {
	color: var(--sapNegativeTextColor);
}

/* SIZES */
.sapSuiteLMC.sapSuiteLMCSizeResponsive {
  height: 100%;
  width: 100%;
}

.sapSuiteLMC.sapSuiteLMCSizeL {
	height: 5.875rem;
	width: 12rem;
}

html.sapUiMedia-Std-Desktop .sapSuiteLMC.sapSuiteLMCSizeAuto,
html.sapUiMedia-Std-Tablet .sapSuiteLMC.sapSuiteLMCSizeAuto,
.sapSuiteLMC.sapSuiteLMCSizeM {
	height: 4.5rem;
	width: 10.5rem;
}

html.sapUiMedia-Std-Phone .sapSuiteLMC.sapSuiteLMCSizeAuto,
.sapSuiteLMC.sapSuiteLMCSizeS {
	height: 3.5rem;
	width: 8.25rem;
}

.sapSuiteLMC.sapSuiteLMCSizeXS {
	height: 1.5rem;
	width: 6rem;

	.sapSuiteLMCVerticalAlignmentContainer {
		height: initial;
	}
}

/* different possible looks that are changed base on the current height of the container */
.sapSuiteLMC.sapSuiteLMCLookM {

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

.sapSuiteLMC.sapSuiteLMCLookS {

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

.sapSuiteLMC.sapSuiteLMCLookXS {

	.sapSuiteLMCLabel,
	.sapSuiteLMCThresholdLabel {
		display: none;
	}

	.sapSuiteLMCVerticalAlignmentContainer {
		max-width: 12rem;
	}

	.sapSuiteLMCPoint {
		display: none;
	}

	.sapSuiteLMCSvgCanvas {
		margin: 0;
	}
}

/* auto-create background color class with all different semantic colors */
.sapSuiteBackgroundSemanticColor(sapSuiteLMCBackground);

/* auto-create border-color class with all different semantic colors */
.sapSuiteStrokeSemanticColor(sapSuiteLMCStroke);

.sapSuiteLMCBorderSequence1 {
	border-color: var(--sapChart_Sequence_1);
}

.sapSuiteLMCBorderSequence2 {
	border-color: var(--sapChart_Sequence_2);
}

.sapSuiteLMCBorderSequence3 {
	border-color: var(--sapChart_Sequence_3);
}

.sapSuiteLMCBorderSequence4 {
	border-color: var(--sapChart_Sequence_4);
}

.sapSuiteLMCBorderSequence5 {
	border-color: var(--sapChart_Sequence_5);
}

.sapSuiteLMCBorderSequence6 {
	border-color: var(--sapChart_Sequence_6);
}

.sapSuiteLMCBorderSequence7 {
	border-color: var(--sapChart_Sequence_7);
}

.sapSuiteLMCBorderSequence8 {
	border-color: var(--sapChart_Sequence_8);
}

.sapSuiteLMCBorderSequence9 {
	border-color: var(--sapChart_Sequence_9);
}

.sapSuiteLMCBorderSequence10 {
	border-color: var(--sapChart_Sequence_10);
}

.sapSuiteLMCBorderSequence11 {
	border-color: var(--sapChart_Sequence_11);
}

.sapSuiteLMCBorderSequence12 {
	border-color: var(--sapChart_Sequence_12);
}