:host {
	background-color: var(--sapPageHeader_Background);
	height: var(--_ui5_bar_base_height);
	width: 100%;
	box-shadow: var(--sapContent_HeaderShadow);
	display: block;
}

.ui5-bar-root {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	background-color: inherit;
	box-shadow: inherit;
	border-radius: inherit;
	min-width: 0;
	overflow: hidden;
}

.ui5-bar-root .ui5-bar-startcontent-container,
.ui5-bar-root .ui5-bar-endcontent-container,
.ui5-bar-root .ui5-bar-midcontent-container {
	display: flex;
	align-items: center;
}

.ui5-bar-root .ui5-bar-startcontent-container {
	flex: 0 1 auto;
}

.ui5-bar-root .ui5-bar-endcontent-container {
	flex: 0 0 auto;
}

.ui5-bar-root .ui5-bar-midcontent-container {
	justify-content: center;
	flex: 1 1 auto;
	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
	min-width: 0;
	overflow: hidden;
}

.ui5-bar-root .ui5-bar-startcontent-container {
	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
}

.ui5-bar-root .ui5-bar-content-container {
	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
							 + var(--_ui5_bar-end-container-padding-end)
						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
}

.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
	min-width: 0px;
	overflow: hidden;
	height: 100%;
}

.ui5-bar-root .ui5-bar-endcontent-container {
	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
}

:host([design="Footer"]){
	background-color: var(--sapPageFooter_Background);
	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
	box-shadow: none;
}

:host([design="Subheader"]){
	height: var(--_ui5_bar_subheader_height);
	margin-top: var(--_ui5_bar_subheader_margin-top);
}

:host([design="FloatingFooter"]){
	border-radius: var(--sapElement_BorderCornerRadius);
	background-color: var(--sapPageFooter_Background);
	box-shadow: var(--sapContent_Shadow1);
	border: none;
}

::slotted(*:not([hidden])) {
	margin: 0 0.25rem;
	display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}