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

.sapSuiteHBMC {
	outline: none;
	position: relative;
	display: flex;
	align-items: center;
}

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

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

.sapSuiteHBMCVerticalAlignmentContainer {
	width: 100%;
	height: 100%;
	position: relative;
	min-width: 4rem;
	max-width: 20rem;
	min-height: 1.125rem;
	max-height: 5.875rem;
	display: flex;
	align-items: center;
}

.sapSuiteHBMCChart {
	height: 100%;
	flex: 0 0 auto;
}

.sapSuiteHBMCChart .sapSuiteHBMCChartSvg {
	height: 100%;
	width: auto;
}

.sapSuiteHBMC .sapSuiteHBMCTextContainer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	padding-left: 4%;
}

.sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignLeft {
	justify-content: flex-start;
}

.sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignCenter {
	justify-content: center;
}

.sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignRight {
	justify-content: flex-end;
}

.sapSuiteHBMC .sapSuiteHBMCTextContainerHide {
	display: none;
}

.sapSuiteHBMC:focus:not([tabindex]) {
	outline: none;
}

.sapSuiteHBMC.sapSuiteHBMCSizeResponsive {
	height: 100%;
	width: 100%;
}

.sapSuiteHBMC .sapSuiteHBMCValueContainer {
	font-weight: bold;
}

.sapSuiteHBMC.sapSuiteHBMCSizeL {
	height: 5.875rem;
	width: 12rem;
}

html.sap-desktop .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
html.sap-tablet .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
.sapSuiteHBMC.sapSuiteHBMCSizeM {
	height: 4.5rem;
	width: 10.5rem;
}

.sapSuiteHBMC.sapSuiteHBMCLookL,
.sapSuiteHBMC.sapSuiteHBMCLookM {

	& .sapSuiteHBMCValueContainer {
		font-size: 1.25rem;
		line-height: 1.25rem;
		padding-bottom: 0.34375rem;
		font-family: var(--sapFontHeaderFamily);
	}

	& .sapSuiteHBMCTotalContainer {
		font-size: 1rem;
		line-height: 1rem;
		padding-top: 0.34375rem;
	}
}

html.sap-phone .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
.sapSuiteHBMC.sapSuiteHBMCSizeS {
	height: 3.5rem;
	width: 8.25rem;
}

.sapSuiteHBMC.sapSuiteHBMCLookS {

	& .sapSuiteHBMCValueContainer {
		font-size: 1rem;
		line-height: 1rem;
		padding-bottom: 0.28125rem;
		font-family: var(--sapFontFamily);
	}

	& .sapSuiteHBMCTotalContainer {
		font-size: 0.875rem;
		line-height: 0.875rem;
		padding-top: 0.28125rem;
	}
}

.sapSuiteHBMC.sapSuiteHBMCSizeXS {
	height: 1.5rem;
	width: 6rem;
}

.sapSuiteHBMC.sapSuiteHBMCLookXS {

	& .sapSuiteHBMCBackgroundCircle {
		visibility: hidden;
	}

	& .sapSuiteHBMCSegment {
		stroke: none;
	}

	& .sapSuiteHBMCValueContainer {
		font-size: 0.875rem;
		line-height: 0.875rem;
		font-family: var(--sapFontFamily);
	}

	& .sapSuiteHBMCTotalContainer {
		display: none;
	}
}

.sapSuiteHBMCValue,
.sapSuiteHBMCValueScale,
.sapSuiteHBMCTotal,
.sapSuiteHBMCTotalScale {
	white-space: normal;
	word-wrap: break-word;
}

html[dir=ltr] .sapSuiteHBMCTotalScale,
html[dir=ltr] .sapSuiteHBMCValueScale {
	margin-left: 0.2rem;
}

html[dir=rtl] .sapSuiteHBMCTotalScale,
html[dir=rtl] .sapSuiteHBMCValueScale {
	margin-right: 0.2rem;
}

/* Containers CSS */
.sapSuiteHBMCValueContainer {
	flex: 0 1 auto;
	color: var(--sapTile_TextColor)
}

.sapSuiteHBMCTotalContainer {
	flex: 0 1 auto;
	color: var(--sapChart_Data_TextColor);
}

.sapSuiteHBMCSegment {
	stroke-width: 0.125rem;
}

.sapSuiteHBMCBackgroundCircle {
	fill: var(--sapContent_ForegroundColor);
	stroke: var(--sapContent_ForegroundBorderColor);
}

.sapSuiteHBMCSemanticColorNeutral {

	&.sapSuiteHBMCValueContainer {
		color: var(--sapNeutralTextColor);
	}

	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
		color: var(--sapNeutralTextColor);
	}

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorNeutral;
	}
}

.sapSuiteHBMCSemanticColorGood {

	&.sapSuiteHBMCValueContainer {
		color: var(--sapPositiveTextColor);
	}

	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
		color: var(--sapPositiveTextColor);
	}

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorGood;
	}
}

.sapSuiteHBMCSemanticColorCritical {

	&.sapSuiteHBMCValueContainer {
		color: var(--sapCriticalTextColor);
	}

	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
		color: var(--sapCriticalTextColor);
	}

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorCritical;
	}
}

.sapSuiteHBMCSemanticColorError {

	&.sapSuiteHBMCValueContainer {
		color: var(--sapNegativeTextColor);
	}

	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
		color: var(--sapNegativeTextColor);
	}

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorError;
	}
}

.sapSuiteHBMCSemanticColorSequence1 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence1;
	}
}

.sapSuiteHBMCSemanticColorSequence2 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence2;
	}
}

.sapSuiteHBMCSemanticColorSequence3 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence3;
	}
}

.sapSuiteHBMCSemanticColorSequence4 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence4;
	}
}

.sapSuiteHBMCSemanticColorSequence5 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence5;
	}
}

.sapSuiteHBMCSemanticColorSequence6 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence6;
	}
}

.sapSuiteHBMCSemanticColorSequence7 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence7;
	}
}

.sapSuiteHBMCSemanticColorSequence8 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence8;
	}
}

.sapSuiteHBMCSemanticColorSequence9 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence9;
	}
}

.sapSuiteHBMCSemanticColorSequence10 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence10;
	}
}

.sapSuiteHBMCSemanticColorSequence11 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence11;
	}
}

.sapSuiteHBMCSemanticColorSequence12 {

	&.sapSuiteHBMCSegment {
		fill: @sapSuiteMCSemanticColorSequence12;
	}
}