@openui5/themelib_sap_belize 1.124.1 → 1.125.0

package/src/sap/m/themes/sap_belize_base/IconTabBar.less

@@ -0,0 +1,1667 @@
+/* ================================= */
+/* CSS for control sap.m/IconTabBar  */
+/* Base theme                        */
+/* ================================= */
+
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+@_sap_m_IconTabBar_TextColor: @sapUiGroupTitleTextColor;
+@_sap_m_IconTabBar_TextShadow: @sapUiShadowText;
+@_sap_m_IconTabBar_DisabledOpacity: @sapUiContentDisabledOpacity;
+@_sap_m_IconTabBar_Separator_Icon: @sapUiContentNonInteractiveIconColor;
+@_sap_m_IconTabBar_Separator_Font_Size: 1rem;
+@_sap_m_IconTabBar_More_Button_Focus_Offset: 0.125rem;
+@_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.375rem;
+@_sap_m_IconTabBar_More_Button_Border_Radius: inherit;
+@_sap_m_IconTabBar_HeaderMinHeight: 2.75rem;
+@_sap_m_IconTabBar_TextHoverColor: @sapUiContentSelectedForegroundColor;
+
+// ==================== Cozy size ====================
+
+// Content arrow
+@_sap_m_IconTabBar_ContentArrowBorderWidth: 0.125rem;
+@_sap_m_IconTabBar_ContentArrowHeight: 0.625rem;
+
+// Inline mode
+@_sap_m_IconTabBar_InLineFilterMargin: 1rem 0 0.1875rem 0;
+@_sap_m_IconTabBar_InLineTextOnlyVerticalHeight: 3rem;
+@_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight: 0.8125rem;
+
+// TextOnly mode
+@_sap_m_IconTabBar_TextOnlyTabPadding: 0.5625rem 0 0.3125rem 0;
+@_sap_m_IconTabBar_TextOnlyVerticalHeight: 3.5rem;
+
+// NoText mode
+@_sap_m_IconTabBar_NoTextFilterWidth: 3rem;
+@_sap_m_IconTabBar_NoTextVerticalHeight: 4rem;
+@_sap_m_IconTabBar_NoTextVerticalContentArrowHeight: 1rem;
+
+// All tabs
+@_sap_m_IconTabBar_AllTabHeight: 3rem;
+@_sap_m_IconTabBar_AllTabLineHeight: 3rem;
+@_sap_m_IconTabBar_AllTabMarginBottom: 1rem;
+
+// Horizontal tabs
+@_sap_m_IconTabBar_HorizontalFilterHeight: 4rem;
+@_sap_m_IconTabBar_HorizontalTabHeight: 3rem;
+@_sap_m_IconTabBar_HorizontalWrapperHeight: 3rem;
+@_sap_m_IconTabBar_HorizontalTabWidth: 3rem;
+@_sap_m_IconTabBar_HorizontalCountTop: 0.4375rem;
+@_sap_m_IconTabBar_HorizontalTextPaddingTop: 0.625rem;
+@_sap_m_IconTabBar_HorizontalTextPaddingLeft: 0.25rem;
+
+// Vertical tabs
+@_sap_m_IconTabBar_VerticalHeight: 5rem;
+@_sap_m_IconTabBar_VerticalContentArrowHeight: 0.6875rem;
+
+// Filter icon
+@_sap_m_IconTabBar_FilterIconHeight: 3rem;
+@_sap_m_IconTabBar_FilterIconWidth: 3rem;
+@_sap_m_IconTabFilter_Icon_Border_Radius: 0.25rem;
+@_sap_m_IconTabFilter_Icon_Border_Color: transparent;
+
+// Filter text
+@_sap_m_IconTabBar_FilterTextLineHeight: 0.9375rem;
+
+// Separator
+@_sap_m_IconTabBar_SeparatorHeight: 3rem;
+@_sap_m_IconTabBar_SeparatorMargin: 0 0.25rem;
+@_sap_m_IconTabBar_TextOnlySeparatorMargin: 0.375rem 0.25rem 0.375rem;
+@_sap_m_IconTabBar_TextOnlySeparatorMarginCompact: @_sap_m_IconTabBar_SeparatorMargin;
+@_sap_m_IconTabBar_SeparatorIconHeight: 3rem;
+@__sap_m_IconTabBar_SeparatorIconLineHeight: 3rem;
+
+// Header
+@_sap_m_IconTabBar_HeaderBackground: @sapUiObjectHeaderBackground;
+@_sap_m_IconTabBar_HeaderBackgroundTranslucent: fade(@sapUiObjectHeaderBackground, 60);
+
+@_sap_m_IconTabBar_HeaderBorderBottom: 0.125rem solid @sapUiObjectHeaderBackground;
+@_sap_m_IconTabBar_HeaderShadow: @sapUiShadowHeader;
+
+// Content
+@_sap_m_IconTabBar_ContentBackground: @sapUiGroupContentBackground;
+@_sap_m_IconTabBar_ContentBackgroundTranslucent: fade(@sapUiGroupContentBackground, 60);
+
+// ==================== Compact size ====================
+
+// Content arrow
+@_sap_m_IconTabBar_Compact_NoTextContentArrowHeight: 0.625rem;
+@_sap_m_IconTabBar_Compact_ContentArrowHeight: 0.75rem;
+@_sap_m_IconTabBar_Compact_NoTextContentArrowWidth: 2rem;
+
+// Inline mode
+@_sap_m_IconTabBar_Compact_InLineVerticalTabHeight: 2rem;
+@_sap_m_IconTabBar_Compact_InLineFilterTextMargin: 0 0 0.25rem 0;
+@_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight: 0.5rem;
+
+// TextOnly
+@_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight: 2.75rem;
+@_sap_m_IconTabBar_Compact_TextOnlyTabPadding: 0;
+@_sap_m_IconTabBar_Compact_TextOnlyHeadPadding: 0.25rem 0 0 0.1875rem;
+@_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight: 0.875rem;
+@_sap_m_IconTabBar_Compact_TextOnlyTextPadding: 0.25rem 0 0;
+
+// NoText
+@_sap_m_IconTabBar_Compact_NoTextTabWidth: 2rem;
+@_sap_m_IconTabBar_Compact_NoTextVerticalHeight: 2.625rem;
+
+// Horizontal
+@_sap_m_IconTabBar_Compact_HorizontalHeight: 2.75rem;
+@_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight: 0.75rem;
+
+// Vertical tabs
+@_sap_m_IconTabBar_Compact_VerticalHeight: 3.625rem;
+
+// Filter text
+@_sap_m_IconTabBar_Compact_FilterTextPadding: 0.25rem 0 0;
+
+// Focus border
+@_sap_m_IconTabBar_Compact_HorizontalFocusBottom: 0;
+
+// ========== Overflow =========
+@_sap_m_IconTabBar_Overflow_BorderRadius: 0.75rem;
+@_sap_m_IconTabBar_Overflow_BackgroundColor: @sapUiButtonBackground;
+@_sap_m_IconTabBar_Overflow_Border: 1px solid @sapUiButtonBorderColor;
+
+@_sap_m_IconTabBar_Overflow_TextColor: @sapUiButtonTextColor;
+@_sap_m_IconTabBar_Overflow_Icon_Color: @sapUiButtonIconColor;
+
+@_sap_m_IconTabBar_Overflow_BorderColorHover: @sapUiButtonHoverBorderColor;
+@_sap_m_IconTabBar_Overflow_BackgroundColorHover: @sapUiButtonHoverBackground;
+@_sap_m_IconTabBar_Overflow_TextColorHover: @sapUiButtonHoverTextColor;
+@_sap_m_IconTabBar_Overflow_Icon_ColorHover: @sapUiButtonHoverTextColor;
+@_sap_m_IconTabBar_Overflow_BoxShadowHover: none;
+
+@_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;
+
+// =========== Phone ===========
+
+@_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight: 0.5rem;
+@_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight: @_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight;
+
+// =========== Shell ===========
+@_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
+@_sap_m_IconTabBar_ShellContentArrowHeight: 0.1875rem;
+@_sap_m_IconTabBar_ShellTextColor: @sapUiShellNavigationTextColor;
+@_sap_m_IconTabBar_ShellSelectedTextColor: @sapUiShellNavigationSelectedTextColor;
+@_sap_m_IconTabBar_ShellButtonOutlineColor: contrast(@sapUiShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapUiContentContrastTextThreshold);
+@_sap_m_IconTabBar_ShellOverflowBorderColor: transparent;
+@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: transparent;
+@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: @sapUiShellNavigationActiveBackground;
+@_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -1px;
+@_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -1px;
+@_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -1px;
+@_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -1px;
+@_sap_m_IconTabBar_HeaderBorderRadius: 0px;
+@_sap_m_IconTabBar_Filter_Expand_Shell_BackgroundColor_Hover: @sapUiShellHoverBackground;
+@_sap_m_IconTabBar_Filter_Expand_Shell_BorderColor_Hover: transparent;
+
+// ========== Badge ============
+@_sap_m_IconTabBar_FilterExpandButtonBadgeTop: 1.125rem;
+@_sap_m_IconTabBar_Compact_FilterExpandButtonBadgeTop: 1.125rem;
+@_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;
+
+/* ------------------------------------------------ */
+/* IconTabBar main class                            */
+/* ------------------------------------------------ */
+
+.sapMITB {
+	position: relative;
+	width: 100%;
+
+	&.sapMITBNoContentPadding > .sapMITBContainerContent > .sapMITBContent {
+		padding: 0;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar tab class                             */
+/* ------------------------------------------------ */
+
+.sapMITBTab {
+	width: 5rem;
+	display: block;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar content container                     */
+/* ------------------------------------------------ */
+
+.sapMITBContent {
+	padding: 1rem;
+	position: relative;
+	background-color: @_sap_m_IconTabBar_ContentBackground;
+}
+
+.sapMITBContentClosed {
+	background-color: transparent;
+	border-bottom: none;
+	margin-top: 0.75rem;
+	padding: 0.125rem 0 0 0;
+	position: relative;
+}
+
+.sapMITBContainerContent {
+	margin-top: 0;
+	padding: 0;
+	position: relative;
+
+	&.sapMITBContentClosed {
+		background-color: transparent;
+		border-bottom: none;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar filter class                          */
+/* ------------------------------------------------ */
+
+.sapMITBFilter {
+	padding: 0 0.25rem;
+	cursor: pointer;
+
+	.sapMITBFilterIcon, .sapMITBInlineIcon {
+		cursor: pointer;
+	}
+
+
+	&.sapMITBItem {
+		display: inline-flex;
+	}
+
+	.sapMITBFilterWrapper {
+		min-width: 0; // fixes flex Chrome issue
+		max-width: 100%;
+	}
+
+	.sapMITBText {
+		width: 5rem;
+		line-height: @_sap_m_IconTabBar_FilterTextLineHeight;
+		padding: 0.375rem 0 0;
+		position: relative;
+		color: @_sap_m_IconTabBar_TextColor;
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.sapUiIcon {
+			font-size: 1rem;
+		}
+
+		.sapMITHTextContent {
+			display: inline-block;
+			max-width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			vertical-align: bottom;
+		}
+	}
+
+	&.sapMITHUnselectable:not(.sapMITBDisabled) .sapMITHTextContent {
+		position: relative;
+	}
+
+	.sapMITBCount {
+		color: @_sap_m_IconTabBar_TextColor;
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+		max-width: 2rem;
+		overflow: hidden;
+		position: absolute;
+		text-overflow: ellipsis;
+	}
+
+	.sapMITBInlineIcon {
+		padding-right: 0.5rem;
+	}
+}
+
+.sapMITHShowSubItemsIcon {
+	pointer-events: none;
+	padding-left: @_sap_m_IconTabBar_Arrow_SubItem_Left_Padding;
+
+	.sapUiIcon {
+		cursor: pointer;
+	}
+}
+
+.sapMITH .sapMITBItem.sapMITBFilterHidden {
+	display: none;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Tab Filter Show All Item class        */
+/* ------------------------------------------------ */
+
+.sapMITBAll {
+	margin-right: 1.25rem;
+	cursor: pointer;
+
+
+	&:first-child .sapMITBTab .sapMITBCount {
+		padding-left: 0;
+	}
+
+	.sapMITBTab {
+		margin-bottom: @_sap_m_IconTabBar_AllTabMarginBottom;
+		display: inline-block;
+		height: @_sap_m_IconTabBar_AllTabHeight;
+		line-height: @_sap_m_IconTabBar_AllTabLineHeight;
+		width: auto;
+	}
+
+	.sapMITBCount {
+		display: inline-block;
+		font-size: 1.5rem;
+		padding: 0 0.5rem;
+		vertical-align: middle;
+		width: auto;
+		color: @_sap_m_IconTabBar_TextColor;
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+	}
+
+	.sapMITBText {
+		display: inline-block;
+		max-height: 3rem;
+		overflow: hidden;
+		text-align: left;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+		white-space: normal;
+		width: auto;
+		color: @_sap_m_IconTabBar_TextColor;
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Tab Text Only class                   */
+/* ------------------------------------------------ */
+
+.sapMITBTextOnly {
+
+	&.sapMITBFilter:not(.sapMITBDisabled).sapMITBText {
+		cursor: pointer;
+	}
+
+	.sapMITBFilter {
+		padding: 0 1rem;
+
+		.sapMITBText {
+			height: 1rem;
+			line-height: 1rem;
+			margin: 0;
+			padding: 0;
+			text-align: left;
+			width: auto;
+		}
+
+		.sapMITBCount {
+			font-size: @sapMFontMediumSize;
+			max-width: none;
+			position: relative;
+		}
+
+	}
+
+	.sapMITBTab {
+		height: 1rem;
+		padding: @_sap_m_IconTabBar_TextOnlyTabPadding;
+		text-align: left;
+		width: auto;
+	}
+
+	.sapMITBVertical {
+		height: @_sap_m_IconTabBar_TextOnlyVerticalHeight;
+
+		&.sapMITBFilter .sapMITBText + .sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_ContentArrowHeight;
+		}
+	}
+
+	.sapMITBText {
+		font-size: @sapMFontMediumSize;
+	}
+
+	.sapMITBFilterDefault .sapMITBText {
+		color: @_sap_m_IconTabBar_TextColor;
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Tab With No Text class                */
+/* ------------------------------------------------ */
+
+.sapMITBNoText {
+
+	.sapMITBFilter {
+
+		.sapMITBTab {
+			margin: 0 0.75rem;
+			width: @_sap_m_IconTabBar_NoTextFilterWidth;
+		}
+
+		&:first-child .sapMITBTab {
+			margin-left: 0;
+		}
+
+		.sapMITBContentArrow {
+			margin: 0 auto;
+			width: 3rem;
+		}
+
+		&:first-child .sapMITBContentArrow {
+			margin: 0 auto 0 0;
+		}
+
+		&.sapMITBItemNoCount:last-child {
+			padding-right: 0;
+			margin-right: 0;
+
+			.sapMITBTab {
+				margin-right: 0;
+			}
+
+			.sapMITBContentArrow {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.sapMITBVertical {
+		height: @_sap_m_IconTabBar_NoTextVerticalHeight;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Stretch content height class          */
+/* ------------------------------------------------ */
+
+.sapMITBStretch {
+	display: -webkit-flex;
+	display: flex;
+	flex-direction: column;
+	-webkit-flex-direction: column;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+
+	> .sapMITBContainerContent {
+		-webkit-flex-grow: 1;
+		flex-grow: 1;
+	}
+
+	> .sapMITBContainerContent > .sapMITBContent {
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Head container class                  */
+/* ------------------------------------------------ */
+
+.sapMITBHead {
+	padding-top: 1rem;
+	flex-grow: 1;
+	position: relative;
+	white-space: nowrap;
+	overflow: hidden;
+	vertical-align: top;
+	box-sizing: border-box;
+	padding: 0 0.1875rem;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Overflow tab class                    */
+/* ------------------------------------------------ */
+
+.sapMITH {
+	.sapMITHEndOverflow,
+	.sapMITHStartOverflow {
+		align-self: stretch;
+		flex-grow: 0;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+
+		.sapMITBFilterWrapper {
+			display: inline-flex;
+			align-items: center;
+		}
+
+		.sapMITBItem {
+			visibility: hidden;
+			margin: 0;
+			padding: 0;
+			height: 1.5rem;
+			border: @_sap_m_IconTabBar_Overflow_Border;
+			background-color: @_sap_m_IconTabBar_Overflow_BackgroundColor;
+			border-radius: @_sap_m_IconTabBar_Overflow_BorderRadius;
+
+			.sapMITBContentArrow {
+				display: none;
+			}
+
+			.sapMITHShowSubItemsIcon {
+				color: @_sap_m_IconTabBar_Overflow_Icon_Color;
+			}
+
+			&:hover {
+				border-color: @_sap_m_IconTabBar_Overflow_BorderColorHover;
+				background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorHover;
+				box-shadow: @_sap_m_IconTabBar_Overflow_BoxShadowHover;
+
+				.sapMITBText {
+					color: @_sap_m_IconTabBar_Overflow_TextColorHover;
+				}
+
+				.sapMITHShowSubItemsIcon {
+					color: @_sap_m_IconTabBar_Overflow_Icon_ColorHover;
+				}
+			}
+
+			&:active {
+				border-color: @_sap_m_IconTabBar_Overflow_BorderColorPressed;
+				background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorPressed;
+
+				.sapMITBText {
+					color: @_sap_m_IconTabBar_Overflow_TextColorPressed;
+					text-shadow: none;
+				}
+
+				.sapMITHShowSubItemsIcon {
+					color: @_sap_m_IconTabBar_Overflow_Icon_ColorPressed;
+				}
+			}
+		}
+
+		.sapMITBText {
+			font-size: @sapMFontMediumSize;
+			padding: 0;
+			margin: 0 0.5rem;
+			text-align: left;
+			width: auto;
+			color: @_sap_m_IconTabBar_Overflow_TextColor;
+		}
+
+		.sapMITHOverflowVisible {
+			visibility: visible;
+		}
+
+		.sapMITBTab {
+			display: none;
+		}
+	}
+}
+
+.sapMITH:not(.sapMITHEndOverflowList) .sapMITHEndOverflow, .sapMITH:not(.sapMITHStartOverflowList) .sapMITHStartOverflow {
+	display: none;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Content arrow class                   */
+/* ------------------------------------------------ */
+
+.sapMITBContentArrow {
+	border-bottom: @_sap_m_IconTabBar_ContentArrowBorderWidth solid transparent;
+	box-sizing: border-box;
+	height: 1rem;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Tab item  class                       */
+/* ------------------------------------------------ */
+
+.sapMITBItem {
+	display: inline-block;
+	position: relative;
+	text-align: center;
+	vertical-align: top;
+	color: @sapUiGroupTitleTextColor;
+
+	max-width: 100%;
+	box-sizing: border-box;
+
+	/* Dragged Filter Item */
+	&.sapUiDnDDragging {
+		background: @sapUiObjectHeaderBackground;
+	}
+}
+
+.sapMITBFilterExpandBtn {
+	margin-left: 0.25rem;
+	align-items: center;
+	align-self: center;
+	display: flex;
+	height: 2rem;
+    padding: 0.1875rem 0;
+	width: 1.5rem;
+}
+
+.sapMITBFilterExpandBtn .sapMITBFilterExpandIcon {
+	border:  0.0625rem solid @_sap_m_IconTabFilter_Icon_Border_Color;
+	border-radius: @_sap_m_IconTabFilter_Icon_Border_Radius;
+	box-sizing: content-box;
+	overflow: visible;
+	width: 1.5rem;
+	min-width: 1.5rem;
+	height: 1.5rem;
+	line-height: 1.5rem;
+	font-size: 1rem;
+	color: @_sap_m_IconTabBar_TextColor;
+	font-family: @sapUiContentIconFontFamily;
+	}
+
+.sapMITBFilterExpandBtn .sapMITBFilterExpandIcon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+}
+
+.sapMITBFilterExpandBtn:hover .sapMITBFilterExpandIcon {
+	border-color: @sapUiButtonHoverBorderColor;
+	background-color: @sapUiButtonHoverBackground;
+	color: @sapUiButtonLiteHoverTextColor;
+}
+
+.sapMITBFilterExpandBtn:active .sapMITBFilterExpandIcon{
+	background-color: @sapUiButtonActiveBackground;
+	border-color:     @sapUiButtonActiveBorderColor;
+	color:            @sapUiButtonActiveTextColor;
+}
+
+.sapMITBDisabled {
+	opacity: @_sap_m_IconTabBar_DisabledOpacity;
+	cursor: default;
+
+	.sapUiIcon {
+		cursor: default;
+	}
+
+	.sapMITBFilterIcon {
+		border-color: @sapUiGroupTitleTextColor;
+	}
+}
+
+.sapMITBFilterDefault {
+	.sapMITBFilterWrapper:hover {
+		.sapMITBText {
+			color: @_sap_m_IconTabBar_TextHoverColor;
+		}
+		.sapMITBSelectItemIcon.sapUiIcon {
+			color: @_sap_m_IconTabBar_TextHoverColor !important;
+		}
+	}
+
+	.sapMITBFilterExpandBtn:hover {
+		.sapMITBFilterExpandIcon {
+			color: @_sap_m_IconTabBar_TextHoverColor;
+		}
+	}
+}
+
+/* ------------------------------------------------ */
+/* Vertical Tab Filter Item                         */
+/* ------------------------------------------------ */
+
+.sapMITBVertical {
+	height: @_sap_m_IconTabBar_VerticalHeight;
+
+	&.sapMITBFilter .sapMITBContentArrow {
+		height: @_sap_m_IconTabBar_VerticalContentArrowHeight;
+	}
+}
+
+	.sapMITH:not(.sapMITBTextOnly):not(.sapMITBNoText) .sapMITBHead .sapMITBVertical.sapMITHUnselectable {
+		.sapMITBText {
+			padding-top: 0.25rem;
+		}
+
+		.sapMITBContentArrow {
+			height: 0.5rem;
+		}
+	}
+
+.sapMITBNoText .sapMITBVertical.sapMITBFilter .sapMITBContentArrow {
+	height: @_sap_m_IconTabBar_NoTextVerticalContentArrowHeight;
+}
+
+/* ------------------------------------------------ */
+/* Horizontal Tab Filter Item                       */
+/* ------------------------------------------------ */
+
+.sapMITBHorizontalWrapper {
+	display: inline-block;
+	height: @_sap_m_IconTabBar_HorizontalWrapperHeight;
+	left: -1rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: top;
+	width: auto;
+}
+
+.sapMITBHorizontal {
+
+	&.sapMITBFilter {
+		height: @_sap_m_IconTabBar_HorizontalFilterHeight;
+
+		&:first-child .sapMITBTab {
+			padding-left: 0;
+		}
+
+		.sapMITBContentArrow {
+			width: 3.375rem;
+		}
+
+		.sapMITBText {
+			padding: @_sap_m_IconTabBar_HorizontalTextPaddingTop 0 0 @_sap_m_IconTabBar_HorizontalTextPaddingLeft;
+			justify-content: flex-start;
+			top: 0.3125rem;
+			width: auto;
+		}
+
+		.sapMITBCount {
+			display: block;
+			max-width: none;
+			padding-left: @_sap_m_IconTabBar_HorizontalTextPaddingLeft;
+			position: relative;
+			text-align: left;
+			top: @_sap_m_IconTabBar_HorizontalCountTop;
+		}
+
+		.sapMITBTab {
+			display: inline-block;
+			height: @_sap_m_IconTabBar_HorizontalTabHeight;
+			padding: 0;
+			vertical-align: top;
+			width: @_sap_m_IconTabBar_HorizontalTabWidth;
+		}
+	}
+
+	&.sapMITBAll .sapMITBTab {
+		margin-bottom: 0;
+	}
+
+	+ .sapMITBSep {
+		width: auto;
+
+		> .sapMITBSepIcon {
+			padding: 0 0.5rem;
+		}
+	}
+}
+
+/* ------------------------------------------------ */
+/* Tab Filter In Line                               */
+/* ------------------------------------------------ */
+
+.sapMITBInLine {
+
+	.sapMITBHead .sapMITBFilter .sapMITBText {
+		margin: @_sap_m_IconTabBar_InLineFilterMargin;
+	}
+
+	&.sapMITBTextOnly .sapMITBHead .sapMITBVertical.sapMITBFilter {
+		height: @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight;
+
+		.sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight;
+		}
+	}
+}
+
+/* ------------------------------------------------ */
+/* Tab Filter Icon                                  */
+/* ------------------------------------------------ */
+
+.sapMITBFilterIcon {
+	border-bottom-left-radius: 3rem;
+	border-bottom-right-radius: 3rem;
+	-moz-border-radius: 3rem;
+	border-top-left-radius: 3rem;
+	/* some native browsers like Samsung Galaxy S4 with Android 4.2 do not support the "border-
+	radius" shorthand property but does support the long-hand properties for each corner like
+	"border-top-left-radius" */
+	border-top-right-radius: 3rem;
+	box-sizing: border-box;
+	font-size: 1.5rem;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: @_sap_m_IconTabBar_FilterIconHeight;
+	overflow: hidden;
+	width: @_sap_m_IconTabBar_FilterIconWidth;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+
+.sapMITBFilterNoIcon {
+	display: inline-block;
+	height: 3rem;
+	vertical-align: middle;
+	width: 3rem;
+}
+
+.sapMITBCount {
+	color: @sapUiGroupTitleTextColor;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Tab Separator Item                    */
+/* ------------------------------------------------ */
+
+.sapMITBSep {
+	width: 1.5rem;
+	pointer-events: none;
+}
+
+.sapMITBSepLine {
+	height: @_sap_m_IconTabBar_SeparatorHeight;
+	margin: @_sap_m_IconTabBar_SeparatorMargin;
+	width: 0;
+	border: 1px solid @sapUiListBorderColor;
+}
+
+.sapMITBTextOnly .sapMITBSepLine,
+.sapUiMedia-Std-Phone .sapMITBTextOnly .sapMITBSepLine,
+.sapMITH.sapUiSizeCompact.sapMITBTextOnly .sapMITBSepLine {
+	margin: @_sap_m_IconTabBar_TextOnlySeparatorMargin;
+	height: 2rem;
+}
+
+.sapMITH.sapUiSizeCompact.sapMITBTextOnly .sapMITBSepLine {
+	margin: @_sap_m_IconTabBar_TextOnlySeparatorMarginCompact;
+}
+
+.sapMITBSepIcon {
+	font-size: @_sap_m_IconTabBar_Separator_Font_Size;
+	height: @_sap_m_IconTabBar_SeparatorIconHeight;
+	line-height: @__sap_m_IconTabBar_SeparatorIconLineHeight;
+	padding: 0 0.25rem;
+	color: @_sap_m_IconTabBar_Separator_Icon;
+
+	&::before {
+		text-shadow: @_sap_m_IconTabBar_TextShadow;
+	}
+}
+
+.sapMITBTextUpperCase .sapMITBText {
+	text-transform: uppercase;
+}
+
+.sapMITBBackgroundDesignTransparent > .sapMITBContainerContent > .sapMITBContent {
+	background-color: transparent;
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
+.sapUiContainerContentPadding(~".sapMITB", ~"> .sapMITBContainerContent > .sapMITBContent");
+
+.sapMITH,
+.sapMITBHead,
+.sapMITBFilterIcon,
+.sapMITBItem {
+	&:focus {
+		outline: none;
+	}
+}
+
+.sapMITBItem .sapMITBFilterIcon {
+	overflow: visible;
+}
+
+.sapMITH {
+	vertical-align: top;
+	font-size: @sapMFontSmallSize;
+	display: flex;
+	align-items: flex-start;
+	background-color: @_sap_m_IconTabBar_HeaderBackground;
+	border-bottom: @_sap_m_IconTabBar_HeaderBorderBottom;
+	box-shadow: @_sap_m_IconTabBar_HeaderShadow;
+	position: relative;
+	padding: 0 2rem;
+
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	.sapMITBFilter.sapMITHDragOver,
+	.sapMITBFilterExpandBtn.sapMITHDragOver .sapMITBFilterExpandIcon{
+		background: @sapUiDragAndDropActiveBackground;
+		box-shadow: inset 0 0 0 0.125rem @sapUiDragAndDropActiveBorderColor;
+	}
+
+	.sapMITBHead .sapMITBFilter {
+		&:first-child {
+			padding-left: 0;
+			margin-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+			margin-right: 0;
+		}
+	}
+}
+
+/* Custom focus outline */
+html.sap-desktop {
+
+	.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon,
+	.sapMITBTextOnly .sapMITBHead .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
+	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
+		&::after {
+			content: "";
+			position: absolute;
+			top: @_sap_m_IconTabBar_HeaderFocusBorderTopOffset;
+			bottom: @_sap_m_IconTabBar_HeaderFocusBorderBottomOffset;
+			right: @_sap_m_IconTabBar_HeaderFocusBorderRightOffset;
+			left: @_sap_m_IconTabBar_HeaderFocusBorderLeftOffset;
+			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border-radius: @_sap_m_IconTabBar_HeaderBorderRadius;
+			pointer-events: none;
+		}
+	}
+
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+		.sapMITBItem:not(.sapUiDnDDragging):focus {
+			&::after {
+				content: "";
+				position: absolute;
+				top: @_sap_m_IconTabBar_More_Button_Focus_Offset;
+				bottom: @_sap_m_IconTabBar_More_Button_Focus_Offset;
+				right: @_sap_m_IconTabBar_More_Button_Focus_Offset;
+				left: @_sap_m_IconTabBar_More_Button_Focus_Offset;
+				border-radius: @_sap_m_IconTabBar_More_Button_Border_Radius;
+				border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+				pointer-events: none;
+			}
+		}
+	}
+}
+
+/* ------------------------------------------------ */
+/* Phone device                                     */
+/* ------------------------------------------------ */
+
+.sapUiMedia-Std-Phone {
+
+	.sapMITH.sapMITBTextOnly:not(.sapMITBInLine) {
+
+		.sapMITBHead .sapMITBTab {
+			padding: 0.25rem 0 0.25rem 0;
+		}
+
+		.sapMITBHead .sapMITBVertical.sapMITBFilter {
+			height: 3rem;
+
+			.sapMITBContentArrow {
+				height: @_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight;
+			}
+
+		}
+	}
+
+	.sapMITBHead .sapMITBFilter {
+		padding: 0 0.25rem;
+	}
+
+	.sapMITBTextOnly .sapMITBHead .sapMITBFilter {
+		margin: 0 0.5rem;
+	}
+
+	// Compact size in phone size
+	.sapMITH.sapUiSizeCompact {
+
+		// This solves an issue when we are in compact mode on real device
+		// We remove the bottom padding and leave only top
+		&.sapMITBTextOnly:not(.sapMITBInLine) {
+
+			.sapMITBHead .sapMITBTab {
+				padding: 0.25rem 0 0 0;
+			}
+
+			.sapMITBVertical.sapMITBFilter .sapMITBContentArrow {
+				height: @_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight;
+			}
+		}
+
+		&.sapMITBTextOnly .sapMITBFilter {
+			padding: 0;
+		}
+
+		.sapMITBFilter {
+			cursor: pointer;
+		}
+	}
+
+	.sapMITBHead {
+		vertical-align: top;
+		padding: 0;
+	}
+
+	.sapMITH {
+		padding: 0 1rem;
+	}
+
+	.sapMITHEndOverflow {
+		margin-left: 1rem;
+	}
+
+	.sapMITHStartOverflow {
+		margin-right: 1rem;
+	}
+
+	.sapMITBSepLine {
+		margin: 0 0.125rem;
+	}
+
+	.sapMITBAll {
+		margin-right: 0.25rem;
+
+		.sapMITBText {
+			padding-right: 0.5rem;
+		}
+
+		.sapMITBCount {
+			padding: 0 0.25rem;
+		}
+
+		&:first-child {
+			margin-left: 0.063rem;
+		}
+	}
+
+	.sapMITBContent {
+		padding: 0;
+	}
+}
+
+.sapUiMedia-Std-Tablet,
+.sapUiMedia-Std-Desktop {
+
+	.sapMITH {
+		padding: 0 2rem;
+	}
+
+	.sapMITHEndOverflow {
+		margin-left: 2rem;
+	}
+
+	.sapMITHStartOverflow {
+		margin-right: 2rem;
+	}
+}
+
+.sapUiMedia-Std-Desktop {
+	.sapUiResponsiveContentPadding.sapMITH {
+		padding: 0 3rem;
+	}
+
+	/* --------------------------------------------------------- */
+	/* Switch paddings when in a split container with side open  */
+	/* --------------------------------------------------------- */
+	.sapMSplitContainer.sapMSplitContainerShowHide {
+		.sapMITH {
+			padding: 0 2rem;
+		}
+	}
+
+	.sapMSplitContainer.sapMSplitContainerHideMode {
+		.sapMITH {
+			padding: 0 3rem;
+		}
+	}
+	/* ------------------------------------------------ */
+
+	&.sapUiMedia-StdExt-LargeDesktop {
+		.sapUiResponsiveContentPadding.sapMITH {
+			padding: 0 3rem;
+		}
+	}
+}
+
+.sapMITBItem .sapMITBFilterIcon,
+.sapMITBTextOnly .sapMITBItem .sapMITBText,
+.sapMITBItem.sapMITBAll {
+	position: relative;
+}
+
+/* ------------------------------------------------ */
+/* Compact size                                     */
+/* ------------------------------------------------ */
+
+.sapMITH.sapUiSizeCompact {
+
+	.sapMITBHead {
+		padding-top: 0.625rem;
+
+		.sapMITBFilter {
+			padding: 0 0.25rem;
+
+			.sapMITBText {
+				line-height: 0.875rem;
+				padding: @_sap_m_IconTabBar_Compact_FilterTextPadding;
+			}
+		}
+	}
+
+	.sapMITHEndOverflow,
+	.sapMITHStartOverflow {
+		.sapMITBItem {
+			height: 1.5rem;
+		}
+	}
+
+	.sapMITBVertical {
+		height: @_sap_m_IconTabBar_Compact_VerticalHeight;
+
+		.sapMITBTab {
+			height: 2rem;
+		}
+
+		&.sapMITBFilter .sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight;
+		}
+	}
+
+	&.sapMITBNoText {
+
+		.sapMITBHead .sapMITBVertical {
+			height: @_sap_m_IconTabBar_Compact_NoTextVerticalHeight;
+		}
+
+		.sapMITBFilter .sapMITBContentArrow {
+			width: @_sap_m_IconTabBar_Compact_NoTextContentArrowWidth;
+			height: @_sap_m_IconTabBar_Compact_NoTextContentArrowHeight;
+		}
+
+		.sapMITBFilter .sapMITBTab {
+			width: @_sap_m_IconTabBar_Compact_NoTextTabWidth;
+		}
+
+	}
+
+	&.sapMITBInLine.sapMITBTextOnly .sapMITBHead {
+
+		.sapMITBVertical.sapMITBFilter {
+			height: @_sap_m_IconTabBar_Compact_InLineVerticalTabHeight;
+		}
+
+		.sapMITBText {
+			margin: @_sap_m_IconTabBar_Compact_InLineFilterTextMargin;
+		}
+
+		.sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight;
+		}
+	}
+
+	&.sapMITBTextOnly .sapMITBHead {
+		padding: @_sap_m_IconTabBar_Compact_TextOnlyHeadPadding;
+
+		.sapMITBFilter {
+			padding: 0 1rem;
+
+			&:first-child {
+				padding-left: 0;
+			}
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+			.sapMITBTab {
+				height: 1rem;
+				padding: @_sap_m_IconTabBar_Compact_TextOnlyTabPadding;
+			}
+
+			.sapMITBText {
+				line-height: @_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight;
+				padding: @_sap_m_IconTabBar_Compact_TextOnlyTextPadding;
+			}
+		}
+
+		.sapMITBVertical {
+			height: @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight;
+		}
+	}
+
+	.sapMITBFilterIcon {
+		border-bottom-left-radius: 2rem;
+		border-bottom-right-radius: 2rem;
+		-moz-border-radius: 3rem;
+		border-top-left-radius: 2rem;
+		border-top-right-radius: 2rem;
+		font-size: 1rem;
+		height: 2rem;
+		line-height: 1.9rem;
+		width: 2rem;
+			}
+
+	.sapMITBSepLine {
+		height: 2rem;
+		margin: 0 0.125rem;
+		width: 0;
+		border: 1px solid #e5e5e5;
+	}
+
+	.sapMITBAll {
+		margin-right: 1.375rem;
+
+		.sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_ContentArrowHeight;
+		}
+
+		.sapMITBTab {
+			line-height: 2rem;
+		}
+
+		&.sapMITBHorizontal .sapMITBContentArrow {
+			height: @_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight;
+		}
+
+		&.sapMITBHorizontal.sapMITBItem:focus {
+			&::after {
+				bottom: @_sap_m_IconTabBar_Compact_HorizontalFocusBottom;
+			}
+		}
+
+	}
+
+	.sapMITBHorizontalWrapper {
+		height: 2rem;
+		overflow: visible;
+	}
+
+
+	.sapMITBContentArrow {
+		height: @_sap_m_IconTabBar_Compact_ContentArrowHeight;
+	}
+
+	.sapMITBHorizontal {
+		height: @_sap_m_IconTabBar_Compact_HorizontalHeight;
+
+		&.sapMITBFilter .sapMITBFilterWrapper {
+			height: @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight;
+			padding: 0 0.5rem;
+
+			&:first-child {
+				padding-left: 0;
+			}
+
+			.sapMITBHorizontalWrapper {
+				.sapMITBCount {
+					top: 0;
+					padding-left: 0.5rem;
+				}
+				.sapMITBText {
+					top: 0;
+					padding-left: 0.5rem;
+				}
+			}
+
+			.sapMITBContentArrow {
+				height: @_sap_m_IconTabBar_Compact_ContentArrowHeight;
+				width: 2rem;
+				margin: 0;
+			}
+
+			.sapMITBTab {
+				height: 2rem;
+				width: 2rem;
+			}
+		}
+
+		.sapMITBTab {
+			height: 2rem;
+		}
+
+	}
+
+	.sapMITBSepIcon {
+		height: 2rem;
+		line-height: 2rem;
+		padding: 0 0.5rem;
+	}
+}
+
+.sapMITH.sapMITBTextOnly .sapMITBFilterWithItems:not(.sapMITHUnselectable) .sapMITBContentArrow {
+	margin-right: -2.3125rem;
+}
+
+.sapMITH .sapMITBContentArrow {
+	margin: 0 -0.1875rem;
+}
+
+/* container background design - translucent */
+.sapMITBBackgroundDesignTranslucent .sapMITBContainerContent .sapMITBContent {
+	background-color: @_sap_m_IconTabBar_ContentBackgroundTranslucent;
+}
+
+/* header background design - translucent */
+.sapMITHBackgroundDesignTranslucent {
+	background-color: @_sap_m_IconTabBar_HeaderBackgroundTranslucent;
+}
+
+/* header background design - transparent */
+.sapMITHBackgroundDesignTransparent {
+	background: transparent;
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Right to left mode                    */
+/* ------------------------------------------------ */
+
+html[dir=rtl] {
+	.sapMITBContentArrow {
+		z-index: 1;
+	}
+
+	.sapMITBTextOnly .sapMITBTab {
+		text-align: right;
+	}
+
+	.sapMITBHorizontal.sapMITBFilter .sapMITBHorizontalWrapper .sapMITBCount {
+		text-align: right;
+	}
+}
+
+/* ------------------------------------------------ */
+/* Shell overrides                        */
+/* ------------------------------------------------ */
+
+.sapUshellShellTabBar .sapMITH,
+.sapUshellShellTabBar.sapMITH {
+
+	box-shadow: @_sap_m_IconTabBar_ShellHeaderShadow;
+	background-color: @sapUiShellNavigationBackground;
+	min-height: @_sap_m_IconTabBar_HeaderMinHeight;
+
+	.sapMITBSelected .sapMITBContentArrow::after {
+		background: @sapUiShellNavigationSelectedColor;
+		height: @_sap_m_IconTabBar_ShellContentArrowHeight;
+	}
+
+	.sapMITBFilterDefault {
+
+		&:hover .sapMITBText {
+			color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+		}
+
+		&.sapMITBSelected {
+			&:hover .sapMITBText {
+				color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+			}
+
+			.sapMITBText {
+				color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+			}
+
+			.sapMITBFilterIcon {
+				background: @_sap_m_IconTabBar_ShellSelectedTextColor;
+				color: @sapUiShellNavigationBackground;
+			}
+		}
+
+		.sapMITBFilterIcon {
+			border-color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+			color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+		}
+	}
+	.sapMITBFilter .sapMITBText .sapMITHTextContent {
+		vertical-align: inherit;
+	}
+	.sapMITBFilter.sapMITHUnselectable:not(.sapMITBDisabled) .sapMITHTextContent {
+		position: initial;
+	}
+
+	.sapMITBFilter {
+		.sapMITBText,
+		.sapMITBCount {
+			color: @_sap_m_IconTabBar_ShellTextColor;
+			font-family: @sapUiFontFamily;
+			font-size: @sapMFontMediumSize;
+		}
+
+		&.sapMITBSelected .sapMITBCount {
+			color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+		}
+	}
+
+	&:not(.sapMITBTextOnly) {
+		.sapMITBFilter {
+			.sapMITBText {
+				line-height: 0.9375rem;
+				padding: 0.3125rem 0 0;
+			}
+		}
+
+		.sapMITHStartOverflow,
+		.sapMITHStartOverflow {
+			.sapMITBItem .sapMITBText {
+				padding-top: 0.25rem;
+			}
+		}
+	}
+
+	.sapMITHUnselectable {
+		&:hover .sapUiIcon {
+			color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+		}
+
+		.sapUiIcon {
+			color: @_sap_m_IconTabBar_ShellTextColor;
+		}
+
+		&.sapMITBSelected {
+			.sapUiIcon {
+				color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+			}
+		}
+	}
+
+	.sapMITBSelected .sapMITBFilterExpandBtn .sapMITBFilterExpandIcon{
+		color: @_sap_m_IconTabBar_ShellSelectedTextColor;
+	}
+
+	.sapMITBFilterExpandBtn .sapMITBFilterExpandIcon{
+		color: @_sap_m_IconTabBar_ShellTextColor;
+		background-color: transparent;
+		border-color: transparent;
+	}
+
+	.sapMITBFilterExpandBtn:hover .sapMITBFilterExpandIcon{
+		background: @_sap_m_IconTabBar_Filter_Expand_Shell_BackgroundColor_Hover;
+		border-color: @_sap_m_IconTabBar_Filter_Expand_Shell_BorderColor_Hover;
+	}
+
+	.sapMITBFilterExpandBtn:focus {
+		outline-color: @_sap_m_IconTabBar_ShellButtonOutlineColor;
+		background: @sapUiShellActiveBackground;
+	}
+
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+		.sapMITBItem {
+			color: @_sap_m_IconTabBar_ShellTextColor;
+			background-color: transparent;
+			border-color: @_sap_m_IconTabBar_ShellOverflowBorderColor;
+
+			.sapMITHShowSubItemsIcon {
+				color: @_sap_m_IconTabBar_ShellTextColor;
+			}
+
+			&:hover {
+				background: @sapUiShellHoverBackground;
+				border-color: @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
+			}
+
+			&:active {
+				background: @sapUiShellNavigationActiveBackground;
+				border-color: @_sap_m_IconTabBar_ShellOverflowPressedBorderColor;
+			}
+		}
+	}
+
+	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: @_sap_m_IconTabBar_ShellTextColor;
+			}
+		}
+	}
+}
+
+/* ------------------------------------------------ */
+/* IconTabBar Badge									*/
+/* ------------------------------------------------ */
+
+.sapMITH {
+	.sapMITBFilterWithItems .sapMITBFilterExpandBtn {
+		margin-left: 0.625rem; // extra margin to create space for badge
+	}
+}
+
+.sapMITH,
+.sapMITBFilterPopover {
+
+	.sapMITBFilterBadgeMotion .sapMBadgeAttention.sapMBadgeAnimationAdd {
+		animation-name: sapMBadgeAppearMotion;
+		animation-duration: 1s;
+		animation-timing-function: linear;
+	}
+
+	// small badge
+	&.sapUiSizeCompact,
+	.sapMITBText,
+	.sapMITFExpandButtonBadge {
+		.sapMBadgeAttention {
+			width: 0.375rem;
+			height: 0.375rem;
+			border-width: 0.063rem;
+
+			&.sapMITBFilterBadgeMotion.sapMBadgeAnimationAdd {
+				animation-name: sapMBadgeAppearMotionSmall;
+			}
+		}
+	}
+
+	.sapMITBText .sapMBadgeAttention {
+		top: 0;
+		right: -0.6rem;
+	}
+
+	.sapMITBSelectList .sapMITBText .sapMBadgeAttention {
+		right: 0.4375rem;
+	}
+
+	.sapMITBFilterIcon .sapMBadgeAttention,
+	.sapMITBCount .sapMBadgeAttention {
+		top: 0;
+		right: 0;
+	}
+
+	.sapMITBAll {
+		.sapMITBCount .sapMBadgeAttention {
+			top: 0.2rem;
+
+			.sapUiMedia-Std-Phone & {
+				right: -0.25rem;
+			}
+		}
+	}
+
+	&.sapUiSizeCompact {
+		.sapMITBFilterIcon .sapMBadgeAttention {
+			top: -0.063rem;
+			right: -0.063rem;
+		}
+
+		.sapMITBCount .sapMBadgeAttention {
+			top: -0.125rem;
+			right: -0.125rem;
+		}
+
+		.sapMITFExpandButtonBadge {
+			top: @_sap_m_IconTabBar_Compact_FilterExpandButtonBadgeTop;
+		}
+	}
+
+	.sapMITFExpandButtonBadge {
+		top: @_sap_m_IconTabBar_FilterExpandButtonBadgeTop;
+		left: 0.375rem;
+	}
+
+	.sapMITHOverflowVisible .sapMITFExpandButtonBadge {
+		top: 0;
+	}
+
+	.sapMITBFilterNeutral .sapMBadgeAttention {
+		background-color: @_sap_m_IconTabBar_Badge_Neutral_Background;
+	}
+
+	.sapMITBFilterPositive .sapMBadgeAttention {
+		background-color: @_sap_m_IconTabBar_Badge_Positive_Background;
+	}
+
+	.sapMITBFilterCritical .sapMBadgeAttention {
+		background-color: @_sap_m_IconTabBar_Badge_Critical_Background;
+	}
+
+	.sapMITBFilterNegative .sapMBadgeAttention {
+		background-color: @_sap_m_IconTabBar_Badge_Negative_Background;
+	}
+}
+
+html[data-sap-ui-animation='off'] {
+	.sapMITH,
+	.sapMITBFilterPopover {
+		.sapMITBFilterBadgeMotion .sapMBadgeAttention.sapMBadgeAnimationAdd {
+			animation: none;
+		}
+	}
+}
+
+.sapMITH {
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+
+		.sapMITFExpandButtonBadge {
+			left: 0;
+
+			.sapMBadgeAttention {
+				top: -1px;
+				right: -4px;
+				width: 0.5rem;
+				height: 0.5rem;
+				border-width: 0.125rem;
+			}
+		}
+	}
+}
+
+/* Responsive paddings when the IconTabBar is inside a DynamicPage */
+
+.sapFDynamicPage-Std-Phone {
+	.sapUiResponsiveContentPadding {
+		.sapMITH,
+		&.sapMITH {
+			padding: 0 1rem !important;
+		}
+
+		.sapMITBContent {
+			padding: 0 1rem !important;
+		}
+	}
+}
+
+.sapFDynamicPage-Std-Tablet,
+.sapFDynamicPage-Std-Desktop {
+	.sapUiResponsiveContentPadding {
+		.sapMITH,
+		&.sapMITH {
+			padding: 0 2rem !important;
+		}
+
+		.sapMITBContent {
+			padding: 1rem 2rem !important;
+		}
+	}
+}
+
+.sapFDynamicPage-Std-Desktop-XL {
+	.sapUiResponsiveContentPadding {
+		.sapMITH,
+		&.sapMITH {
+			padding: 0 3rem !important;
+		}
+
+		.sapMITBContent {
+			padding: 1rem 3rem !important;
+		}
+	}
+}