collapsing treestyle tabs and hidden tab bar

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Hide horizontal tab bar. The following only works with built-in light or dark themes */
#titlebar{ margin-bottom: -29px !important;}
#titlebar-content{margin-bottom: 0px !important;}
#main-window,#TabsToolbar{background-color: var(--chrome-secondary-background-color) !important;}
#TabsToolbar>*:not(:last-child){visibility:hidden;height:32px;}
#nav-bar{border-top:0px !important;margin-right:144px;margin-top: -32px;}

/* Sidebar min and max width removal */
#sidebar {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 40px;
    --wide-tab-width: 240px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 300ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 300ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}