@import "app/styles/variables";

bl-file-explorer {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;

    .tree-explorer-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;

        > bl-file-tree-view {
            min-height: 10px;
            flex-shrink: 0;
            flex-grow: 1;
        }

        > bl-file-tree-view:only-child {
            flex: 1;
        }
    }

    .file-content-container {
        width: 100%;
        height: 100%;
        background-color: $main-background;

        flex: 1;
        position: relative;
        overflow: hidden;

        $tabs-height: 28px;
        > bl-file-explorer-tabs {
            height: $tabs-height;
        }
        > bl-file-viewer-container, bl-file-table-view {
            height: calc(100% - #{$tabs-height});
        }
    }


    bl-loading {
        width: 100%;
    }

    bl-file-details-quickview {
        width: 100%;
        display: block;
    }
}
