$main_background: #fff;

:root {
    --main-background: #{$main_background}; // or any global you wish to share with components 
    --p-menubar-padding: 4px !important;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    padding-inline: 8px;
    padding-block: 0;
    box-sizing: border-box;
}

$widget_edit_popup_height: 90%;
$widget_edit_popup_width: 75%;

.datasource-descriptor {
    display: none;
}

.dashboard-design {
    position: relative;
    overflow: auto;

    tbody,
    tr,
    td {
        border-style: inherit;
        border-color: inherit;
        border-width: inherit;
    }
}

// .dashboard-design.designer-hide-datasources {

//     tbody,
//     tr,
//     td {
//         border-style: unset;
//         border-color: unset;
//         border-width: unset;
//     }
// }

wuic-dashboard {
    display: contents;
    height: 100%;
}

.dashboard-design wuic-dashboard {
    display: contents;

    .datasource-descriptor {
        display: block;
        border: solid 1px black;
    }
}

ng-content {
    display: contents;
}

a.p-menuitem-link {
    word-break: break-word;
}

.edit-form-button-bar {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.edit-form-button-bar li {
    margin: 0;
}

ngx-monaco-editor .editor-container {
    overflow: visible !important;
}

// PrimeNG paints cell background on td; propagate row style only to cells that do not have column-level style.
.p-datatable .p-datatable-tbody>tr.wuic-row-style-applied>td:not(.wuic-cell-style-applied) {
    background-color: inherit !important;
}

.editor-widget.suggest-widget {
    background-color: transparent !important;
    border: none !important;

    .tree {
        height: 120px !important;
        background-color: #000;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;

        // .monaco-list-rows {
        //     height: 120px !important;
        // }

        // .invisible.scrollbar.vertical {
        //     height: 120px !important;
        // }
    }
}

.spreadsheet-autocomplete-popup,
.spreadsheet-autocomplete-item {
    background-color: var(--p-dialog-background) !important;
    color: var(--p-dialog-color) !important;
}