@openui5/sap.m/src/sap/m/themes/base/IconTabBar.less

OpenUI5 UI Library sap.m

/* ================================= */
/* CSS for control sap.m/IconTabBar  */
/* Base theme                        */
/* ================================= */

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

@_sap_m_IconTabBar_TextColor: var(--sapTab_TextColor);
@_sap_m_IconTabBar_TextShadow: @sapUiShadowText;
@_sap_m_IconTabBar_DisabledOpacity: var(--sapContent_DisabledOpacity);
@_sap_m_IconTabBar_Separator_Icon: var(--sapContent_NonInteractiveIconColor);
@_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: var(--sapTab_Selected_TextColor);

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

/* Content arrow */
@_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: var(--sapObjectHeader_Background);
@_sap_m_IconTabBar_HeaderBackgroundTranslucent: fade(@sapUiObjectHeaderBackground, 60);

@_sap_m_IconTabBar_HeaderBorderBottom: 0.125rem solid var(--sapObjectHeader_Background);
@_sap_m_IconTabBar_HeaderShadow: @sapUiShadowHeader;

/* Content */
@_sap_m_IconTabBar_ContentBackground: var(--sapGroup_ContentBackground);
@_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: var(--sapButton_Background);
@_sap_m_IconTabBar_Overflow_Border: 1px solid var(--sapButton_BorderColor);

@_sap_m_IconTabBar_Overflow_TextColor: var(--sapButton_TextColor);
@_sap_m_IconTabBar_Overflow_Icon_Color: var(--sapButton_IconColor);

@_sap_m_IconTabBar_Overflow_BorderColorHover: var(--sapButton_Hover_BorderColor);
@_sap_m_IconTabBar_Overflow_BackgroundColorHover: var(--sapButton_Hover_Background);
@_sap_m_IconTabBar_Overflow_TextColorHover: var(--sapButton_Hover_TextColor);
@_sap_m_IconTabBar_Overflow_Icon_ColorHover: var(--sapButton_Hover_TextColor);
@_sap_m_IconTabBar_Overflow_BoxShadowHover: none;

@_sap_m_IconTabBar_Overflow_BackgroundColorPressed: var(--sapButton_Active_Background);
@_sap_m_IconTabBar_Overflow_BorderColorPressed: var(--sapButton_Active_BorderColor);
@_sap_m_IconTabBar_Overflow_TextColorPressed: var(--sapButton_Active_TextColor);
@_sap_m_IconTabBar_Overflow_Icon_ColorPressed: var(--sapButton_Active_TextColor);

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

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

/* =========== Shell =========== */
@_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
@_sap_m_IconTabBar_ShellTextColor: var(--sapShell_Navigation_TextColor);
@_sap_m_IconTabBar_ShellSelectedTextColor: var(--sapShell_Navigation_Selected_TextColor);
@_sap_m_IconTabBar_ShellButtonOutlineColor: contrast(@sapUiShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapUiContentContrastTextThreshold);
@_sap_m_IconTabBar_ShellOverflowBorderColor: transparent;
@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: transparent;
@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: var(--sapShell_Navigation_Active_Background);
@_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -4px;
@_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -4px;
@_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -3px;
@_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -3px;
@_sap_m_IconTabBar_HeaderBorderRadius: 0px;
@_sap_m_IconTabBar_Filter_Expand_Shell_BackgroundColor_Hover: var(--sapShell_Hover_Background);
@_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: var(--sapNeutralElementColor);
@_sap_m_IconTabBar_Badge_Positive_Background: var(--sapPositiveElementColor);
@_sap_m_IconTabBar_Badge_Critical_Background: var(--sapCriticalElementColor);
@_sap_m_IconTabBar_Badge_Negative_Background: var(--sapNegativeElementColor);

/* ------------------------------------------------ */
/* 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;
		font-family: var(--sapFontHeaderFamily);

		.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: normal;
			margin: 0;
			padding: 0;
			text-align: left;
			width: auto;

			.sapMITHShowSubItemsIcon {
				line-height: 1rem;
			}
		}

		.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: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	> .sapMITBContainerContent {
		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 {
	box-sizing: border-box;
	height: 1rem;
	
	&::after {
		height: var(--sapTab_Selected_Indicator_Dimension);
	}
}

/* ------------------------------------------------ */
/* IconTabBar Tab item  class */
/* ------------------------------------------------ */

.sapMITBItem {
	display: inline-block;
	position: relative;
	text-align: center;
	vertical-align: top;
	color: var(--sapGroup_TitleTextColor);
	max-width: 100%;
	box-sizing: border-box;

	/* Dragged Filter Item */
	&.sapUiDnDDragging {
		background: var(--sapObjectHeader_Background);
	}
}

.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: var(--sapContent_IconFontFamily);
}

.sapMITBFilterExpandBtn .sapMITBFilterExpandIcon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.sapMITBFilterExpandBtn:hover .sapMITBFilterExpandIcon {
	border-color: var(--sapButton_Hover_BorderColor);
	background-color: var(--sapButton_Hover_Background);
	color: var(--sapButton_Lite_Hover_TextColor);
}

.sapMITBFilterExpandBtn:active .sapMITBFilterExpandIcon {
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

.sapMITBDisabled {
	opacity: @_sap_m_IconTabBar_DisabledOpacity;
	cursor: default;

	.sapUiIcon {
		cursor: default;
	}

	.sapMITBFilterIcon {
		border-color: var(--sapGroup_TitleTextColor);
	}
}

.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;
	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;
	user-select: none;
}

.sapMITBFilterNoIcon {
	display: inline-block;
	height: 3rem;
	vertical-align: middle;
	width: 3rem;
}

.sapMITBCount {
	color: var(--sapGroup_TitleTextColor);
}

/* ------------------------------------------------ */
/* 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 var(--sapList_BorderColor);
}

.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;
	border-bottom: none;
}

/* 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: var(--sapFontSmallSize);
	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;
		}
	}

	&.sapMITHBackgroundDesignTransparent {
		box-shadow: none;
		border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
	}

}

/* 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: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
			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: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
				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: normal;
				padding: @_sap_m_IconTabBar_Compact_TextOnlyTextPadding;

				.sapMITHShowSubItemsIcon {
					line-height: @_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight;
				}
			}
		}

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

	.sapMITBContentArrow {
		height: @_sap_m_IconTabBar_Compact_ContentArrowHeight;
	}

	.sapMITBHorizontal {
		height: @_sap_m_IconTabBar_Compact_HorizontalHeight;

		&.sapMITBFilter:first-child .sapMITBFilterWrapper {
			padding-left: 0;
		}

		&.sapMITBFilter .sapMITBFilterWrapper {
			height: @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight;
			padding: 0 0.5rem;

			.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: var(--sapShell_Navigation_Background);
	min-height: @_sap_m_IconTabBar_HeaderMinHeight;

	.sapMITBSelected .sapMITBContentArrow::after {
		background: var(--sapShell_Navigation_SelectedColor);
		height: var(--sapTab_Selected_Indicator_Dimension);
	}

	.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: var(--sapShell_Navigation_Background);
			}
		}

		.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: var(--sapFontHeaderFamily);
			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: var(--sapShell_Active_Background);
	}

	.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: var(--sapShell_Hover_Background);
				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;
		}
	}
}