.component_filemanager_shell {
    display: flex;
    height: 100%;
    background: white;
}
.component_filemanager_shell .component_sidebar {
    width: 240px;
    padding: 20px;
}
.component_filemanager_shell .component_sidebar > h3 {
    padding-left: 10px;
    margin-bottom: 5px;
    color: var(--light);
    font-size: 1rem;
}
.component_filemanager_shell .component_sidebar > div {
    background: rgba(0,0,0,0.1);
    padding-left: 10px;
    width: 90%;
    height: 50px;
    margin: 0 auto;
}
.component_filemanager_shell [is="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-right: 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: 20px;
    border-top-right-radius: 10px;
    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-right: none;
}
.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 > [is="component-breadcrumb"] > .component_breadcrumb,
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"] .container {
    width: 95%;
    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="filemanager-children"] .container,
.component_filemanager_shell [is="component-breadcrumb"] .container {
    max-width: 2100px;
}

.component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_filesystem"],
.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"].hidden ~ div [is="component_submenu"] .component_submenu {
    padding: 0px;
}

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