/* ============================================================ */
/* CSS for control sap.suite.ui.microchart/InteractiveLineChart */
/* Base Theme                                                   */
/* ============================================================ */

.sapSuiteILC {
	height: 100%;
	width: 100%;
	position: relative;
	outline: none;
	z-index: 0; /* create a stacking context for the chart to have z-indices independent from the outside */
	overflow: hidden;
}

.sapSuiteILCWrapperChild {
	flex-direction: column;
	display: flex;
	height: 100%;
	width: 100%;
}

.sapSuiteILCInner {
	position: relative;
	width: 100%;
	flex-grow: 1;
}

.sapSuiteILCInnerBottom {
	height: 16px;
}

.sapSuiteILCSecondaryLabel {
	text-align: center;
	font-size: @sapMFontMediumSize;
	position: absolute;
	white-space: nowrap;

	overflow: hidden;
	color: @sapUiContentLabelColor;
}

.sapSuiteILCNonInteractive :not(.sapSuiteILCDisabledOverlay) {
	cursor: pointer;
}
.sapSuiteILCCanvasLayout {
	top: 1.9375rem; /* 31px */
	bottom: 3.9375rem; /* 63px */
}
.sapSuiteILCChartCanvas {
	width: 100%;
	position: absolute;
}

.sapSuiteILCBottomSecondText {
	max-width: 100%;
	bottom: -3.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translate(-50%, 50%);
}

.sapSuiteILCSvgElement {
	position: absolute;
	width: 100%;
	height: 100%;
}

.sapSuiteILCPoint {
	position: absolute;
	left: 50%;
	pointer-events: none;
	z-index: 1;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	transform: translate(-50%, 50%);
	border: 1px solid @sapUiGlobalBackgroundColor;
	background-clip: content-box;

	&.sapSuiteICSemanticColorGood, &.sapSuiteICSemanticColorCritical, &.sapSuiteICSemanticColorError {
		border: 2px solid @sapUiGlobalBackgroundColor;
		width: 0.625rem;
		height: 0.625rem;
	}
	&.sapSuiteICSemanticColorGood {
		background-color: @sapUiPositiveElement;
	}
	&.sapSuiteICSemanticColorError {
		background-color: @sapUiNegativeElement;
	}
	&.sapSuiteICSemanticColorCritical {
		background-color: @sapUiCriticalElement;
	}
}

.sapSuiteILCSection {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid transparent;
	outline: none;
}
.sapUiSizeCompact .sapSuiteILCSection,
.sapSuiteILCNonInteractive .sapSuiteILCSection {
	border-left-width: 0px;
}

.sapSuiteILCSection:last-child {
	border-right-width: 0px;
}
.sapSuiteILCInteractionArea, .sapSuiteILCBackgroundArea {
	bottom: -3.875rem;
	top: -2rem;
	width: 100%;
	position: absolute;
	box-sizing: border-box;
	outline: none;
}

html[data-sap-ui-browser^="ie"].sap-desktop {
	.sapSuiteILCInteractionArea, .sapSuiteILCBackgroundArea {
		top: -1.999rem;
	}
}

.sapSuiteILCBackgroundArea {
	z-index: 0;
}

html.sap-tablet .sapSuiteILC:focus,
html.sap-phone .sapSuiteILC:focus,
html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionArea:focus {
	outline: none;
}
.sapSuiteILCInteraction {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
}
.sapSuiteILCTextElement {
	position: absolute;
	left: 50%;
	font-size: @sapMFontMediumSize;
}
.sapSuiteILCSmallFont .sapSuiteILCTextElement {
	font-size: @sapMFontSmallSize;
}

.sapSuiteILCShiftBelow {
	transform: translate(-50%, 150%);
}
.sapSuiteILCShiftAbove {
	transform: translate(-50%, -50%);
}
.sapSuiteILCToplabel {
	max-width: ~"calc(100% - 2px)"; /* 1pixel left + 1pixel right */
	white-space: nowrap;
	box-sizing: border-box;
}
.sapSuiteILCBottomText {
	max-width: 100%;
	bottom: -3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translate(-50%, 50%);
}
.sapSuiteILCSelected .sapSuiteILCTextElement {
	font-weight: bold;
}
.sapSuiteILCBottomLabelArea {
	position: absolute;
	bottom: 0px;
	height: 1.875rem;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: initial;
	left: 0.125rem;
	right: 0.125rem;
}
.sapSuiteILCBottomLabelAreaNoDivider {
	border-top-style: none;
}
.sapSuiteILCDivider {
	stroke-width: 1px;
}
.sapSuiteILCNaPoint, .sapSuiteILCNaLabel {
	bottom: 1%;
}
.sapSuiteILCDisabledOverlay {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.sapSuiteILCExpandedLabels .sapSuiteILCBottomText {
	visibility: hidden;
	transform: translateY(50%);
}
.sapSuiteILCExpandedLabels .sapSuiteILCSection:first-child .sapSuiteILCBottomText, .sapSuiteILCExpandedLabels .sapSuiteILCSection:last-child .sapSuiteILCBottomText {
	visibility: inherit;
	max-width: none;
}
.sapSuiteILCExpandedLabels .sapSuiteILCSection:last-child .sapSuiteILCBottomText {
	text-align: right;
	left: auto;
	z-index: -1;
	right: 0.125rem;
}
.sapSuiteILCExpandedLabels .sapSuiteILCSection:first-child .sapSuiteILCBottomText {
	text-align: left;
	left: 0.125rem;
	z-index: -1;
	right: auto;
}

@_sap_suite_ui_microchart_InteractiveLineChart_LineColor:						@sapUiHighlight	;
@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBackground:			fade(@sapUiHighlight, 20);
@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBorder:				fade(@sapUiHighlight, 60);
@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedBackground:		fade(@sapUiBrand, 20);
@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedHoverBackground:	fade(@sapUiBrand, 40);
@_sap_suite_ui_microchart_InteractiveLineChart_BottomLabelBorderColor:			@sapUiChartDataLineColor;
@_sap_suite_ui_microchart_InteractiveLineChart_DividerColor:					@sapUiChartDataLineColor;
@_sap_suite_ui_microchart_InteractiveLineChart_SelectedPointBorder:				fade(@sapUiHighlight, 20);
@_sap_suite_ui_microchart_InteractiveLineChart_HoverPointBorder:				fade(@sapUiHighlight, 20);
@_sap_suite_ui_microchart_InteractiveLineChart_SelectedHoverPointBorder:		fade(@sapUiHighlight, 40);

.sapSuiteILC {
	border: 1px dotted transparent;
}

.sapSuiteILCSvgElement {
	stroke: @_sap_suite_ui_microchart_InteractiveLineChart_LineColor;
}

.sapSuiteILCPoint {
	&.sapSuiteILCSelected {
		border-color: @_sap_suite_ui_microchart_InteractiveLineChart_SelectedPointBorder;
	}

	&:not(.sapSuiteICSemanticColorGood):not(.sapSuiteICSemanticColorCritical):not(.sapSuiteICSemanticColorError) {
		background-color: @_sap_suite_ui_microchart_InteractiveLineChart_LineColor;
	}
}

.sapSuiteILCTextElement {
	color: @sapUiContentLabelColor;
}

.sapSuiteILCSection.sapSuiteILCSelected .sapSuiteILCTextElement {
	color: @sapUiContentForegroundTextColor;
}

html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionArea:focus,
html.sap-tablet .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus,
html.sap-phone .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus {
	border: 1px dotted transparent;
}

html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCSection:hover {
	.sapSuiteILCBackgroundArea {
		background-color: @_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBackground;
		border: 1px solid @_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBorder;

		.sapSuiteILCTextElement {
			color: @sapUiContentForegroundTextColor;
		}
	}
	.sapSuiteILCTextElement {
		color: @sapUiContentForegroundTextColor;
	}

	.sapSuiteILCPoint {
		border-color: @_sap_suite_ui_microchart_InteractiveLineChart_HoverPointBorder;

		&.sapSuiteILCSelected {
			border-color: @_sap_suite_ui_microchart_InteractiveLineChart_SelectedHoverPointBorder;
		}
	}
}



.sapSuiteILCSection.sapSuiteILCSelected .sapSuiteILCBackgroundArea {
	background-color: @_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedBackground;
}

html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCSection.sapSuiteILCSelected:hover .sapSuiteILCBackgroundArea {
	background-color: @_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedHoverBackground;
}

.sapSuiteILCBottomLabelArea {
	border-top-color: @_sap_suite_ui_microchart_InteractiveLineChart_BottomLabelBorderColor;
}

html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus {
	border: 1px dotted @sapUiContentFocusColor;
}

html.sap-desktop .sapSuiteILC:focus {
	border-color: @sapUiContentFocusColor;
}

.sapSuiteILCDivider {
	stroke: @_sap_suite_ui_microchart_InteractiveLineChart_DividerColor;
}