/******** fiori search related css styles ********/

@searchPhoneSize: ~"(max-width: 767px)";
@searchTabletSize: ~"(min-width: 768px) and (max-width: 1150px)";
@searchLargeTabletSize: ~"(min-width: 959px) and (max-width: 1150px)";
@searchNotPhoneSize: ~"(min-width: 768px)";
@searchDesktopSize: ~"(min-width: 1151px)"; // do not add 'and (max-width: 1500px) here, result item attributes become hidden for width > 1500'
@searchLargeDesktopSize: ~"(min-width: 1501px)";

.sapUshellSearchFacetList {
    padding-bottom: 1rem;
    min-height: 100%;
    box-sizing: border-box;
    background-color: @sapUiListBackground;
}

/* .sapUshellSearchFacetFilter {  // deprecated
    padding-bottom: 1rem;
    min-height: 100%;
    box-sizing: border-box;
    background-color: @sapUiListBackground;
}*/

.sapUshellSearchFacetListShowAllFilterBtn {
    display: block;
    margin: 1rem auto 0 auto;
}

/* .sapUshellSearchFacetFilterShowAllFilterBtn {  // deprecated
    display: block;
    margin: 1rem auto 0 auto;
} */

/* filter bar */
.sapUshellSearchFilterContextualBar {
    font-size: 0.875rem;
    margin-top: 0;
}
.sapUshellSearchFilterContextualBar .sapUshellSearchFilterText {
    font-style: italic;
    width: ~"calc(100% - 3rem)";
}
.sapUshellSearchFilterContextualBar .sapUshellSearchFilterResetButton {
    color: @sapUiContentContrastTextColor;
}

/* context bar - breadcrumb + count */
.sapElisaSearchContextBarContainer {
    width: 100%;
}
.sapElisaSearchContextBarContent {
    width: 100%;
}

.sapElisaNoResultScreen {
    padding-top: 5rem;
}

/******** MAIN TOOLBAR ********/
.searchDataSourceTabStripBar .sapMITBContainerContent {
    border-width: 0px;
    border-style: solid;
}

.sapUshellSearchBarValueHelp {
    display: none; /* may be we need to move 'download button/feature' to actions menu for 'value help' mode */
}

.searchDataSourceTabStripBar {
    border-bottom-width: 0px;
    border-bottom-style: solid;
}

.sapElisaSearchGenericButtonsToolbar.sapMTB.sapMTBStandard {
    border-bottom-width: 0px;
    border-bottom-style: solid;
    background-color: transparent;
}

.sapElisaGridTile {
    .sapMGTHdrContent {
        height: 0.5rem !important;
    }
    .sapMGTContent {
        height: 8rem !important;
    }
}

[id$="-Breadcrumbs"].sapElisaBreadcrumbs {
    width: 100% !important;
}

.sapUshellSearchTotalCountBreadcrumbs {
    .sapMBreadcrumbsItem .sapMBreadcrumbsCurrentLocation {
        font-weight: bold;
        padding-left: 0.25rem;
    }
    ol li:nth-last-child(2) .sapMBreadcrumbsSeparator {
        display: none;
    }
}
.sapElisaBreadcrumbsFolderContainerVbox {
    width: ~"calc(100% - 10rem)";
}
.sapElisaSearchContextBarContainer .sapElisaSearchContextBarFolderMode {
    background-color: transparent;
}
/******** tabstrips for switching between categories/connectors (sap.m.IconTabBar) ********/
.searchDataSourceTabStripBar {
    /* tab bar */
    @media (max-width: 500px) {
        /* hide tab bar when we have limited horizontal space */
        display: none;
        width: 1rem;
    }
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* tab bar - top container */
    .sapMITH {
        padding: 0;
        padding-right: 0.25rem;
        border-bottom: 0;
        box-shadow: none;
        line-height: 1.25rem;
        /* tab bar (does not include overflow/mode-dropdown-button) */
        .sapMITBHead {
            padding: 0;
        }
    }
    /* tab bar - tab , inner container */
    .sapMITBHead {
        height: 1.9rem;
    }
    /* tab bar - tab , inner container */
    /* .sapMITBItem {
        padding-left: 0.025rem;
        padding-right: 0.05rem;
    } */
    /* tab bar - tab , inner container */
    .sapMITBFilterWrapper {
        padding-top: 0.65rem;
        padding-left: 0.2rem;
        height: 0.8rem;
        /* tab bar - line on the bottom of the tab */
        .sapMITBContentArrow {
            margin-top: 0.05rem !important;
            height: 0.25rem !important;
        }
    }
    /* tab bar - container of line on the bottom of the tab */
    .sapMITBVertical.sapMITBFilter:not(.sapMITHUnselectable) .sapMITBText.sapMITBBadgeHolder {
        padding: 0;
        margin: 0;
    }
    /* tab text containers (not: more dropdown-button) */
    .sapMITBInLine.sapMITBTextOnly .sapMITBHead .sapMITBVertical.sapMITBFilter:not(.sapMITHUnselectable) {
        height: 1.9rem;
    }
    /* tab text containers (not: more dropdown-button) */
    .sapMITBInLine.sapMITBTextOnly .sapMITBHead .sapMITBVertical.sapMITBFilter.sapMITHUnselectable {
        height: 1.9rem;
    }
    /* tab bar - tab, 'more' */
    .sapMITHEndOverflow .sapMITHOverflowVisible {
        margin-top: 0.2rem;
        margin-bottom: 0;
        padding-top: 0.1rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .sapMITHEndOverflow .sapMITBFilterWrapper {
        padding-top: 0.2rem;
    }
    .sapMITHEndOverflow .sapMITBText {
        margin-top: 0.2rem;
    }
    /* container of IconTabBar is not in use */
    .sapMITBContainerContent .sapMITBContent {
        display: none;
    }
    /* adjust look&feel of text to how it shall look on toolbars */
}
.searchDataSourceTabStripBar > [id$="-header"].sapMITH {
    background-color: transparent;
}
.searchDataSourceTabStripBar > [id$="-header"] .sapMITHEndOverflow {
    background-color: transparent;
}
.searchDataSourceTabStripBar > [id$="-header-overflow"] {
    background-color: transparent !important;
}
.searchDataSourceTabStripBar .sapMITHEndOverflow {
    // oberflow / 'more'
    @media @searchPhoneSize {
        display: none;
    }
}
.searchDataSourceTabStripBar {
    // tab bar - default
    @media @searchPhoneSize {
        width: 0rem;
    }
    @media @searchTabletSize {
        width: 20rem;
    }
    @media @searchLargeTabletSize {
        width: 28rem;
    }
    @media @searchDesktopSize {
        width: 38rem;
    }
    @media @searchLargeDesktopSize {
        width: 44rem;
    }
}

.searchDataSourceTabStripBar:not(.sapUshellSearchBarHasCustomButtons) {
    // tab bar - with custom toolbar
    @media @searchPhoneSize {
        width: 0rem;
    }
    @media @searchTabletSize {
        width: 25rem;
    }
    @media @searchLargeTabletSize {
        width: 42rem;
    }
    @media @searchDesktopSize {
        width: 45rem;
    }
    @media @searchLargeDesktopSize {
        width: 58rem;
    }
}

.searchDataSourceTabStripBar.searchDataSourceTabStripBarMediumItemsTextLength:not(
        .sapUshellSearchBarHasCustomButtons
    ) {
    // tab bar - with custom toolbar
    @media @searchPhoneSize {
        width: 0rem;
    }
    @media @searchTabletSize {
        width: 18rem;
    }
    @media @searchLargeTabletSize {
        width: 25rem;
    }
    @media @searchDesktopSize {
        width: 35rem;
    }
    @media @searchLargeDesktopSize {
        width: 40rem;
    }
}

.searchDataSourceTabStripBar.sapUshellSearchBarHasCustomButtons.searchDataSourceTabStripBarTinyItemsTextLength {
    // tab bar - with custom toolbar and total width of tabbar items consuming extremely 'tiny' width (i.e. only one tab or total lenght of tab texts/labels tiny (short DS labels)
    @media @searchPhoneSize {
        width: 0rem;
    }
    @media @searchTabletSize {
        width: 12rem;
    }
    @media @searchLargeTabletSize {
        width: 14rem;
    }
    @media @searchDesktopSize {
        width: 19rem;
    }
    @media @searchLargeDesktopSize {
        width: 22rem;
    }
}

.searchDataSourceTabStripBar.sapUshellSearchBarHasCustomButtons.searchDataSourceTabStripBarMediumItemsTextLength {
    // tab bar - with custom toolbar and total width of tabbar items consuming extremely 'tiny' width (i.e. only one tab or total lenght of tab texts/labels tiny (short DS labels)
    @media @searchPhoneSize {
        width: 0rem;
    }
    @media @searchTabletSize {
        width: 14rem;
    }
    @media @searchLargeTabletSize {
        width: 17rem;
    }
    @media @searchDesktopSize {
        width: 23rem;
    }
    @media @searchLargeDesktopSize {
        width: 27rem;
    }
}

/***************** OVERALL LAYOUT **************/

.sapUshellSearchContainer .sapUiFixFlexRow > .sapUiFixFlexFixed {
    overflow-y: auto;
    overflow-x: auto;
    width: 0;
    opacity: 0;
    visibility: hidden;

    &.sapUshellSearchFilterbar {
        width: 18rem;
        opacity: 1;
        visibility: visible;
        border-right: 1px solid @sapUiListBorderColor;
        overflow-x: hidden;
    }
}

.sapUshellSearchContainer .sapUiFixFlexRow > .sapUiFixFlexFixed.sapUshellSearchFacetAnimation {
    transition:
        width 400ms,
        opacity 400ms,
        visibility 400ms;
}

.sapUshellSearchContainer {
    width: 100%;
    height: 100%;
    background-color: @sapUiListHeaderBackground; /* @sapUiShellBackground */
}

.sapUshellSearchContainer .sapUiFixFlexFlexible {
    overflow-y: auto;
    overflow-x: auto;
}

.sapUshellSearchTotalCountBar {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1rem;
    margin-right: 1rem;
    /* margin: 1rem 1rem 0.5rem 1rem; */
    background-color: transparent !important;
    label {
        line-height: 2rem;
        font-size: 0.875rem;
    }
}

.sapUshellSubContainer > div {
    width: 100%;
}

.sapUshellShellOvrlySearch > div {
    height: 100%;
}

/* flp search */
[id$="searchContainerApp"] {
    height: 100%;
}

.sapUshellSearchInputHelpPage {
    background-color: @sapUiListHeaderBackground;
}

.sapUshellSearchLayout {
    background-color: @sapUiListHeaderBackground;
}

/* make non-resizable splitter bars 'invisible' and make sure responsive splitter does not take width/hight into account */
.sapUiResponsiveSplitter.sapUshellSearchLayout [aria-orientation="horizontal"].sapUiLoSplitterNoResize {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
.sapUiResponsiveSplitter.sapUshellSearchLayout [aria-orientation="vertical"].sapUiLoSplitterNoResize {
    width: 0.125rem !important;
    background-color: @sapUiPageHeaderBorderColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sapUshellSearchResultContainer {
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    background-color: @sapUiListHeaderBackground;

    .searchLayout-bucket {
        margin: 1.7rem 1rem 0.5rem 1rem;
    }

    // TODO: refactoring initial column width
    .sapElisa-search-result-table {
        tr td {
            // max-width: 5rem;
            // word-break: break-all;
            // text-wrap: wrap;

            span.sapMText,
            a.sapMLnk {
                vertical-align: middle;
                // text-wrap: wrap;
                // text-overflow: ellipsis;
                // overflow: hidden;
                // overflow-wrap: break-word;
                // word-wrap: break-word;
                // word-break: break-all;
                // white-space: nowrap;
                // white-space-collapse: break-spaces;
            }

            .sapUiIcon {
                vertical-align: text-bottom;
                // font-size: 0.9rem !important;
                // line-height: 1rem !important;
            }
        }

        b {
            font-weight: bold;
            background-color: @sapUiContentSearchHighlightColor;
        }
    }

    /*
     * Section Begin
     * follwoing styling enables truncating in search result table.
     * sap_belize_base doesn't overwrite sap_base
     * It should be always manually synchronized between sap_base/Search.lss and sap_base/Search.less
     */

    .sapElisa-search-result-table.sapElisa-search-result-table-resizable {
        div.sapMFlexItem:has(.sapUshellSearchText-nowrap) {
            // text-wrap: nowrap;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    /*
     * Section End
     */
}
// This UI5 standard css rule is applied to all other themes except belize
// This is a temporary fix to be deleted after the rule in the belize theme
.sapMLnkIcon {
    float: inline-start;
    margin-inline-end: 0.125rem;
    cursor: pointer;
}

.sapMBreadcrumbsItem .sapMLnkIcon {
    line-height: inherit;
}
.sapUshellSearchTextIcon {
    vertical-align: text-bottom;
    margin-right: 0.125rem;
}
.sapUshellSearchFacetDialogValueHelp {
    min-width: 50rem;
}

.sapUshellSearchResultContainerValueHelp {
    background: transparent;
}

.sapUshellResultListMoreFooterContainer {
    padding-top: 0;
    @media @searchPhoneSize {
        padding: 0;
    }
}

.sapUshellResultListMoreFooter {
    margin: auto;
    width: auto;
    display: block;
    padding-top: 0;
    text-align: center;
}

.sapUshellResultApps .sapUshellResultListMoreFooter {
    padding-top: 0;
}

.sapUshellSearchResultListFooter {
    background-color: transparent !important;
    border: none !important;
}

.sapUshellSearchResultList-toggleMultiSelectionButton {
    @media @searchPhoneSize {
        display: none;
    }
}

.sapUshellSearchResultList-multiSelectionActionBar {
    display: inline-flex;
    display: inline-block;
}

.sapUshellSearchResultListItem-NotDraggableNotClickable {
    cursor: default;
}

.sapUshellSearchResultListItem-Clickable {
    cursor: pointer;
}

.sapUshellSearchResultListItem-TitleInfoIcon {
    color: @sapUiLink;
    opacity: 0.5; /* icon currently does not react on 'click', remove when enabling title icon for 'press' */
}

.sapUshellSearchTableTitleInfoIcon {
    margin-left: 0.25rem;
    color: @sapUiLink;
    opacity: 0.5; /* icon currently does not react on 'click', remove when enabling title icon for 'press' */
}

.sapUshellSearchTableTitleInfoIconDisabled {
    opacity: 0.5;
}

.sapUshellSearchGrid b {
    font-weight: bold;
    background-color: @sapUiContentSearchHighlightColor;
}

.hidden {
    display: none !important;
}

.sapUshellSearchInputHelpPage {
    height: ~"calc(100%)";
}

@media @searchPhoneSize {
    // special css of 'sapUiLoSplitterNoResize' causes some empty space at the right of the search result view
    .sapUshellSearchInputHelpPage .sapUiLoSplitterContent[style*="width"][id$="-content-1"] {
        width: ~"calc(100%)" !important;
    }
    .sapUshellSearchInputHelpPage .sapUiLoSplitterBar.sapUiLoSplitterNoResize {
        display: none !important;
        width: 0 !important; // not sure why this is needed, responsive splitter control (UI5) seems to have special logic, even for the case of "display:none"
    }
    .sapUshellSearchInputHelpPage .sapUiLoSplitterV.sapUiLoSplitterBar.sapUiLoSplitterNoResize {
        display: none !important;
        width: 0 !important; // not sure why this is needed, responsive splitter control (UI5) seems to have special logic, even for the case of "display:none"
    }
}

/* =========== separate toolbars ===================== */
/* no bars */
.sapElisaSearchContainerCountBreadcrumbsValueHelp {
    margin-left: 0;
}
.sapElisaSearchSelectQuickSelectDataSourceValueHelp {
    display: flex;
    flex-direction: column;
}

.sapElisaSearchSelectionText {
    font-style: italic;
    padding-right: 0.25rem;
}

.sapElisaSearchCompositeControl.sapUiVlt {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sapElisaSearchCompositeControl .sapUiVltCell.sapuiVltCell:has(> .sapUshellSearchLayout) {
    height: 0;
    flex: 1;
}

.sapElisaSearchCompositeControl {
    .SearchFieldGroup {
        max-width: 100%;

        > .sapMFlexBox {
            min-width: 0;
            max-width: 100%;

            > .sapMFlexItem {
                min-width: 0;
            }
        }
    }
}

.sapElisaSearchResultContainer {
    height: 100%;
    width: 100%;
    overflow: auto;
}