@import "./TabSemanticIcon.css";

.ui5-tab-strip-item {
	height: var(--_ui5_tc_header_height);
	color: var(--_ui5_tc_headerItem_color);
	cursor: pointer;
	padding: 0 var(--_ui5_tc_headeritem_padding);
	font-size: var(--sapFontSmallSize);
	font-weight: var(--_ui5_tc_headeritem_text_font_weight);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 2rem;
	max-width: 100%;
	box-sizing: border-box;
	outline: none;
}

.ui5-tab-strip-item[data-moving] {
	background-color: var(--ui5_tc_header_active_background_color);
}

.ui5-tab-strip-itemText {
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui5-tc__separator[hidden],
.ui5-tab-strip-item[hidden],
.ui5-tab-strip-item--textOnly[hidden],
.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden],
.ui5-tab-strip-design-description {
	display: none;
}

.ui5-tab-strip-itemContent {
	display: flex;
	height: 100%;
	min-width: 0;
	justify-content: center;
	flex-direction: column;
	border: var(--_ui5_tc_headerItemContent_default_focus_border);
	border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
	transition: var(--_ui5_tc_headerItem_transition);
}

.ui5-tab-expand-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
	background-color: var(--_ui5_tc_header_background);
	padding-inline-end: 0.188rem;
}

.ui5-tab-expand-button > [ui5-button] {
	height: 1.5rem;
	min-width: 1.5rem;
	margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
	--_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
	--_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
}

.ui5-tab-expand-button > [ui5-button]:not([active]) {
	color: var(--_ui5_tc_headerItem_color);
}

.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button]:not([active]) {
	color: var(--_ui5_tc_headerItem_text_selected_color);
}

.ui5-tab-expand-button > [ui5-button]:hover:not([active]) {
	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
}

.ui5-tab-expand-button-separator {
	display: var(--_ui5_tc_headerItem_expand_button_separator_display);
	position: relative;
	width: 0.0625rem;
	right: -0.0625rem;
	height: 0.625rem;
	background: var(--sapTextColor);
	margin-inline-start: 0.0625rem;
	z-index: 2;
	margin-left: 0.625rem;
}

.ui5-tab-expand-button:hover {
	z-index: 2;
}

.ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
	background: var(--_ui5_tc_headerItem_text_selected_color);
}

.ui5-tab-single-click-icon {
	margin-inline-start:  var(--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
	color: var(--_ui5_tc_headerItem_text_selected_color);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
	color: var(--_ui5_tc_headerItem_text_selected_color);
}

.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText {
	display: flex;
	align-items: center;
}

.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon {
	display: flex;
}

.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
	color: var(--_ui5_tc_headerItem_color);
}

/* hover effects */
.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--twoClickArea):not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative):hover,
.ui5-tab-strip-item--twoClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative) .ui5-tab-strip-itemContent:hover,
.ui5-tab-strip-item--singleClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled):hover .ui5-tab-single-click-icon > [ui5-icon] {
	color: var(--_ui5_tc_headerItem_text_hover_color);
}


/* selection indicator */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-bottom: var(--sapTab_Selected_Indicator_Dimension) solid var(--sapTab_ForegroundColor);
	border-radius: var(--_ui5_tc_headerItemContent_border_radius);
	background-color: var(--_ui5_tc_headerItemContent_border_bg);
	height: var(--_ui5_tc_headerItemContent_border_height);
}

/* selection indicator offset in text only and mixed modes */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
	left: var(--_ui5_tc_headeritem_padding);
	right: var(--_ui5_tc_headeritem_padding);
}

.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
	bottom: -1rem;
}

.ui5-tab-strip-item--disabled {
	cursor: default;
	opacity: var(--sapContent_DisabledOpacity);
}

:host([desktop]) .ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before,
.ui5-tab-strip-item--textOnly:focus-visible:not([data-moving]) .ui5-tab-strip-itemText::before,
:host([desktop]) .ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before,
.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus-visible:not([data-moving]) .ui5-tab-strip-itemText::before {
	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
	content: "";
	pointer-events: none;
	position: absolute;
	border: var(--_ui5_tc_headerItem_focus_border);
	left: var(--_ui5_tc_headerItem_text_focus_border_offset_left);
	right: var(--_ui5_tc_headerItem_text_focus_border_offset_right);
	top: var(--_ui5_tc_headerItem_text_focus_border_offset_top);
	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
}

:host([desktop]) .ui5-tab-strip-item--mixedMode:focus:not([data-moving]) .ui5-tab-strip-itemContent::before,
.ui5-tab-strip-item--mixedMode:focus-visible:not([data-moving]) .ui5-tab-strip-itemContent::before {
	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
	content: "";
	pointer-events: none;
	position: absolute;
	border: var(--_ui5_tc_headerItem_focus_border);
	left: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_left);
	right: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right);
	top: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top);
	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
}

:host([desktop]) .ui5-tab-strip-item--withIcon:focus:not([data-moving]) .ui5-tab-strip-item-icon-outer::before,
.ui5-tab-strip-item--withIcon:focus-visible:not([data-moving]) .ui5-tab-strip-item-icon-outer::before {
	content: "";
	pointer-events: none;
	position: absolute;
	border: var(--_ui5_tc_headerItem_focus_border);
	left: var(--_ui5_tc_headerItem_focus_border_offset);
	right: var(--_ui5_tc_headerItem_focus_border_offset);
	top: var(--_ui5_tc_headerItem_focus_border_offset);
	bottom: var(--_ui5_tc_headerItem_focus_border_offset);
	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
}

/*** Icon and text Tab styles ***/

.ui5-tab-strip-item-icon-outer {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border: var(--_ui5_tc_headerItemIcon_border);
	border-radius: 50%;
	margin-inline-end: 0.25rem;
	height: var(--_ui5_tc_item_icon_circle_size);
	width: var(--_ui5_tc_item_icon_circle_size);
	pointer-events: none;
	background-color: var(--sapTab_Background);
}

.ui5-tab-strip-item-icon {
	width: var(--_ui5_tc_item_icon_size);
	height: var(--_ui5_tc_item_icon_size);
	color: var(--sapTab_IconColor);
	text-shadow: var(--sapContent_TextShadow);
	pointer-events: none;
}

.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
	background-color: var(--sapTab_Selected_Background);
}

.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
	color: var(--sapTab_Selected_IconColor);
	text-shadow: none;
}

.ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
	display: flex;
}

.ui5-tab-strip-itemAdditionalText-hidden {
	visibility: hidden;
	margin-top: 1.25rem;
}

.ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
	display: inline;
}

.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
	margin-block-start: var(--_ui5_tc_item_add_text_margin_top);
}

/*** END Icon and text Tab styles ***/

/*** TextOnly Tab styles ***/
.ui5-tab-strip-item--textOnly,
.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline {
	font-size: var(--sapFontSize);
	height: var(--_ui5_tc_item_text_only_height);
	display: flex;
	align-items: center;
	line-height: var(--_ui5_tc_item_text_line_height);
}

.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
	padding: 0 0.188rem;
}

.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--withAdditionalText {
	justify-content: flex-start;
	height: var(--_ui5_tc_item_text_only_with_additional_text_height);
}

/*** END TextOnly Tab styles ***/

/*** Mixed Mode Tab styles ***/
.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText,
.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
	display: inline-block;
	vertical-align: middle;
}

.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent {
	flex-direction: row;
	align-items: center;
}

.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
	font-size: 1.5rem;
	margin-inline-end: 0.5rem;
}

.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText {
	color: var(--_ui5_tc_mixedMode_itemText_color);
	font-family: var(--_ui5_tc_mixedMode_itemText_font_family);
	font-size: var(--_ui5_tc_mixedMode_itemText_font_size);
	font-weight: var(--_ui5_tc_mixedMode_itemText_font_weight);
}

/*** Semantic states ***/
.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer {
	color: var(--sapTab_Positive_TextColor);
	border-color: var(--sapTab_Positive_ForegroundColor);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
	color: var(--sapTab_Positive_Selected_TextColor);
}

.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon {
	color: var(--sapTab_Positive_IconColor);
}

.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
	background-color: var(--sapTab_Positive_Selected_Background);
	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
}

.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
	color: var(--sapTab_Positive_Selected_IconColor);
}

.ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer::after {
	border-color: var(--_ui5_tc_headerItem_neutral_border_color);
	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
	color: var(--sapTab_Neutral_Selected_TextColor);
}

.ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
	border-color: var(--sapTab_Positive_ForegroundColor);
	background-color: var(--_ui5_tc_headerItem_positive_border_bg);
}

.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer {
	color: var(--sapTab_Negative_TextColor);
	border-color: var(--sapTab_Negative_ForegroundColor);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
	color: var(--sapTab_Negative_Selected_TextColor);
}

.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon {
	color: var(--sapTab_Negative_IconColor);
}

.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
	background-color: var(--sapTab_Negative_Selected_Background);
}

.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
	color: var(--sapTab_Negative_Selected_IconColor);
}

.ui5-tab-strip-item.ui5-tab-strip-item--negative .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after {
	border-color: var(--sapTab_Negative_ForegroundColor);
	background-color: var(--_ui5_tc_headerItem_negative_border_bg);
}

.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer {
	color: var(--sapTab_Critical_TextColor);
	border-color: var(--sapTab_Critical_ForegroundColor);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
	color: var(--sapTab_Critical_Selected_TextColor);
}

.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon {
	color: var(--sapTab_Critical_IconColor);
}

.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
	background-color: var(--sapTab_Critical_Selected_Background);
}

.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
	color: var(--sapTab_Critical_Selected_IconColor);
}

.ui5-tab-strip-item.ui5-tab-strip-item--critical .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after {
	border-color: var(--sapTab_Critical_ForegroundColor);
	background-color: var(--_ui5_tc_headerItem_critical_border_bg);
}

.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
	color: var(--sapTab_Neutral_TextColor);
	border-color: var(--sapTab_Neutral_ForegroundColor);
}

.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon {
	color: var(--sapTab_Neutral_IconColor);
}

.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
	background-color: var(--sapTab_Neutral_Selected_Background);
}

.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
	color: var(--sapTab_Neutral_Selected_IconColor);
}

.ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon::after {
	border-color: var(--_ui5_tc_headerItem_neutral_border_color);
	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
}

.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
	padding: 0;
}

.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
	padding: 0 0.188rem;
	color: var(--_ui5_tc_headerItem_additional_text_color);
	font-weight: var(--_ui5_tc_headerItem_additional_text_font_weight);
}

.ui5-tab-strip-item.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
	color: var(--_ui5_tc_headerItem_color);
}