@import "./TabSemanticIcon.css";
@import "./InvisibleTextStyles.css";

.ui5-tab-overflow-item {
	color: var(--_ui5_tc_overflowItem_default_color);
}

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

.ui5-tab-overflow-item[hidden] {
	display: none;
}

.ui5-tab-overflow-item--positive:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
	color: var(--_ui5_tc_overflowItem_positive_color);
}

.ui5-tab-overflow-item--negative:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
	color: var(--_ui5_tc_overflowItem_negative_color);
}

.ui5-tab-overflow-item--critical:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
	color: var(--_ui5_tc_overflowItem_critical_color);
}

.ui5-tab-overflow-item[active] .ui5-tab-overflow-itemContent {
	color: var(--sapList_Active_TextColor);
}

.ui5-tab-overflow-itemContent {
	display: flex;
	align-items: center;
	position: relative;
	height: var(--_ui5_tc_item_text);
	pointer-events: none;
	font-size: 0.875rem;
}

.ui5-tab-overflow-itemContent-wrapper {
	padding-inline-start: calc((calc(var(--_ui5-tab-indentation-level) + var(--_ui5-tab-level-has-icon) * var(--_ui5_tc_overflowItem_additional, 0))) * (var(--_ui5_tc_overflowItem_indent) + var(--_ui5_tc_overflowItem_extra_indent)));
}

.ui5-tab-overflow-item  .ui5-tab-semantic-icon {
	position: absolute;
	inset-inline-start: -1.25rem;
} 

.ui5-tab-overflow-item--selectedSubTab {
	background-color: var(--sapList_SelectionBackgroundColor);
}

.ui5-tab-overflow-item [ui5-icon]:not(.ui5-tab-semantic-icon) {
	width: 1.375rem;
	height: 1.375rem;
	padding-inline-end: 0.75rem;
	color: var(--_ui5_tc_overflowItem_current_color);
}

/*TODO checkout out how li is implemented */
.ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
	inset: var(--_ui5_tc_overflowItem_focus_offset);
}

.ui5-tab-container-responsive-popover::part(content) {
	padding: 0;
}