:root:has(#customization-container:not([hidden])) {
    /* Show flexible space in customiation mode in top buttons, since this mod allows them there */
    #zen-sidebar-top-buttons-customization-target toolbarspring {
        display: flex !important;
    }
}

:root:not([zen-compact-mode="true"], :has(#customization-container:not([hidden]))) {
    --tab-min-width: calc(36px) !important;
    --zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px) !important;
    --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--tab-block-margin) + var(--zen-toolbox-padding) * 2) !important;
    --zen-toolbox-min-width: 1px !important;
    --zen-sidebar-width: var(--zen-toolbox-max-width) !important;
    
    @media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
        #zen-current-workspace-indicator-container {
            display: none !important;
        }
    }
    
    #zen-sidebar-splitter {
        display: none !important;
    }
    
    /* Change tab shape to square when collapsed */
    tab:not([zen-essential]) .tab-background {
        min-width: var(--tab-min-width) !important;
    }
    
    /* Center tab icon */
    .tab-icon-stack > .tab-icon-image {
        margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
    }

    /* Same design as tabs for New Tab button and other toolbarbuttons */
    #TabsToolbar-customization-target toolbarbutton {
        margin: var(--tab-block-margin) !important;
        padding: 0 calc(var(--tab-inline-padding) - var(--tab-block-margin)) !important;
        justify-content: flex-start !important;
        
        & > .toolbarbutton-icon {
            margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
        }
        
        & > .toolbarbutton-text {
            padding: 0 !important;
            align-items: center !important;
        }
    }
    
    /* Stop New Tab button from increasing the width */
    .zen-workspace-tabs-section {
        width: calc(var(--tab-min-width) + var(--tab-block-margin)) !important;
    }
    
    tab[pinned]:not([zen-essential]) > stack {
        --tab-inline-padding: 8px !important;
        & > .tab-content {
            padding: 0 var(--tab-inline-padding) !important;
            min-width: 0 !important;
            justify-content: unset !important;
        }
    }

    @media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) {

            #navigator-toolbox {
                margin-top: var(--zen-toolbar-height) !important;
            }

            #browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
                margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
            }
    }
    
    /* Move topbar buttons in the now empty space */
    @media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) and (not (-moz-platform: macos)) {
        #browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
            #zen-appcontent-wrapper {
                overflow: visible !important;

                #zen-appcontent-navbar-container:has(#nav-bar>.titlebar-buttonbox-container:last-child) {
                    margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
                    padding-left: var(--zen-element-separation);

                    #nav-bar {
                        margin-inline-start: var(--zen-element-separation);
                    }
                }
            }
        }
    }

    #navigator-toolbox {
        z-index: 4 !important;
        width: var(--zen-toolbox-max-width) !important;
        max-width: var(--zen-toolbox-max-width) !important;
        min-width: var(--zen-toolbox-max-width) !important;
        position: relative !important;

        /* 
        I have no idea how to replicate the browser background, I don't know where the colors come from, the computed values in the inspector don't match anything on screen.
        This is as close as I was able to get so far.
        */
        &::before {
            position: absolute;
            content: "";
            width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
            height: 100%;
            opacity: 0.0;
            transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
            z-index: -1;
            background-image: var(--zen-main-browser-background) !important;
            background-color: var(--lwt-accent-color) !important;
            background-attachment: fixed !important;
            background-size: 2000px !important;
            backdrop-filter: blur(5px) !important;
            border-top-right-radius: 8px !important;
            border-bottom-right-radius: 8px !important;
        }

        > #titlebar, > #zen-sidebar-top-buttons, > #nav-bar {
            width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)) !important;
            max-width: var(--zen-sidebar-width) !important;
            min-width: var(--zen-toolbar-min-width) !important;
            padding-right: var(--zen-toolbox-padding) !important;
        }

        > #titlebar, > #zen-sidebar-top-buttons {
            overflow: hidden !important;
            transition: width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
        }

        > #nav-bar {
            margin: 0 !important;
            padding-left: var(--zen-toolbox-padding) !important;
            transition: var(--ext-theme-background-transition), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed) !important;
        }
    }
    
    /* Essentials */
    #zen-essentials-container {
        display: flex !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow-x: scroll !important;
        
        > .tabbrowser-tab {
            flex: 1 !important;
            /* Todo change this from hardcoded value */
            min-width: 40px !important;
            margin-inline: calc(var(--zen-toolbox-padding) - 2px) !important;
            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
        }
    }
    
    /* Hide empty top buttons */
    #zen-sidebar-top-buttons:not(:has(:not(#zen-sidebar-top-buttons-separator, #zen-sidebar-top-buttons-customization-target))) {
        display: none !important;
    }

    #zen-sidebar-bottom-buttons,
    #zen-sidebar-top-buttons-customization-target {
        justify-content: center !important;
        gap: 0 !important;

        & > :not(panel,#zen-sidebar-top-buttons-separator) {
            overflow: hidden !important;
            padding: 0 !important;
            min-width: fit-content !important;
            min-height: fit-content !important;
            flex-grow: 1 !important;
            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                width var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
            margin-inline: 2px !important;
        }

        toolbarspring {
            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) cubic-bezier(.001,1,.003,0.99), 
                width var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;;
            flex-grow: 100 !important;
            display: flex !important;
        }
    }

    #zen-workspaces-button {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 0 !important;
        min-width: fit-content !important;
        transition: min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;

        toolbarbutton {
            margin: 0 !important;
            flex-grow: 1 !important;
            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                width var(--theme-sidebar_expand_on_hover-transition_speed) linear, 
                margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
            margin-inline: 2px !important;
            overflow: hidden !important;
        }
    }
    
    #tabbrowser-arrowscrollbox-periphery {
        margin-inline: 0 !important;
        
        /* Decrease the seperator line to the same length as before */
        &::before {
            margin-inline: var(--tab-block-margin);
        }
    }

    /* Expanded bar */
    #navigator-toolbox:is(
        [zen-has-hover],
        [movingtab],
        [flash-popup],
        [has-popup-menu],
        :has(.tabbrowser-tab:active),
        :has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open]),
    ) {
        --zen-sidebar-width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
        &::before {
            opacity: 1.0;
            transition: 60ms opacity ease-in, width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
        }
    }

    /* Collapsed bar */
    #navigator-toolbox:not(
        [zen-has-hover],
        [movingtab],
        [flash-popup],
        [has-popup-menu],
        :has(.tabbrowser-tab:active),
        :has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open])
    ) {

        /* Show only active/first/no(todo) button*/
        #zen-workspaces-button {
            toolbarbutton:not([active="true"]) {
                flex-grow: 0 !important;
                width: 0 !important;
                margin-inline: 0 !important;
            }
        }
        
        #zen-essentials-container:has([selected]) > .tabbrowser-tab:not([selected]),
        #zen-essentials-container:not(:has([selected])) > .tabbrowser-tab:not(:first-child) {
                flex-grow: 0 !important;
                width: 0 !important;
                min-width: 0 !important;
                margin-inline: 0 !important;
        }
        
        toolbarspring {
            flex-grow: 0 !important;
            width: 0 !important;
            min-width: 0 !important;
            margin-inline: 0 !important;
        }
        
        /*Workaround for invisible top buttons seperator*/
        #zen-sidebar-top-buttons-customization-target > :not(:nth-child(1 of toolbarbutton, toolbaritem))
        {
            flex-grow: 0 !important;
            width: 0 !important;
            min-width: 0 !important;
            margin-inline: 0 !important;
        }

        @media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
            #zen-sidebar-bottom-buttons > :not(:first-child)
            {
                flex-grow: 0 !important;
                width: 0 !important;
                min-width: 0 !important;
                margin-inline: 0 !important;
            }
        }

        @media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
            /* Show first child only when no visible workspace switcher */
            #zen-sidebar-bottom-buttons:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > :not(:first-child),
            /* Show active workspace only when visible workspace switcher */
            #zen-sidebar-bottom-buttons:has(#zen-workspaces-button:not([dont-show="true"])) > :not(#zen-workspaces-button) {
                flex-grow: 0 !important;
                width: 0 !important;
                min-width: 0 !important;
                margin-inline: 0 !important;
            }
        }
    }

    /* Support for tabs on the right */
    #navigator-toolbox[zen-right-side="true"] {
        direction: rtl !important;
    
        #titlebar, #zen-sidebar-top-buttons {
            direction: ltr !important;
        }

        #titlebar {
            padding-left: var(--zen-toolbox-padding) !important;
            padding-right: 0 !important;
        }
        
        @media (-moz-bool-pref: "zen.view.use-single-toolbar") {
            #nav-bar {
                direction: ltr !important;
            }
        }
    }
}