@media (-moz-bool-pref: "zen.tabs.vertical") {
    
    /* Makes essentials transparent (when toggled) */
    :root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) {
        .tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
            background-color: transparent !important;
        }
    }

@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {

/* Set width of Essentials (Dropdown) */
        :root:has(#theme-SuperPins[uc-essentials-width="Thin"]) {
            --essentials-width: 50px;
        }

:root:has(#theme-SuperPins[uc-essentials-width="Normal"]) {
            --essentials-width: 60px;
        }

:root:has(#theme-SuperPins[uc-essentials-width="Wide"]) {
            --essentials-width: 70px;
        }

:root:has(#theme-SuperPins[uc-essentials-width="Thin"],
            #theme-SuperPins[uc-essentials-width="Normal"],
            #theme-SuperPins[uc-essentials-width="Wide"]) {
            #zen-essentials-container {
                grid-template-columns: repeat(auto-fit,
                        minmax(var(--essentials-width), auto)) !important;
            }
        }

/* Set margin between Essentials (Dropdown) */
        :root:has(#theme-SuperPins[uc-essentials-gap="Small"]) {
            --essentials-gap: 0px;
        }

:root:has(#theme-SuperPins[uc-essentials-gap="Normal"]) {
            --essentials-gap: 2px;
        }

:root:has(#theme-SuperPins[uc-essentials-gap="Big"]) {
            --essentials-gap: 5px;
        }

:root:has(#theme-SuperPins[uc-essentials-gap="Small"],
            #theme-SuperPins[uc-essentials-gap="Normal"],
            #theme-SuperPins[uc-essentials-gap="Big"]) {
            #zen-essentials-container {
                gap: var(--essentials-gap) var(--essentials-gap) !important;
            }
        }
    }

/* Enables legacy layout for pinned tabs (icon only in grid) */
    @media (-moz-bool-pref: "uc.pins.legacy-layout") {

#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-close-button {
            display: none !important;
        }

#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-button {
            display: none !important;
        }

#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-pin-button {
            display: none !important;
        }

#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-label-container {
            display: none !important;
        }

/*disable icon shift when tab was renamed*/
        #navigator-toolbox[zen-sidebar-expanded="true"] {
            & #tabbrowser-tabs {
                & .tabbrowser-tab {
                    &[zen-pinned-changed="true"]:not([zen-essential])>.tab-stack>.tab-content>.tab-icon-stack {
                        left: unset !important;
                    }
                }
            }
        }

/*The actual grid layout*/
        #vertical-pinned-tabs-container>.zen-workspace-tabs-section {
            grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
            display: grid !important;
            overflow: hidden !important;
            gap: 3px !important;
        }

/* WIP Somewhat fixes the bleeding of pins from other workspaces
        #vertical-pinned-tabs-container > .zen-workspace-tabs-section[active] {
            visibility: visible;
        } 
        #vertical-pinned-tabs-container > .zen-workspace-tabs-section[hidden]{
            visibility: hidden;
        }*/

#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
            --toolbarbutton-inner-padding: 0;
        }

/*fixing the weird seperator behaviour by removing it*/
        .vertical-pinned-tabs-container-separator {
            display: none !important;
        }

#tabbrowser-arrowscrollbox .tabbrowser-tab:first-child {
            margin-top: 5px !important;
        }

}

/* Make Essentials look more box like */
    @media (-moz-bool-pref: "uc.essentials.box-like-corners") {
        .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
            border-radius: 5px !important;
        }
    }

/* Adds a little bg to the pinned tabs */
    @media (-moz-bool-pref: "uc.pins.bg") {
        @media (prefers-color-scheme: light) {
            :root {
                --pins-bg-percentage: 40%;
            }
        }

@media (prefers-color-scheme: dark) {
            :root {
                --pins-bg-percentage: 7%;
            }
        }

/* background color of pinned tabs in a normal state (not hovered/selected) */
        .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background {
            background-color: color-mix(in srgb, white var(--pins-bg-percentage), transparent) !important;
        }

/* background color when hovering */
        .tabbrowser-tab[pinned]:not([zen-essential="true"]):hover .tab-stack .tab-background {
            background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 3%), transparent) !important;
        }

/* background color when selected */
        .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"] .tab-stack .tab-background,
        .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"] .tab-stack .tab-background {
            background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 16%), transparent) !important;
        }

/* background color when selected and hovering*/
        .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"]:hover .tab-stack .tab-background,
        .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"]:hover .tab-stack .tab-background {
            background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 18%), transparent) !important;
        }
    }

/* Adds border to Pins/Essentials (when toggled) */
    :root:has(#theme-SuperPins[uc-superpins-border="essentials"]) {
        #zen-essentials-container .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
            border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
                    color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
        }
    }

:root:has(#theme-SuperPins[uc-superpins-border="pins"]) {
        .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background {
            border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
                    color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
        }
    }

:root:has(#theme-SuperPins[uc-superpins-border="both"]) {
        .tabbrowser-tab[pinned] .tab-stack .tab-background {
            border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
                    color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
        }
    }

/* Let pinned tabs have the same selected styling as essentials */
    @media (-moz-bool-pref: "uc.pins.essentials-layout") {
        #vertical-pinned-tabs-container>.zen-workspace-tabs-section {
            grid-template-columns: repeat(auto-fit,
                    minmax(var(--essentials-width), auto)) !important;
            gap: var(--essentials-gap) var(--essentials-gap) !important;
        }
    }

/* pins height */
    :root:has(#theme-SuperPins[uc-pinned-height="small"]) {
        #navigator-toolbox[zen-sidebar-expanded="true"]
            #vertical-pinned-tabs-container:has(tab:not([hidden]))
            .tabbrowser-tab {
            height: 40px !important;
        }
    }

:root:has(#theme-SuperPins[uc-pinned-height="normal"]) {
        #navigator-toolbox[zen-sidebar-expanded="true"]
            #vertical-pinned-tabs-container:has(tab:not([hidden]))
            .tabbrowser-tab {
            height: 50px !important;
        }
    }

:root:has(#theme-SuperPins[uc-pinned-height="large"]) {
        #navigator-toolbox[zen-sidebar-expanded="true"]
            #vertical-pinned-tabs-container:has(tab:not([hidden]))
            .tabbrowser-tab {
            height: 60px !important;
        }
    }

/* favicon size */
    :root:has(#theme-SuperPins[uc-favicon-size="small"]) {
        .tab-throbber,
        .tab-icon-pending,
        .tab-icon-image,
        .tab-sharing-icon-overlay,
        .tab-icon-overlay {
            height: 16px !important;
            width: 16px !important;
        }
    }

:root:has(#theme-SuperPins[uc-favicon-size="normal"]) {
        .tab-throbber,
        .tab-icon-pending,
        .tab-icon-image,
        .tab-sharing-icon-overlay,
        .tab-icon-overlay {
            height: 18px !important;
            width: 18px !important;
        }
    }

:root:has(#theme-SuperPins[uc-favicon-size="large"]) {
        .tab-throbber,
        .tab-icon-pending,
        .tab-icon-image,
        .tab-sharing-icon-overlay,
        .tab-icon-overlay {
            height: 20px !important;
            width: 20px !important;
        }
    }

/* workspace icons size */
    :root:has(#theme-SuperPins[uc-workspace-icon-size="x-small"]) {
        #zen-workspaces-button {
            font-size: x-small !important;
        }
    }

:root:has(#theme-SuperPins[uc-workspace-icon-size="small"]) {
        #zen-workspaces-button {
            font-size: small !important;
        }
    }

:root:has(#theme-SuperPins[uc-workspace-icon-size="medium"]) {
        #zen-workspaces-button {
            font-size: medium !important;
        }
    }

:root:has(#theme-SuperPins[uc-workspace-icon-size="large"]) {
        #zen-workspaces-button {
            font-size: large !important;
        }
    }

/* current workspace icons size */
    :root:has(#theme-SuperPins[uc-workspace-current-icon-size="small"]) {
        .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
            font-size: 12px !important;
        }
    }

:root:has(#theme-SuperPins[uc-workspace-current-icon-size="normal"]) {
        .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
            font-size: 14.5px !important;
        }
    }

:root:has(#theme-SuperPins[uc-workspace-current-icon-size="large"]) {
        .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
            font-size: 16px !important;
        }
    }
}