ShellBar.css

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

/* ============================================================================
   HOST & CSS VARIABLES
   ============================================================================ */

:host(:not([hidden])) {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	background: var(--sapShellColor);
	box-sizing: border-box;
	box-shadow: inset 0 -.0625rem 0 0 var(--sapPageHeader_BorderColor);

	/* CSS variable overrides for ui5-button */
	--_ui5_button_base_height: var(--sapElement_Height);
	--_ui5_button_base_padding: 0.5625rem;
	--_ui5_button_base_min_width: 2.25rem;
	--_ui5-button-badge-diameter: 0.75rem;

	/* ShellBar-specific variables */
	--_ui5-shellbar_separator-color: var(--sapGroup_ContentBorderColor);
	--_ui5-shellbar-separator-height: 2rem;
	--_ui5_shellbar_search_field_width: 25rem;

	--ui5_shellbar_gap: 0.5rem;
}

/* ============================================================================
   ROOT CONTAINER
   ============================================================================ */

.ui5-shellbar-root {
	display: flex;
	align-items: center;
	height: var(--_ui5_shellbar_root_height);
	position: relative;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	font-weight: normal;
}

/* ============================================================================
   SLOTTED BUTTONS (General Styles) Assistant and Start Button slots
   ============================================================================ */

::slotted([ui5-button]:not([slot^="content"])),
::slotted([ui5-toggle-button]:not([slot^="content"])) {
	height: 2.25rem;
	width: 2.25rem;
	padding: 0;
	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
	background: var(--sapButton_Lite_Background);
	color: var(--sapShell_TextColor);
	box-sizing: border-box;
	border-radius: var(--_ui5_shellbar_button_border_radius);
	font-weight: bold;
}

/* Button States - Hover */
::slotted([ui5-button]:not([slot^="content"]):not([disabled]):hover),
::slotted([ui5-toggle-button]:not([slot^="content"]):not([disabled]):hover) {
	background: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	color: var(--sapShell_TextColor);
}

/* Button States - Active */
::slotted([ui5-button]:not([slot^="content"]):not([disabled])[active]),
::slotted([ui5-toggle-button]:not([slot^="content"]):not([disabled])[active]) {
	background: var(--sapShell_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	color: var(--_ui5_shellbar_button_active_color);
}

/* Button States - Focus */
::slotted([ui5-button]:not([slot^="content"])),
::slotted([ui5-toggle-button]:not([slot^="content"])) {
	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
}

/* ============================================================================
   CONTENT SLOT BUTTONS
   ============================================================================ */

::slotted([ui5-button][slot^="content"]),
::slotted([ui5-toggle-button][slot^="content"]) {
	height: 2.25rem;
	min-width: 2.25rem;
}

/* ============================================================================
   ACTION BUTTONS (Items & Internal Actions)
   ============================================================================ */

.ui5-shellbar-action-button {
	color: var(--sapShell_TextColor);
}

.ui5-shellbar-action-button:hover {
	color: var(--sapShell_TextColor);
}

.ui5-shellbar-action-button[active] {
	color: var(--_ui5_shellbar_button_active_color);
}

::slotted([ui5-toggle-button][slot="assistant"]) {
	color: var(--sapShell_TextColor);
}

::slotted([ui5-toggle-button][slot="assistant"]:hover) {
	color: var(--sapShell_TextColor);
}

::slotted([ui5-toggle-button][slot="assistant"][active]) {
	color: var(--_ui5_shellbar_button_active_color);
}

/* ============================================================================
   START AREA (Start Button, Branding)
   ============================================================================ */

.ui5-shellbar-start-button {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ui5-shellbar-branding-area {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/* ============================================================================
   OVERFLOW CONTAINER
   ============================================================================ */

.ui5-shellbar-overflow-container {
	/* makes the container grow on the left side thus preventing search from flickering */
	flex-direction: row-reverse;
	height: 100%;
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: visible;
	position: relative;
}

.ui5-shellbar-overflow-container-inner {
	display: flex;
	align-items: center;
	justify-content: end;
	flex-shrink: 0;
	min-width: 100%;
}

/* ============================================================================
   SEARCH AREA
   ============================================================================ */

.ui5-shellbar-search-field-area {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	margin-left: auto;
	/* goes to the most right when no content is present */
}

/* this width is only applied when not in full screen mode as 
in full screen the search fills the available space */
:host([show-search-field]:not([show-full-width-search])) ::slotted([slot="searchField"]),
/* Search field displays in full mode if there's not enough space in bar.
Once in full screen mode the search field is rendered in another DOM. 
To account for correct measurements in overflow, we should keep the min width 
of the search field container in the bar even when the search is in full mode. */
:host([show-full-width-search]) .ui5-shellbar-search-field-area {
	min-width: var(--_ui5_shellbar_search_field_width);
}

/* ============================================================================
   CONTENT AREA (Items, Spacer, Separator)
   ============================================================================ */

.ui5-shellbar-content-area {
	flex-grow: 1;
	display: flex;
	align-items: center;
}

.ui5-shellbar-content-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.ui5-shellbar-spacer {
	flex-grow: 1;
	height: 1px;
	flex-basis: 1rem;
	flex-shrink: 1;
}

.ui5-shellbar-separator {
	flex-grow: 0;
	flex-shrink: 0;
	height: var(--_ui5-shellbar-separator-height);
	width: 1px;
	background-color: var(--_ui5-shellbar_separator-color);
}

/* ============================================================================
   CUSTOM ITEMS
   ============================================================================ */

.ui5-shellbar-custom-item {
	/* having width here is important to ensure item can be measured even when it is in overflow */
	width: 2.25rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.ui5-shellbar-custom-item.ui5-shellbar-hidden {
	display: none;
}


/* ============================================================================
   ACTION BUTTONS (Notifications, Assistant, Profile)
   ============================================================================ */

.ui5-shellbar-action-button {
	white-space: initial;
	overflow: initial;
	text-overflow: initial;
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	width: 2.25rem;
	height: 2.25rem;
	box-sizing: border-box;
}

.ui5-shellbar-action-button > [ui5-button-badge][slot="badge"][design="OverlayText"] {
	top: var(--_ui5-shellbar-badge-offset, 0);
	margin: var(--_ui5-shellbar-badge-margin, -0.5rem);
}

.ui5-shellbar-image-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: auto;
	box-sizing: border-box;
	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
	border-radius: var(--_ui5_shellbar_image_button_border_radius);
}

.ui5-shellbar-assistant-button {
	display: flex;
	align-items: center;
}

::slotted([ui5-toggle-button][slot="assistant"]) {
	margin-inline-start: 0;
}

::slotted([ui5-toggle-button][slot="assistant"][pressed]),
::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
	color: var(--sapShell_Assistant_ForegroundColor);
}

slot[name="profile"] {
	min-width: 0;
}

::slotted([ui5-avatar][slot="profile"]) {
	display: block;
	width: 2rem;
	height: 2rem;
	min-width: 0;
	min-height: 2rem;
	font-size: var(--_ui5_avatar_fontsize_XS);
	font-weight: normal;
}

/* ============================================================================
   FULL-SCREEN SEARCH OVERLAY
   ============================================================================ */

.ui5-shellbar-search-full-width-wrapper {
	position: absolute;
	bottom: 0.0625rem;
	left: 0;
	background: var(--sapShellColor);
	height: 100%;
	width: 100%;
	z-index: 1001;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 1rem;
}

.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
	height: 2.25rem;
	width: 100%;
	flex: 1;
}

.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
	max-width: unset;
	width: 100%;
}

/* ============================================================================
   BREAKPOINTS
   ============================================================================ */

/* Responsive padding per breakpoint */
:host([breakpoint-size="S"]) {
	padding: 0 1rem;
}

:host([breakpoint-size="M"]) {
	padding: 0 2rem;
}

:host([breakpoint-size="L"]) {
	padding: 0 2rem;
}

:host([breakpoint-size="XL"]) {
	padding: 0 3rem;
}

:host([breakpoint-size="XXL"]) {
	padding: 0 3rem;
}

/* Search overlay padding per breakpoint */
:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
	padding: 0 1rem;
}

:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
	padding: 0 2rem;
}

/* ============================================================================
   Utilities (Keep these at the end of the file to avoid specificity issues)
   ============================================================================ */

.ui5-shellbar-gap-start {
	margin-inline-start: var(--ui5_shellbar_gap);
}

.ui5-shellbar-gap-end {
	margin-inline-end: var(--ui5_shellbar_gap);
}

.ui5-shellbar-hidden {
	display: none !important;
}