/* Main
-------------------------------------------- */
/* Core start */
body:not(.xQVDialog) > .xCfg {
    display: grid;
    grid-template-areas:
    "toolbar toolbar"
    "lookupbody lookuppreview"
    "lookuptoolbar lookuptoolbar"
    "lookupquickbar lookupquickbar";
    grid-template-columns:
    [left] 1fr var(--lookup-preview-width) [right];
    grid-template-rows:
    [top] min-content 1fr min-content min-content [bottom];
}

body > .xCfg:not(.xQVDialog) .xTb {
    grid-area: toolbar;
    z-index: 1;
}

.xLookupBody {
    grid-area: lookupbody;
    overflow-x: auto;
    overflow-y: hidden;
}

.xLookupBody .xPage {
    overflow-y: auto;
}

.xLookup #PickerTHEAD {
    display: table-row;
}

.xLookup #PickerTBODY {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

.xLookup tr:not(:is([show], [allow])) td {
    cursor: pointer;
}

.xLookupPreview {
    grid-area: lookuppreview;
}

.xLookupPreview #txtSelOpt {
    display: block;
}

.xLookupPreview :is(#expSelOptions, #expSelOptions > div, #expSelOptions .props) {
    display: flex;
}

.xLookupPreview #expSelOptions .props > div > span {
    display: block;
}

.xLookupTb {
    grid-area: lookuptoolbar;
    display: flex;
}

.xLookupQuickBar {
    grid-area: lookupquickbar;
    table-layout: fixed;
    width: 100%;
}

.xLookupQuickBar td {
    text-align: center;
    cursor: pointer;
}

/* Core end */

/* Body
-------------------------------------------- */
.xLookup {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.xLookup tr {
    display: flex;
}

.xLookup th {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xLookup thead :is(th, td) {
    background-color: var(--lookup-table-header-background-color);
}

.xLookup th:not(.xSelBox):not(.xFilterHdr) {
    padding: var(--lookup-table-header-padding);
    font-family: var(--lookup-table-header-font-family);
    font-size: var(--lookup-table-header-font-size);
    font-weight: var(--lookup-table-header-font-weight);
    font-style: var(--lookup-table-header-font-style);
    line-height: var(--lookup-table-header-line-height);
    letter-spacing: var(--lookup-table-header-letter-spacing);
    color: var(--lookup-table-header-text-color);
}

.xLookup th[spacer] {
    display: none;
}

.xLookup th img {
    /* display: none; */ /* Needs a better solution */
}

.xLookup th img::after {
    padding-left: var(--lookup-table-header-icon-gap);
    vertical-align: middle;
    font-family: var(--font-family--icon);
}

.xLookup th img[src*='hdrAsc']::after {
    content: var(--icon-sort--ascending);
}

.xLookup th img[src*='hdrDsc']::after {
    content: var(--icon-sort--descending);
}

.xLookup tr.xActiveFilter td {
    padding: var(--lookup-table-header-filter-padding);
}

.xLookup th:is(.xSelBox, .xFilterHdr) {
    flex: 0;
    padding: 0 ;
    min-width: calc(var(--lookup-table-selectionbox-size) + (var(--lookup-table-selectionbox-padding-sides) * 2 ));
}

.xLookup .xActiveFilter :is(th, td) {
    border-width: 0 0 var(--lookup-table-header-border-width) 0;
    border-style: var(--lookup-table-header-border-style);
    border-color: var(--lookup-table-header-border-color);
}

.xLookup :is(th, td) {
    display: block;
    flex: 1;
}

.xLookup tbody td {
    border-width: var(--lookup-table-row-border-width);
    border-style: var(--lookup-table-row-border-style);
    border-color: var(--lookup-table-row-border-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xLookup tbody td:not(.xSelBox) {
    padding: var(--lookup-table-cell-padding);
    font-family: var(--lookup-table-font-family);
    font-size: var(--lookup-table-font-size);
    font-weight: var(--lookup-table-font-weight);
    font-style: var(--lookup-table-font-style);
    line-height: var(--lookup-table-line-height);
    letter-spacing: var(--lookup-table-letter-spacing);
    color: var(--lookup-table-text-color);
}

.xLookup tr:is([show], [allow]) td {
    background-color: var(--disabled-primary);
}

.xLookup td.xSelBox {
    flex: 0;
    min-width: calc(var(--lookup-table-selectionbox-size) + (var(--lookup-table-selectionbox-padding-sides) * 2 ));
    padding: 0 var(--lookup-table-selectionbox-padding-sides);
}

.xLookup tr.xHover {
    background-color: var(--lookup-table-row-background-color--hover);
}

.xLookup tr.xSel {
    background-color: var(--lookup-table-row-background-color--selected);
}

.xLookup tr.xHoverSel {
    background-color: var(--lookup-table-row-background-color--hover--selected);
}

.xLookup tr.xHoverHighlight:hover {
    background-color: var(--lookup-table-row-background-color--hover--selected);
}

.xLookup tr[isRequired="1"] td {
    font-weight: var(--lookup-table-row-required-font-weight);
}

.xLookup tr.xDisabledRow div.errorReason {
    color: var(--lookup-table-row-error-text-color);
}

.xLookup td.xNoData {
    font-style: var(--lookup-table-row-nodata-font-style);
}


/* Preview
-------------------------------------------- */
.xLookupPreview {
    padding: var(--lookup-preview-padding);
    border-width: var(--lookup-preview-border-width);
    border-style: var(--lookup-preview-border-style);
    border-color: var(--lookup-preview-border-color);
    background-color: var(--lookup-preview-background-color);
}

.xLookupPreview #txtSelOpt {
    padding: var(--lookup-preview-header-padding);
    font-family: var(--lookup-preview-header-font-family);
    font-size: var(--lookup-preview-header-font-size);
    font-weight: var(--lookup-preview-header-font-weight);
    font-style: var(--lookup-preview-header-font-style);
    line-height: var(--lookup-preview-header-line-height);
    letter-spacing: var(--lookup-preview-header-letter-spacing);
    color: var(--lookup-preview-header-text-color);
}

.xLookupPreview #expSelOptions {
    flex-direction: column;
    gap: var(--lookup-preview-item-gap);
}

.xLookupPreview :is(#expSelOptions div, #expSelOptions .props > div) {
    align-items: center;
}

.xLookupPreview #expSelOptions > div > img {
    display: none
}

.xLookupPreview #expSelOptions > div span {
    flex: 1;
    font-family: var(--lookup-preview-item-font-family);
    font-size: var(--lookup-preview-item-font-size);
    font-weight: var(--lookup-preview-item-font-weight);
    font-style: var(--lookup-preview-item-font-style);
    line-height: var(--lookup-preview-item-line-height);
    letter-spacing: var(--lookup-preview-item-letter-spacing);
    color: var(--lookup-preview-item-text-color);
}

.xLookupPreview #expSelOptions > div span[title]::before {
    padding-right: var(--lookup-preview-icon-gap);
    vertical-align: middle;
    font-family: var(--font-family--icon);
    font-size: var(--icon-font-size);
    content: var(--icon-settings);
}

.xLookupPreview #expSelOptions .props > div {
    display: flex;
    gap: var(--lookup-preview-item-input-gap);
}

.xLookupPreview #expSelOptions .props input {
    width: var(--lookup-preview-item-input-wdith);
}


/* Toolbar
-------------------------------------------- */
.xLookupTb {
    padding: var(--lookup-toolbar-padding);
    border-width: var(--lookup-toolbar-border-width);
    border-style: var(--lookup-toolbar-border-style);
    border-color: var(--lookup-toolbar-border-color);
    background-color: var(--lookup-toolbar-background-color);
}

/* Quick Bar
-------------------------------------------- */
.xLookupQuickBar {
    height: var(--lookup-quickbar-height);
    border-width: var(--lookup-quickbar-border-width);
    border-style: var(--lookup-quickbar-border-style);
    border-color: var(--lookup-quickbar-border-color);
    background-color: var(--lookup-quickbar-background-color);
}

.xLookupQuickBar .xHover {
    background-color: var(--lookup-quickbar-background-color--hover);
}

.xLookupQuickBar .xHover:active {
    background-color: var(--lookup-quickbar-background-color--active);
}