@use 'src/styles/components/layout';
@use 'src/styles/components/visualization';

#explorer-view {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    & .opened-explorer-container, .empty-explorer-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    & .opened-explorer-container {
        display: flex;
        flex-direction: column;

        // note: make sure 'file-tree-container' only contain one element
        & > .file-tree-container {
            width: 100%;
            height: 100%;

            // make sure list-view cannot exceeds the sight of the container
            overflow: hidden;
        }
    }
    
    & .empty-explorer-container {

        & > .explorer-open-tag {
            color: transparent;
            transition: 0.1s;
            @include layout.vertical-center;
            @include visualization.text(none, 10pt, center);

            &:hover {
                cursor: pointer;
            }
        }
        
        &:hover > .explorer-open-tag {
            color: #9f9f95;
        }
        
        &:hover > .explorer-open-tag:hover {
            color: rgb(202, 202, 202);
        }
        
        &:hover > .explorer-open-tag:active {
            color: #9f9f95;
        }
    }
}