/* ================================= */
/* CSS for control sap.m/IconTabBar  */
/* Quartz High Contrast Black theme  */
/* ================================= */

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

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

/* ==================== 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.375rem;

/* 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_Radius: var(--sapButton_BorderCornerRadius);
@_sap_m_IconTabFilter_Icon_Border_Color: var(--sapButton_BorderColor);

/* 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: none;

/* 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;

@_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight: 0.5rem;
@_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight: 0.75rem;

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

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

/* =========== Shell =========== */
@_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
@_sap_m_IconTabBar_ShellOverflowBorderColor: var(--sapButton_BorderColor);
@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: var(--sapButton_Hover_BorderColor);
@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: var(--sapButton_Active_BorderColor);


/* 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: 0.125rem solid var(--sapObjectHeader_BorderColor);
}

.sapMITBBackgroundDesignTransparent > .sapMITBContainerContent > .sapMITBContent {
	border: none;
}

.sapMITBContainerContent {

	&.sapMITBContentClosed {
		border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
	}
}

.sapMITB.sapMITBNoContentPadding > .sapMITBContainerContent, /* legacy class */
.sapMITB.sapUiNoContentPadding > .sapMITBContainerContent {
	border-bottom: 0;
	border-top: 0;
}

/* Tab Filter Item */

.sapMITBTextOnly {

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

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

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

.sapMITBSelected {

	.sapMITBContentArrow::after {
		background: var(--sapList_SelectionBorderColor);
	}

	.sapMITBFilterDefault,
	.sapMITBFilterNeutral,
	.sapMITBFilterPositive,
	.sapMITBFilterNegative,
	.sapMITBFilterCritical {
		background: var(--sapSelectedColor);
		color: var(--sapContent_ContrastIconColor);
	}
}

/* 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 var(--sapGroup_TitleBorderColor);
		margin: 0.625rem 0.125rem 0 0.125rem;
	}
}

.sapMITBAll {

	.sapMITBTab {
		margin-top: 0.4rem;
	}

	&.sapMITBHorizontal {

		.sapMITBTab {
			margin-top: 0;
		}

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

.sapMITBSepLine {
	border: unset;
	border-right: 1px solid var(--sapGroup_TitleBorderColor);
}

.sapUiMedia-Std-Phone {

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

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

	.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText {

		&::after {
			top: -0.1875rem;
			bottom: -0.1875rem;
			right: -0.1875rem;
			left: -0.1875rem;
		}
	}

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

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

	.sapMITH.sapUiSizeCompact {

		.sapMITBItem:focus.sapMITBAll {

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

/* HCB Additional Styles */

.sapMITBTab {
	position: relative;
}

.sapMITBFilter .sapMITBText::before,
.sapMITBFilter.sapMITBVertical .sapMITBTab::after,
.sapMITBSelectItem .sapMITBText::before {
	font-family: var(--sapContent_IconFontFamily);
	font-size: 0.75rem;
	margin-right: 0.5rem;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.sapMITBHorizontal.sapMITBFilterPositive .sapMITBText::before,
.sapMITBTextOnly .sapMITBFilterPositive .sapMITBText::before,
.sapMITBVertical.sapMITBFilterPositive .sapMITBTab::after,
.sapMITBSelectItem.sapMITBFilterPositive .sapMITBText::before {
	color: var(--sapPositiveTextColor);
	content: '\e1c1';
}

.sapMITBHorizontal.sapMITBFilterNegative .sapMITBText::before,
.sapMITBTextOnly .sapMITBFilterNegative .sapMITBText::before,
.sapMITBVertical.sapMITBFilterNegative .sapMITBTab::after,
.sapMITBSelectItem.sapMITBFilterNegative .sapMITBText::before {
	color: var(--sapNegativeTextColor);
	content: '\e1ec';
}

.sapMITBHorizontal.sapMITBFilterCritical .sapMITBText::before,
.sapMITBTextOnly .sapMITBFilterCritical .sapMITBText::before,
.sapMITBVertical.sapMITBFilterCritical .sapMITBTab::after,
.sapMITBSelectItem.sapMITBFilterCritical .sapMITBText::before {
	color: var(--sapCriticalTextColor);
	content: '\e053';
}

.sapMITBVertical.sapMITBFilter .sapMITBTab::after {
	bottom: 0;
	margin-right: -1rem;
	position: absolute;
}

.sapMITBTextOnly .sapMITBTab::after {
	display: none;
}

.sapMITBHorizontal.sapMITBFilter .sapMITBText::before {
	margin-right: 0.25rem;
}

/* Semantic icons in Select List */
.sapMITBSelectItem .sapMITBText::before {
	position: absolute;
	margin-left: -3.5rem;
}

.sapMITBSelectListTextOnly .sapMITBSelectItem .sapMITBText::before {
	margin-left: -1.5rem;
	margin-top: 0.0625rem;
}

.sapUiSizeCompact {

	.sapMITBSelectItem .sapMITBText::before {
		position: absolute;
		margin-left: -2.75rem;
	}

	.sapMITBSelectListTextOnly .sapMITBSelectItem .sapMITBText::before {
		margin-left: -1.5rem;
		margin-top: 0;
	}
}

/* ------------------------------------------------ */
/* IconTabBar Badge */
/* ------------------------------------------------ */

.sapMITH,
.sapMITBFilterPopover {

	.sapMBadge .sapMBadgeAttention {
		background-color: var(--sapContent_IconColor);
	}
}