:root {
}

/*
 * IMPORTANT!!!!!!!!!!
 * Don't set margin for .Sidebar, because .Sidebar never hides and if it will have margin or padding, it will push the content to the left.
 * Apply any margins and paddings to .Sidebar_content instead as it hides automatically when there's not enough space to display it.
 */
.Sidebar {
    display: flex;
    flex-direction: row;
    position: sticky !important;
    top: calc(var(--MainToolbar_height) + var(--TopPinnedNoteList_collapsedHeight) + var(--TopPinnedNoteList_topMargin));
    flex-grow: 1;
    flex-shrink: 1;
    /*flex-basis: calc((100% - var(--UserLayout_contentWidth)) / 2) !important;*/
    max-width: calc((100% - var(--UserLayout_contentWidth)) / 2) !important;
    /*width: calc((100% - var(--UserLayout_contentWidth)) / 2) !important;*/
    margin: 0;
    padding: 0;
    max-height: calc(100vh - var(--MainToolbar_height) - var(--TopPinnedNoteList_collapsedHeight) - var(--TopPinnedNoteList_topMargin));
}

.Sidebar_rightSidebar {
    flex-direction: row-reverse;
}

.Sidebar_rightSidebar .Sidebar_toolbar {
    justify-content: right;
}

.Sidebar_toolbar {
    display: flex;
    flex-direction: column;
    margin: 4px;
}

.Sidebar_content {
    filter: grayscale(100%);
    opacity: .3;
    overflow-y: hidden;
    scrollbar-width: thin !important;
    transition: opacity 1s, filter 1s;
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.Sidebar_content::-webkit-scrollbar {
    width: 9px;
}

.Sidebar_content::-webkit-scrollbar-track {
    background: transparent;
}

.Sidebar_content:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.Sidebar_leftSidebar .Sidebar_content {
    flex-direction: row;
}

.Sidebar_rightSidebar .Sidebar_content {
    flex-direction: row-reverse;
}