.component_filemanager_shell {
    display: flex;
    height: 100%;
    background: white;
}

.component_filemanager_shell component-breadcrumb:hover ~ [data-bind="filemanager-children"],
.component_filemanager_shell [data-bind="sidebar"]:hover ~ div > [data-bind="filemanager-children"] {
    border-color: var(--border);
}

.component_filemanager_shell [data-bind="filemanager-children"] {
    border-top: 2px solid;
    border-left: 2px solid;
    border-color: transparent;
    transition: 0.5s ease border-top-left-radius, 0.5s ease border-top-right-radius, 1s ease border-color;
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    display: flex;
    height: 100%;
    overflow: hidden;
}

.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-left: none;
    border-color: transparent;
}
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"].scrolling {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > component-breadcrumb > .component_breadcrumb,
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div > component-breadcrumb > .component_breadcrumb,
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"] .container,
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div > [data-bind="filemanager-children"] .container {
    width: 98%;
    margin: 0 auto;
    max-width: 815px;
}

.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"] {
    background: rgba(100,100,100,.05);
}

.component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_filesystem"],
.component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_newitem"],
.component_filemanager_shell [data-bind="sidebar"] ~ div component-menubar,
.component_filemanager_shell [data-bind="sidebar"] ~ div component-breadcrumb,
.component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_submenu"] .component_submenu{
    padding: 0 30px;
}

.component_filemanager_shell [data-bind="sidebar"].hidden ~ div [is="component_filesystem"],
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div [is="component_filesystem"],
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div [is="component_newitem"],
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div [is="component_newitem"],
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div component-menubar,
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div component-menubar,
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div component-breadcrumb,
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div component-breadcrumb,
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div [is="component_submenu"] .component_submenu,
.component_filemanager_shell [data-bind="sidebar"]:empty ~ div [is="component_submenu"] .component_submenu {
    padding: 0px;
}

body.dark-mode .component_filemanager_shell {
    background: #2b2d30;
}
