@import "./InvisibleTextStyles.css";

/* ============================= */
/* Global Base parameters        */
/* ============================= */
:host(:not([hidden])) {
	display: block;
	width: 100%;
}

.ui5-tc-root {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	font-family: var(--sapFontHeaderFamily);
	font-size: 1rem;
}

.ui5-tc__header {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--_ui5_tc_header_background);
	--ui5_tc_header_active_background_color: var(--_ui5_tc_header_background);
	height: var(--_ui5_tc_header_height);
	box-shadow: var(--_ui5_tc_header_box_shadow);
	box-sizing: border-box;
}

:host([tabs-placement="Bottom"]) .ui5-tc__header {
	border-top: var(--_ui5_tc_header_border_bottom);
}

:host([header-background-design="Transparent"]) .ui5-tc__header {
	background-color: transparent;
	--ui5_tc_header_active_background_color: transparent;
	box-shadow: none;
	border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
}

:host([header-background-design="Translucent"]) .ui5-tc__header {
	background-color: var(--_ui5_tc_header_background_translucent);
	--ui5_tc_header_active_background_color: var(--_ui5_tc_header_background_translucent);
}

.ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
	height: var(--_ui5_tc_header_height_text_only);
}

.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditionalText.ui5-tc--standardTabLayout .ui5-tc__header {
	height: var(--_ui5_tc_header_height_text_with_additional_text);
}

.ui5-tc__tabStrip {
	flex: 1;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
}

.ui5-tc__separator:focus {
	outline: none;
}

.ui5-tc__overflow {
	flex: 0 0 0;
}

.ui5-tc__overflow.ui5-tc__overflow--end {
	padding-inline-start: 0.188rem;
	margin-inline-end: 1rem;
}

.ui5-tc__overflow.ui5-tc__overflow--start {
	margin-inline-start: 1rem;
}

.ui5-tc__overflow[hidden] {
	display: none;
}

.ui5-tc__overflow > [ui5-button] {
	border-radius: 0.75rem;
	height: 1.5rem;
	--_ui5_button_focused_border_radius: 0.75rem;
}

.ui5-tc__overflow > [ui5-button]:not([active]) {
	color: var(--_ui5_tc_overflow_text_color);
}

.ui5-tc__overflow > [ui5-button]:not([active]):hover {
	color: var(--_ui5_tc_overflow_text_color);
}

/*TODO checkout out how button is implemented */
.ui5-tc__overflow > [ui5-button][focused] {
	outline-offset: 0.125rem;
	--_ui5_button_focused_border: none;
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

.ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
	height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
}

.ui5-tc__content {
	position: relative;
	display: flex;
	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
	background-color: var(--_ui5_tc_content_background);
	border-bottom: var(--_ui5_tc_content_border_bottom);
	box-sizing: border-box;
}

:host([tabs-placement="Bottom"]) .ui5-tc__content {
	border-top: var(--_ui5_tc_content_border_bottom);
}

:host([content-background-design="Transparent"]) .ui5-tc__content {
	background-color: transparent;
}

:host([content-background-design="Translucent"]) .ui5-tc__content {
	background-color: var(--_ui5_tc_content_background_translucent);
}

:host([header-background-design="Transparent"]) .ui5-tc__content {
	border-bottom: none;
}

.ui5-tc__content--collapsed {
	display: none;
}

.ui5-tc--transparent .ui5-tc__content {
	background-color: transparent;
}

.ui5-tc__contentItem {
	max-height: 100%;
	display: flex;
	flex-grow: 1;
	overflow: auto;
}

.ui5-tc__contentItem[hidden] {
	display: none;
}

/*** Responsive paddings ***/
.ui5-tc__header {
	padding: 0;
}

.ui5-tc__content {
	padding: 1rem;
}

:host([media-range="M"]) .ui5-tc__header,
:host([media-range="L"]) .ui5-tc__header {
	padding: 0 1rem;
}

:host([media-range="M"]) .ui5-tc__content,
:host([media-range="L"]) .ui5-tc__content {
	padding: 1rem 2rem;
}

:host([media-range="XL"]) .ui5-tc__header {
	padding: 0 2rem;
}

:host([media-range="XL"]) .ui5-tc__content {
	padding: 1rem 3rem;
}

.ui5-tc-root.ui5-tc--noTabSelected .ui5-tc__content {
	padding: 0;
}