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

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

@_sap_m_IconTabBar_TextColor: @sapUiContentLabelColor;
@_sap_m_IconTabBar_TextShadow: none;
@_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -1px;
@_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -1px;
@_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -1px;
@_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -1px;
@_sap_m_IconTabBar_More_Button_Border_Radius: 0px;

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

// Content arrow
@_sap_m_IconTabBar_ContentArrowBorderWidth: 0.313rem;
@_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;

// 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: @sapUiObjectHeaderBackground;

@_sap_m_IconTabBar_HeaderBorderBottom: none;
@_sap_m_IconTabBar_HeaderShadow: none;

// Content
@_sap_m_IconTabBar_ContentBackground: @sapUiBaseBG;
@_sap_m_IconTabBar_ContentBackgroundTranslucent: @sapUiGroupContentBackground;

// ==================== 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: @sapUiContentLabelColor;
@_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
@_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;

// =========== Shell ===========
@_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
@_sap_m_IconTabBar_ShellContentArrowHeight: 0.313rem;
@_sap_m_IconTabBar_ShellOverflowBorderColor: @sapUiButtonBorderColor;
@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: @sapUiButtonHoverBorderColor;
@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: @sapUiButtonActiveBorderColor;

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

.sapMITBTextOnly .sapMITBFilter .sapMITHShowSubItemsIcon {
	line-height: 0.75rem;
}

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

	.sapMITBTextOnly .sapMITBFilter .sapMITBText {
		line-height: 0.75rem;
	}
}

.sapMITBContentArrow {
	border-bottom: none;
	position: relative;

	// creates border bottom with rounded top corners
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: @_sap_m_IconTabBar_ContentArrowBorderWidth;
		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 @sapUiObjectHeaderBorderColor;
}

.sapMITBContainerContent {
	&.sapMITBContentClosed {
		border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
	}
}

.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 @sapUiGroupTitleTextColor;
}

.sapMITBFilterDefault {
	color: @sapUiContentContrastIconColor;
}

.sapMITBSelected {

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

	.sapMITBFilterDefault,
	.sapMITBFilterNeutral,
	.sapMITBFilterPositive,
	.sapMITBFilterNegative,
	.sapMITBFilterCritical {
		background: @sapUiSelected;
		color: @sapUiContentContrastIconColor;
	}
}

/* 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 @sapUiGroupTitleBorderColor;
		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 @sapUiGroupTitleBorderColor;
}

.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: 'SAP-icons';
	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: @sapPositiveTextColor;
	content: "\e1c1";
}

.sapMITBHorizontal.sapMITBFilterNegative .sapMITBText:before,
.sapMITBTextOnly .sapMITBFilterNegative .sapMITBText:before,
.sapMITBVertical.sapMITBFilterNegative .sapMITBTab:after,
.sapMITBSelectItem.sapMITBFilterNegative .sapMITBText:before {
	color: @sapNegativeTextColor;
	content: "\e1ec";
}

.sapMITBHorizontal.sapMITBFilterCritical .sapMITBText:before,
.sapMITBTextOnly .sapMITBFilterCritical .sapMITBText:before,
.sapMITBVertical.sapMITBFilterCritical .sapMITBTab:after,
.sapMITBSelectItem.sapMITBFilterCritical .sapMITBText:before {
	color: @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: @sapUiContentIconColor;
	}
}