@import "./InvisibleTextStyles.css";

:host {
    position: fixed;
    background: var(--sapGroup_ContentBackground);
    border-radius: var(--_ui5_popup_border_radius);
    min-height: 2rem;
    box-sizing: border-box;
}

:host([open]) {
	display: flex;
}

.ui5-popup-root {
    background: inherit;
    border-radius: inherit;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    outline: none;
}

.ui5-popup-root .ui5-popup-header-root {
    box-shadow: var(--_ui5_popup_header_shadow);
    border-bottom: var(--_ui5_popup_header_border);
}

.ui5-popup-content {
    color: var(--sapTextColor);
    flex: auto;
}

/* when the content is keyboard focusable scroll container */
.ui5-popup-content:focus {
    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
    border-radius: var(--_ui5_popup_border_radius);
}

.ui5-popup-footer-root {
    background: var(--sapPageFooter_Background);
    border-top: 1px solid var(--sapPageFooter_BorderColor);
    color: var(--sapPageFooter_TextColor);
}

.ui5-popup-header-root,
.ui5-popup-footer-root,
:host([header-text]) .ui5-popup-header-text {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui5-popup-header-root .ui5-popup-header-text {
	font-weight: var(--sapFontHeaderFamily);
	font-size: var(--sapFontHeader5Size);
	color: var(--sapPageHeader_TextColor);
}

.ui5-popup-content {
    overflow: auto;

    /* Consider how to make this top level */
    box-sizing: border-box;
}

:host([header-text]) .ui5-popup-header-text {
    min-height: var(--_ui5_popup_default_header_height);
    max-height: var(--_ui5_popup_default_header_height);
    line-height: var(--_ui5_popup_default_header_height);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: inline-flex;
    justify-content: var(--_ui5_popup_header_prop_header_text_alignment);
}

:host([header-text]) .ui5-popup-header-root {
	justify-content: var(--_ui5_popup_header_prop_header_text_alignment);
}

:host(:not([header-text])) .ui5-popup-header-text {
    display: none;
}

/*** Responsive paddings for the content***/
:host([media-range="S"]) .ui5-popup-content {
	padding: 1rem var(--_ui5_popup_content_padding_s);
}

:host([media-range="M"]) .ui5-popup-content,
:host([media-range="L"]) .ui5-popup-content {
	padding: 1rem var(--_ui5_popup_content_padding_m_l);
}

:host([media-range="XL"]) .ui5-popup-content {
	padding: 1rem var(--_ui5_popup_content_padding_xl);
}

.ui5-popup-header-root {
	background: var(--sapPageHeader_Background);
}

/*** Responsive paddings for the Header and Footer ***/
:host([media-range="S"]) .ui5-popup-header-root,
:host([media-range="S"]) .ui5-popup-footer-root {
	padding-left: var(--_ui5_popup_header_footer_padding_s);
	padding-right: var(--_ui5_popup_header_footer_padding_s);
}

:host([media-range="M"]) .ui5-popup-header-root,
:host([media-range="L"]) .ui5-popup-header-root,
:host([media-range="M"]) .ui5-popup-footer-root,
:host([media-range="L"]) .ui5-popup-footer-root {
	padding-left: var(--_ui5_popup_header_footer_padding_m_l);
	padding-right: var(--_ui5_popup_header_footer_padding_m_l);
}

:host([media-range="XL"]) .ui5-popup-header-root,
:host([media-range="XL"]) .ui5-popup-footer-root {
	padding-left: var(--_ui5_popup_header_footer_padding_xl);
	padding-right: var(--_ui5_popup_header_footer_padding_xl);
}

::slotted([slot="footer"]) {
	height: var(--_ui5_popup_footer_height);
}

::slotted([slot="footer"][ui5-bar][design="Footer"]) {
	border-top: none;
}

::slotted([slot="header"][ui5-bar]) {
	box-shadow: none;
}

::slotted([slot="footer"][ui5-toolbar]) {
	border: 0;
}

::slotted([slot="footer"][ui5-bar][design="Footer"]),
::slotted([slot="header"][ui5-bar][design="Header"]) {
	--_ui5_bar-start-container-padding-start: 0;
	--_ui5_bar-mid-container-padding-start-end: 0;
	--_ui5_bar-end-container-padding-end: 0;
}