/* ================================= */
/* CSS for control sap.m/IconTabBar  */
/* Evening Horizon theme             */
/* ================================= */

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

@_sap_m_IconTabBar_TextColor: @sapTextColor;
@_sap_m_IconTabBar_TextShadow: none;
@_sap_m_IconTabBar_Separator_Font_Size:@sapFontLargeSize;
@_sap_m_IconTabBar_More_Button_Focus_Offset: -0.3125rem;
@_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.5rem;


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

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

@_sap_m_IconTabBar_HeaderBorderBottom: none;
@_sap_m_IconTabBar_HeaderShadow: @sapUiContentHeaderShadow;

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

// =========== Badge ===========
@_sap_m_IconTabBar_Badge_Neutral_Background: @sapUiNeutralElement;
@_sap_m_IconTabBar_Badge_Positive_Background: @sapUiPositiveElement;
@_sap_m_IconTabBar_Badge_Critical_Background: @sapUiCriticalElement;
@_sap_m_IconTabBar_Badge_Negative_Background: @sapUiNegativeElement;

// ==========================================================================
// Variables
// ==========================================================================

@_sap_m_IconTabBar_TextHoverColor: @sapUiContentFocusColor;
@_sap_m_IconTabBar_SelectedTextColor: @sapUiContentSelectedForegroundColor;
@_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
@_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;
@_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -4px;
@_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -4px;
@_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -3px;
@_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -3px;
@_sap_m_IconTabBar_HeaderBorderRadius: 0.25rem;
@_sap_m_IconTab_Bar_Separator_Line: @sapUiGroupTitleBorderColor;

// =========== Overflow ===========
@_sap_m_IconTabBar_Overflow_TextColor: @sapTextColor;
@_sap_m_IconTabBar_Overflow_Icon_Color: @sapTextColor;
@_sap_m_IconTabBar_Overflow_BorderColorHover: @sapUiButtonHoverBorderColor;
@_sap_m_IconTabBar_Overflow_BackgroundColorHover: @sapUiButtonHoverBackground;
@_sap_m_IconTabBar_Overflow_BoxShadowHover: none;
@_sap_m_IconTabBar_Overflow_TextColorHover: @sapTextColor;
@_sap_m_IconTabBar_Overflow_Icon_ColorHover: @sapTextColor;

@_sap_m_IconTabBar_Overflow_BackgroundColorPressed: @sapUiButtonActiveBackground;
@_sap_m_IconTabBar_Overflow_BorderColorPressed: @sapUiButtonActiveBorderColor;
@_sap_m_IconTabBar_Overflow_TextColorPressed: @sapUiButtonActiveTextColor;
@_sap_m_IconTabBar_Overflow_Icon_ColorPressed: @sapUiButtonActiveTextColor;

// =========== Shell ===========
@_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
@_sap_m_IconTabBar_ShellSelectedTextColor: @sapUiShellNavigationSelectedTextColor;


/* 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;
		}
	}
	.sapMITBDisabled {
		.sapMITHTextContent {
			color: @sapTextColor;
			font-family: @sapFontBoldFamily;
			font-size: @sapFontSize;
		}
	}

	.sapMITBSelected {
		.sapMITBContentArrow::after {
			background: @sapContent_Selected_ForegroundColor;
		}
	}

	.sapMITBFilterExpandBtnSeparator {
		border-right: 0.0625rem solid;
		margin-left: 0.625rem;
		border-color: @_sap_m_IconTabBar_TextColor;
		height: 1rem;
		margin-top: 0.875rem;
	}

	.sapMITBFilterExpandBtn:hover .sapMBtnInner {
		border-radius: 0.25rem;
	}

	//More Button
	.sapMITHStartOverflow,
	.sapMITHEndOverflow {
		.sapMITBItem {
			color: @sapButton_TextColor;
			background: @sapButton_Background;
			border: 1px solid @sapButton_BorderColor;

			.sapMITHShowSubItemsIcon {
				color: @sapUiBaseText;
			}
		}
	}

	.sapMITHEndOverflow:hover,
	.sapMITHStartOverflow:hover {
		.sapMITBItem {
			background: @sapButton_Hover_Background;
			border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorHover;
		}
	}

	.sapMITHEndOverflow,
	.sapMITHStartOverflow {
		.sapMITHShowSubItemsIcon {
			padding-left: 0.375rem;
		}
	}

	//Arrow button
	.sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapMBtnIcon  {
		color: @sapUiBaseText;
	}
}

/* Head Container - compact */

.sapUiSizeCompact.sapMITH {

	.sapMITBFilterIcon {
		line-height: 1.8rem;
	}
	.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 {
	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.25rem;
	}
}

/* Content Container */

.sapMITBContent {
	border-bottom: 0.0625rem solid @sapUiObjectHeaderBorderColor;
}

/* Tab Filter Item */

.sapMITH:not(.sapMITBTextOnly) .sapMITBHorizontal {
	.sapMBtn {
		margin-bottom: 0.9375rem;
	}
}

.sapMITH:not(.sapMITBTextOnly):not(.sapMITBNoText) .sapMITBVertical {
	.sapMBtn {
		margin-bottom: 1.875rem;
	}
}

.sapMITBNoText.sapMITH {
	.sapMBtn {
		margin-bottom: 0.9375rem;
	}
}

.sapMITBNoContentPadding .sapMITBTextOnly {
	.sapMITBFilterExpandBtnSeparator {
		margin-top: 1.125rem;
	}
	.sapMBtn {
		margin-top: 0.25rem;
	}
}

.sapMITBTextOnly {

	.sapMITBFilterDefault.sapMITBSelected {
		.sapMITBText {
			color: @sapContent_Selected_ForegroundColor;
		}
		.sapMITBFilterExpandBtnSeparator {
			border-color: @sapContent_Selected_ForegroundColor;
		}
		.sapMBtnIcon {
			color: @_sap_m_IconTabBar_SelectedTextColor !important;
		}
	}

	.sapMITBFilterNeutral {
		.sapMITBText {
			color: @sapUiNeutralText;
		}
		.sapMITBFilterWrapper:hover .sapMITBText {
			color: @sapUiNeutralText;
		}
		.sapMITBFilterExpandBtn:hover{
			.sapMBtnIcon {
				color: @sapUiNeutralText;
			}
		}
		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiNeutralText;
		}
	}

	.sapMITBFilterPositive {
		.sapMITBText {
			color: @sapUiPositiveText;
		}
		.sapMITBFilterWrapper:hover .sapMITBText {
			color: @sapUiPositiveText;
		}
		.sapMITBFilterExpandBtn:hover{
			.sapMBtnIcon {
				color: @sapUiPositiveText !important;
			}
		}
		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiPositiveText;
		}
	}

	.sapMITBFilterNegative {
		 .sapMITBText {
			color: @sapUiNegativeText;
		}
		.sapMITBFilterWrapper:hover .sapMITBText {
			color: @sapUiNegativeText;
		}
		.sapMITBFilterExpandBtn:hover{
			.sapMBtnIcon {
				color: @sapUiNegativeText;
			}
		}
		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiNegativeText;
		}
	}

	.sapMITBFilterCritical {
		.sapMITBText {
			color: @sapUiCriticalText;
		}
		.sapMITBFilterWrapper:hover .sapMITBText {
			color: @sapUiCriticalText;
		}
		.sapMITBFilterExpandBtn:hover{
			.sapMBtnIcon {
				color: @sapUiCriticalText;
			}
		}
		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiCriticalText;
		}
	}
}

.sapMITBFilterIcon {
	border: 2px solid @sapUiContentSelectedForegroundColor;
}

.sapMITBFilterDefault {
	border-color: @sapUiContentSelectedForegroundColor;
	color: @sapUiContentSelectedForegroundColor;

	.sapMITBFilterExpandBtnSeparator {
		border-color: @sapUiBaseText;
	}

	.sapMBtnIcon {
		color: @sapUiBaseText !important;
	}
}

.sapMITBFilterDefault {
	.sapMITBFilterWrapper:hover {
		.sapMITBText {
			color: @sapUiContentSelectedForegroundColor;
		}
	}

	.sapMITBFilterExpandBtn:hover {
		.sapMBtnIcon {
			color: @sapUiBaseText;
		}
	}
}

.sapMITBFilterNeutral {
	color: @sapUiNeutralElement;
	border-color: @sapUiNeutralElement;

	.sapMITBFilterExpandBtnSeparator {
		border-color: @sapUiNeutralText;
	}

	.sapMBtnIcon {
		color: @sapUiNeutralText !important;
	}
}

.sapMITBFilterPositive {
	color: @sapUiPositiveElement;
	border-color: @sapUiPositiveElement;

	.sapMITBFilterExpandBtnSeparator {
		border-color: @sapUiPositiveText;
	}

	.sapMBtnIcon {
		color: @sapUiPositiveText !important;
	}
}

.sapMITBFilterNegative:not(.sapMITBTextOnly) {
	color: @sapUiNegativeElement;
	border-color: @sapUiNegativeElement;

	.sapMITBFilterExpandBtnSeparator {
		border-color: @sapUiNegativeText;
	}

	.sapMBtnIcon {
		color: @sapUiNegativeText !important;
	}
}

.sapMITBFilterCritical {
	color: @sapUiCriticalElement;
	border-color: @sapUiCriticalElement;

	.sapMITBFilterExpandBtnSeparator {
		border-color: @sapUiCriticalText;
	}

	.sapMBtnIcon {
		color: @sapUiCriticalText !important;
	}
}
.sapMITH:not(.sapMITBTextOnly) {

	.sapMITBFilterNeutral {
		.sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiNeutralElement;
		}
		.sapMBtnIcon {
			color: @sapUiNeutralElement !important;
		}
	}

	.sapMITBFilterPositive {
		.sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiPositiveElement;
		}
		.sapMBtnIcon {
			color: @sapUiPositiveElement !important;
		}
	}

	.sapMITBFilterNegative {
		.sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiNegativeElement;
		}
		.sapMBtnIcon {
			color: @sapUiNegativeElement !important;
		}
	}
	.sapMITBFilterCritical {
		.sapMITBFilterExpandBtnSeparator {
			border-color: @sapUiCriticalElement;
		}
		.sapMBtnIcon {
			color: @sapUiCriticalElement !important;
		}
	}
}

.sapMITBSelected {

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

	&.sapMITBFilterNeutral .sapMITBContentArrow::after {
		background: @sapUiNeutralElement;
	}

	&.sapMITBFilterPositive .sapMITBContentArrow::after {
		background: @sapUiPositiveElement;
	}

	&.sapMITBFilterNegative .sapMITBContentArrow::after {
		background: @sapUiNegativeElement;
	}

	&.sapMITBFilterCritical .sapMITBContentArrow::after {
		background: @sapUiCriticalElement;
	}

	.sapMITBFilterDefault {
		background: @_sap_m_IconTabBar_SelectedTextColor;
		color: @sapUiContentContrastIconColor;
	}

	.sapMITBFilterNeutral {
		background: @sapUiNeutralElement;
		color: @sapUiContentContrastIconColor;
	}

	.sapMITBFilterPositive {
		background: @sapUiPositiveElement;
		color: @sapUiContentContrastIconColor;
	}

	.sapMITBFilterNegative {
		background: @sapUiNegativeElement;
		color: @sapUiContentContrastIconColor;
	}

	.sapMITBFilterCritical {
		background: @sapUiCriticalElement;
		color: @sapUiContentContrastIconColor;
	}
}

.sapMITHShowSubItemsIcon {
	bottom: -1.5px;
	position: relative;
}

/* 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 {
		margin-top: 0.4rem;
	}

	&.sapMITBHorizontal {
		.sapMITBTab {
			margin-top: 0;
		}
		+ .sapMITBSepLine {
			margin-top: 0.5rem;
		}
	}

	.sapMITBCount {
		font-family: @sapFontBoldFamily;
		font-size: @sapFontHeader3Size;
	}

	.sapMITBText {
		font-family: @sapFontFamily;
		font-size: @sapFontSmallSize;
	}
}

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

	.sapMITBFilter .sapMITBCount {
		color: @sapContent_LabelColor;
		font-family: @sapFontFamily;
		font-size: @sapFontSize;
	}

	.sapMITH.sapUiSizeCompact {

		.sapMITBItem:focus.sapMITBAll {
			&::after {
				bottom: 1.3rem;
				top: 0.125rem;
			}
		}

		.sapMITBItem .sapMITBFilterIcon {
			margin-right: @_sap_m_IconTabBar_HorizontalTextPaddingLeft;
		}
	}

	.sapMITHStartOverflow,
	.sapMITHEndOverflow {
		.sapMITBItem:not(.sapUiDnDDragging):focus {
			&::after {
				border-radius: 1.75rem;
			}
		}
	}

	.sapMITH {
		.sapMITHStartOverflow,
		.sapMITHEndOverflow {
			.sapMITBItem {
				&:active{
					background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorPressed;
					border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorPressed;
				}
				&:active::after {
					// when overflow is pressed, hide the focus
					border-color: transparent;
				}
			}
		}
	}
}

.sapUiMedia-Std-Tablet,
.sapUiMedia-Std-Desktop {

	.sapMITHEndOverflow {
		padding-left: 0.188rem;
		margin-left: 0px;
	}
}

html.sap-desktop {

	.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon {
		&::after {
			top: -5px;
			bottom: -5px;
			right: -5px;
			left: -5px;
			border-radius: inherit;
		}
	}
}

.sapUiMedia-Std-Phone {
	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
		&::after {
			right: 6px !important;
			left: -1px !important;
		}
	}
}

.sapMITBFilter .sapMITBText {
	font-weight: bold;
}
/* ------------------------------------------------ */
/* Shell overrides                        */
/* ------------------------------------------------ */

.sapUshellShellTabBar .sapMITH,
.sapUshellShellTabBar.sapMITH {

	//More Button
	.sapMITHStartOverflow,
	.sapMITHEndOverflow {
		.sapMITBItem {
			border: 1px solid @sapButton_BorderColor;
			color: @sapShell_Navigation_TextColor;
			background-color: @sapUiShellInteractiveBackground;

			.sapMITHShowSubItemsIcon {
				color: @sapShell_Navigation_TextColor;
			}

			&:hover {
				box-shadow: @sapContent_Interaction_Shadow;
			}
		}
	}

	.sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount,
	.sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount {
		color:  @sapUiShellNavigationSelectedColor;
	}

	.sapMITBSelected:not(sapMITBDisabled)  .sapMITBContentArrow::after {
		background: @sapUiShellNavigationSelectedColor;
	}

	.sapMITH .sapMITBFilterWithItems .sapMITBFilterExpandBtn {
		margin-left: 0.188rem;
	}

	.sapMITHStartOverflow,
	.sapMITHEndOverflow {
		.sapMITBItem {
			background-color: @sapUiShellInteractiveBackground;

			&:hover {
				background: @sapUiShellHoverBackground;
				background-color: @sapUiShellHoverBackground;
				border-color: @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
			}
		}
	}

	html.sap-desktop & {

		.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon,
		.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
		.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll,
		.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
		.sapMITHStartOverflow .sapMITBItem:not(.sapUiDnDDragging):focus,
		.sapMITHEndOverflow .sapMITBItem:not(.sapUiDndDragging):focus {
			&::after {
				border-color: @sapContent_FocusColor !important;
			}
		}
	}
}

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

.sapMITH,
.sapMITBFilterPopover {

	.sapMITBText .sapMBadgeAttention {
		right: -0.5rem;
	}

	.sapMITFExpandButtonBadge {
		left: 0.5rem;
	}
}

.sapMITH {
	.sapMITBFilterWithItems .sapMITBFilterExpandBtn {
		margin-left: -1px; // to hide the separator on hover over the button
	}
}