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

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

// Filter text
@_sap_m_IconTabBar_FilterTextLineHeight: 0.9375rem;

// Separator
@_sap_m_IconTabBar_SeparatorHeight: 3rem;
@_sap_m_IconTabBar_SeparatorMargin: 0 0.25rem;
@_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(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
@_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;

// ========== 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: @sapFontSize;
			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-self: center;

	.sapMBtnIcon {
		margin: 0;
		font-size: 1rem;
	}
}

.sapMITBFilterExpandBtn,
.sapMITBFilterExpandBtn .sapMBtnInner,
.sapMITBFilterExpandBtn .sapMBtnIcon {
	box-sizing: content-box;
	overflow: visible;
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
}

.sapUiSizeCompact .sapMITBFilterExpandBtn .sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
	padding-left: 0;
	padding-right: 0;
}

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

	.sapUiIcon {
		cursor: default;
	}

	.sapMITBFilterIcon {
		border-color: @sapUiGroupTitleTextColor;
	}
}

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

.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,
	.sapMBtn.sapMITHDragOver .sapMBtnInner{
		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 .sapMBtn .sapMBtnTransparent {
		.sapUiIcon {
			color: @_sap_m_IconTabBar_ShellSelectedTextColor;
		}
	}

	.sapMBtn .sapMBtnTransparent {
		color: @_sap_m_IconTabBar_ShellTextColor;
		background-color: transparent;
		border-color: transparent;

		.sapUiIcon {
			color: @_sap_m_IconTabBar_ShellTextColor;
		}
	}

	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent {
		background: @sapUiShellHoverBackground;
		border-color: transparent;
	}

	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnTransparent.sapMBtnActive {
		outline-color: @_sap_m_IconTabBar_ShellButtonOutlineColor;
		background: @sapUiShellActiveBackground;
	}

	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):focus {
		outline-color: @_sap_m_IconTabBar_ShellButtonOutlineColor;
	}

	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
		background: @sapUiShellNavigationHoverBackground;
		border-color: @sapUiShellNavigationHoverBackground;

	}

	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
		color: @sapUiShellNavigationSelectedColor;
		border-color: @sapUiShellNavigationSelectedColor;
	}

	.sapMBtn.sapMBtnDisabled {
		opacity: @_sap_m_IconTabBar_DisabledOpacity;
	}

	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnTransparent.sapMBtnActive {
		outline-color:@sapUiShellNavigationActiveBackground;
		background: @sapUiShellNavigationActiveBackground;
		border-color:@sapUiShellNavigationActiveBackground;
	}

	.sapMITBSelected .sapMBtn .sapMBtnTransparent .sapUiIcon {
		color: @sapUiShellNavigationSelectedColor;
	}

	.sapMBtn .sapMBtnTransparent.sapMBtnActive {
		.sapUiIcon {
			color: @sapUiShellNavigationActiveTextColor;
		}
	}

	.sapMBtnActive {
		.sapMITBSelected .sapMBtn .sapMBtnTransparent .sapUiIcon {
			color: @sapUiShellNavigationActiveTextColor;
		}
		.sapMBtn .sapMBtnTransparent .sapUiIcon {
			color: @sapUiShellNavigationActiveTextColor;
		}
	}

	.sapMBtn:focus>.sapMFocusable.sapMBtnInner.sapMBtnHoverable {
		outline-color: @sapUiShellNavigationTextColor;
	}

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