/* ================================= */
/* CSS for control sap.m/IconTabBar  */
/* Quartz Dark theme                 */
/* ================================= */

/* ========================================================================== */
/* Variables overriding */
/* ========================================================================== */

@_sap_m_IconTabBar_TextColor: var(--sapContent_LabelColor);
@_sap_m_IconTabBar_TextShadow: none;
@_sap_m_IconTab_Bar_Separator_Line: var(--sapGroup_TitleBorderColor);

/* ==================== Cozy size ==================== */

/* Content arrow */
@_sap_m_IconTabBar_ContentArrowHeight: 0.875rem;

/* Inline mode */
@_sap_m_IconTabBar_InLineFilterMargin: 0.875rem 0 0 0;
@_sap_m_IconTabBar_InLineTextOnlyVerticalHeight: 2.75rem;
@_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight: @_sap_m_IconTabBar_ContentArrowHeight;

/* TextOnly mode */
@_sap_m_IconTabBar_TextOnlyTabPadding: 0 0 0.125rem 0;
@_sap_m_IconTabBar_TextOnlyVerticalHeight: 3rem;

/* NoText mode */
@_sap_m_IconTabBar_NoTextFilterWidth: 3.125rem;
@_sap_m_IconTabBar_NoTextVerticalHeight: 3.75rem;

/* All tabs */
@_sap_m_IconTabBar_AllTabHeight: 2.875rem;
@_sap_m_IconTabBar_AllTabLineHeight: 2.875rem;
@_sap_m_IconTabBar_AllTabMarginBottom: 0.2rem;

/* Horizontal tabs */
@_sap_m_IconTabBar_HorizontalFilterHeight: 3.75rem;
@_sap_m_IconTabBar_HorizontalTabHeight: 2.75rem;
@_sap_m_IconTabBar_HorizontalWrapperHeight: 2.75rem;
@_sap_m_IconTabBar_HorizontalTabWidth: 3.125rem;
@_sap_m_IconTabBar_HorizontalCountTop: 0.375rem;
@_sap_m_IconTabBar_HorizontalTextPaddingTop: 0.375rem;
@_sap_m_IconTabBar_HorizontalTextPaddingLeft: 0.125rem;

/* Vertical tabs */
@_sap_m_IconTabBar_VerticalHeight: 4.625rem;
@_sap_m_IconTabBar_VerticalContentArrowHeight: 0.625rem;

/* Filter icon */
@_sap_m_IconTabBar_FilterIconHeight: 2.75rem;
@_sap_m_IconTabBar_FilterIconWidth: 2.75rem;
@_sap_m_IconTabFilter_Icon_Border_Color: transparent;

/* Filter text */
@_sap_m_IconTabBar_FilterTextLineHeight: 0.875rem;

/* Separator */
@_sap_m_IconTabBar_SeparatorHeight: 2rem;
@_sap_m_IconTabBar_SeparatorMargin: 0.75rem 0.25rem 0;
@_sap_m_IconTabBar_TextOnlySeparatorMargin: 0.375rem 0.25rem 0.375rem;
@_sap_m_IconTabBar_TextOnlySeparatorMarginCompact: @_sap_m_IconTabBar_TextOnlySeparatorMargin;
@_sap_m_IconTabBar_SeparatorIconHeight: 2.75rem;
@__sap_m_IconTabBar_SeparatorIconLineHeight: 2.75rem;

/* Left and Right arrows */
@_sap_m_IconTabBar_ArrowScrollPadding: 0.875rem 0.4rem;
@_sap_m_IconTabBar_SplitContainerArrowScrollPadding: 0.875rem 0.4rem;

/* Header */
@_sap_m_IconTabBar_HeaderBackgroundTranslucent: var(--sapObjectHeader_Background);

@_sap_m_IconTabBar_HeaderBorderBottom: none;
@_sap_m_IconTabBar_HeaderShadow: 0 0.25rem 0.25rem -0.25rem fade(@sapUiContentShadowColor, 15), inset 0 -0.0625rem 0 0 var(--sapObjectHeader_BorderColor);

/* Content */
@_sap_m_IconTabBar_ContentBackground: var(--sapBackgroundColor);
@_sap_m_IconTabBar_ContentBackgroundTranslucent: var(--sapGroup_ContentBackground);

/* ==================== Compact size ==================== */

/* Content arrow */
@_sap_m_IconTabBar_Compact_NoTextContentArrowHeight: 1rem;
@_sap_m_IconTabBar_Compact_ContentArrowHeight: 1rem;
@_sap_m_IconTabBar_Compact_NoTextContentArrowWidth: 2.375rem;

/* Inline mode (same as cozy) */
@_sap_m_IconTabBar_Compact_InLineVerticalTabHeight: @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight;
@_sap_m_IconTabBar_Compact_InLineFilterTextMargin: @_sap_m_IconTabBar_InLineFilterMargin;
@_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight: @_sap_m_IconTabBar_VerticalContentArrowHeight;

/* TextOnly (same as cozy) */
@_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight: @_sap_m_IconTabBar_TextOnlyVerticalHeight;
@_sap_m_IconTabBar_Compact_TextOnlyTabPadding: @_sap_m_IconTabBar_TextOnlyTabPadding;
@_sap_m_IconTabBar_Compact_TextOnlyHeadPadding: 0 0.925rem 0 0.1875rem;
@_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight: 1rem;
@_sap_m_IconTabBar_Compact_TextOnlyTextPadding: 0;

/* NoText */
@_sap_m_IconTabBar_Compact_NoTextTabWidth: 2.375rem;
@_sap_m_IconTabBar_Compact_NoTextVerticalHeight: 3rem;

/* Horizontal */
@_sap_m_IconTabBar_Compact_HorizontalHeight: 3rem;
@_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight: 1rem;

/* Vertical */
@_sap_m_IconTabBar_Compact_VerticalHeight: 3.875rem;

/* Filter text */
@_sap_m_IconTabBar_Compact_FilterTextPadding: 0.375rem 0 0;

/* Focus border */
@_sap_m_IconTabBar_Compact_HorizontalFocusBottom: 1rem;

/* =========== Phone =========== */

/* Content arrow */
@_sap_m_IconTabBar_Phone_ContentArrowHeight: 0.625rem;

/* Left and right arrows */
@_sap_m_IconTabBar_Phone_InLineArrowScrollPadding: 0.875rem 0;

/* ========================================================================== */
/* Variables */
/* ========================================================================== */

@_sap_m_IconTabBar_TextHoverColor: lighten(@sapUiGroupTitleTextColor, 10);
@_sap_m_IconTabBar_SelectedTextColor: var(--sapSelectedColor);
@_sap_m_IconTabBar_SelectedTextHoverColor: lighten(@sapUiSelected, 10);
@_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;

/* =========== Shell =========== */
@_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
@_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -3px;
@_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -3px;
@_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -2px;
@_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -2px;

/* Head Container */
.sapMITH {
	z-index: 1; /* shows the bottom shadow of the ITHeader over the content of the ITB */

	.sapMITBHead {
		padding-top: 0.875rem;
	}

	&.sapMITBNoText {

		.sapMITBHead {
			padding-top: 1rem;
		}
	}

	&.sapMITBTextOnly {

		.sapMITBHead {
			padding-top: 0.875rem;
		}
	}

	&.sapMITBInLine {

		.sapMITBHead {
			padding-top: 0;
		}
	}
}

/* Head Container - compact */

.sapUiSizeCompact.sapMITH {

	.sapMITBHead {
		padding-top: 0.875rem;
	}

	&.sapMITBTextOnly {

		.sapMITBHead {
			padding-top: 0.875rem;
		}
	}

	&.sapMITBInLine {

		.sapMITBHead {
			padding-top: 0;
		}
	}

	/* Bottom borders on the currently selected tab - compact */
	&.sapMITBTextOnly .sapMITBVertical.sapMITBFilter .sapMITBContentArrow {
		height: 0.875rem;
	}

	&.sapMITBInLine.sapMITBTextOnly .sapMITBVertical.sapMITBFilter .sapMITBContentArrow {
		height: 0.875rem;
	}

	/* Tabs - compact*/
	.sapMITBAll {

		.sapMITBTab {
			margin-bottom: 0.3rem;
			margin-top: 0.6rem;
		}

		.sapMITBContentArrow {
			height: 1rem;
		}
	}

	.sapMITBHorizontal {

		&.sapMITBFilter .sapMITBHorizontalWrapper .sapMITBText {
			padding-top: 4px;
		}

		&.sapMITBAll .sapMITBTab {
			margin-bottom: 0.125rem;
			margin-top: 0;
		}

		+ .sapMITBSepLine {
			margin-top: 0.125rem;
		}
	}
}

.sapMITBContentArrow {
	position: relative;

	/* creates border bottom with rounded top corners */
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 0.125rem 0.125rem 0 0;
	}
}

.sapMITBHorizontal.sapMITBFilter {
	margin-top: 0.125rem;

	+ .sapMITBSep {
		margin-top: 0.125rem;
	}
}

/* Content Container */

.sapMITBContent {
	border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
}

/* Tab Filter Item */

.sapMITBTextOnly {

	.sapMITBFilterDefault:hover .sapMITBText {
		color: @_sap_m_IconTabBar_TextHoverColor;
	}

	.sapMITBFilterDefault.sapMITBSelected .sapMITBText {
		color: @_sap_m_IconTabBar_SelectedTextColor;
	}

	.sapMITBFilterDefault.sapMITBSelected:hover .sapMITBText {
		color: @_sap_m_IconTabBar_SelectedTextHoverColor;
	}

	.sapMITBFilterNeutral .sapMITBText {
		color: var(--sapNeutralTextColor);
	}

	.sapMITBFilterPositive .sapMITBText {
		color: var(--sapPositiveTextColor);
	}

	.sapMITBFilterPositive:hover .sapMITBText {
		color: darken(@sapUiPositiveText, 10);
	}

	.sapMITBFilterNegative .sapMITBText {
		color: var(--sapNegativeTextColor);
	}

	.sapMITBFilterNegative:hover .sapMITBText {
		color: darken(@sapUiNegativeText, 10);
	}

	.sapMITBFilterCritical .sapMITBText {
		color: var(--sapCriticalTextColor);
	}

	.sapMITBFilterCritical:hover .sapMITBText {
		color: darken(@sapUiCriticalText, 10);
	}
}

.sapMITBFilterIcon {
	border: 1px solid var(--sapHighlightColor);
}

.sapMITBFilterDefault {
	color: var(--sapHighlightColor);
	border-color: var(--sapHighlightColor);
}

.sapMITBFilterNeutral {
	color: var(--sapNeutralElementColor);
	border-color: var(--sapNeutralElementColor);
}

.sapMITBFilterPositive {
	color: var(--sapPositiveElementColor);
	border-color: var(--sapPositiveElementColor);
}

.sapMITBFilterNegative {
	color: var(--sapNegativeElementColor);
	border-color: var(--sapNegativeElementColor);
}

.sapMITBFilterCritical {
	color: var(--sapCriticalElementColor);
	border-color: var(--sapCriticalElementColor);
}

.sapMITBSelected {

	.sapMITBContentArrow::after {
		background: @_sap_m_IconTabBar_SelectedTextColor;
	}

	&.sapMITBFilterNeutral .sapMITBContentArrow::after {
		background: var(--sapNeutralElementColor);
	}

	&.sapMITBFilterPositive .sapMITBContentArrow::after {
		background: var(--sapPositiveElementColor);
	}

	&.sapMITBFilterNegative .sapMITBContentArrow::after {
		background: var(--sapNegativeElementColor);
	}

	&.sapMITBFilterCritical .sapMITBContentArrow::after {
		background: var(--sapCriticalElementColor);
	}

	.sapMITBFilterDefault {
		background: @_sap_m_IconTabBar_SelectedTextColor;
		color: var(--sapContent_ContrastIconColor);
	}

	.sapMITBFilterNeutral {
		background: var(--sapNeutralElementColor);
		color: var(--sapGroup_ContentBackground);
	}

	.sapMITBFilterPositive {
		background: var(--sapPositiveElementColor);
		color: var(--sapGroup_ContentBackground);
	}

	.sapMITBFilterNegative {
		background: var(--sapNegativeElementColor);
		color: var(--sapGroup_ContentBackground);
	}

	.sapMITBFilterCritical {
		background: var(--sapCriticalElementColor);
		color: var(--sapGroup_ContentBackground);
	}
}

/* Phone device */

.sapUiMedia-Std-Phone .sapMITH.sapUiSizeCompact {

	&.sapMITBInLine.sapMITBTextOnly {

		.sapMITBHead .sapMITBContentArrow {
			height: 0.875rem;
		}
	}

	&.sapMITBTextOnly {

		.sapMITBHead .sapMITBContentArrow {
			height: 0.75rem;
		}
	}
}

.sapMITH.sapMITBNoText .sapMITBHead {

	> .sapMITBSepLine {
		margin: 0.25rem 0.25rem 0 0;
	}
}

.sapMITH.sapUiSizeCompact {

	&.sapMITBNoText .sapMITBHead {

		> .sapMITBSepLine {
			margin: 0 0.125rem 0 0.125rem;
		}
	}

	.sapMITBSepLine {
		border: unset;
		border-right: 1px solid @_sap_m_IconTab_Bar_Separator_Line;
		margin: 0.625rem 0.125rem 0 0.125rem;
	}
}

.sapMITBAll {

	.sapMITBTab {
		display: inline-block;
		height: 2.875rem;
		line-height: 2.875rem;
		width: auto;
		margin-top: 0.4rem;
		margin-bottom: 0.3rem;
	}

	&.sapMITBHorizontal {

		.sapMITBTab {
			margin-top: 0;
		}

		+ .sapMITBSepLine {
			margin-top: 0.5rem;
		}
	}
}

.sapMITBSepLine {
	border: unset;
	border-right: 1px solid @_sap_m_IconTab_Bar_Separator_Line;
}

.sapUiMedia-Std-Phone {

	.sapMITBSepLine {
		margin: 0.75rem 0.25rem 0;
	}
}

/* Custom focus outline */
html.sap-desktop {

	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {

		&::after {
			top: 0.75rem;
			bottom: 1.75rem;
		}
	}

	.sapMITH.sapUiSizeCompact {

		.sapMITBItem:focus.sapMITBAll {

			&::after {
				bottom: 1.3rem;
				top: 0.125rem;
			}
		}
	}

	.sapMITH {

		.sapMITHStartOverflow,
		.sapMITHEndOverflow {

			.sapMITBItem {

				&:active::after {
					/* when overflow is pressed, make the focus white */
					border-color: @_sap_m_IconTabBar_Overflow_TextColorPressed;
				}
			}
		}
	}
}