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

@_sap_suite_ui_microchart_InteractiveLineChart_LineColor: var(--sapHighlightColor);
@_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 {
	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: var(--sapContent_LabelColor);
}

.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 var(--sapBackgroundColor);
	background-clip: content-box;

	&.sapSuiteICSemanticColorGood, &.sapSuiteICSemanticColorCritical, &.sapSuiteICSemanticColorError {
		border: 2px solid var(--sapBackgroundColor);
		width: 0.625rem;
		height: 0.625rem;
	}

	&.sapSuiteICSemanticColorGood {
		background-color: var(--sapPositiveElementColor);
	}

	&.sapSuiteICSemanticColorError {
		background-color: var(--sapNegativeElementColor);
	}

	&.sapSuiteICSemanticColorCritical {
		background-color: var(--sapCriticalElementColor);
	}
}

.sapSuiteILCSection {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid transparent;
	outline: none;
}

.sapUiSizeCompact .sapSuiteILCSection,
.sapSuiteILCNonInteractive .sapSuiteILCSection {
	border-left-width: 0;
}

.sapSuiteILCSection:last-child {
	border-right-width: 0;
}

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

.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: var(--sapFontSmallSize);
}

.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: 0;
	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;
}

.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: var(--sapContent_LabelColor);
}

.sapSuiteILCSection.sapSuiteILCSelected .sapSuiteILCTextElement {
	color: var(--sapContent_ForegroundTextColor);
}

html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionArea:focus,
html.sap-tablet .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus,
html.sap-phone .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus {
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

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: var(--sapContent_ForegroundTextColor);
		}
	}

	.sapSuiteILCTextElement {
		color: var(--sapContent_ForegroundTextColor);
	}

	.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: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

html.sap-desktop .sapSuiteILC:focus {
	border-color: var(--sapContent_FocusColor);
}

.sapSuiteILCDivider {
	stroke: @_sap_suite_ui_microchart_InteractiveLineChart_DividerColor;
}