chrome.css

:root:not(
    [zen-compact-mode="true"],
    [zen-sidebar-expanded="false"],
    :has(#customization-container:not([hidden]))
  ) {
  --tab-min-width: calc(44px) !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;

  #zen-sidebar-splitter {
    display: none !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 {
    @media (-moz-bool-pref: "zen.mods.side-hover.compat.arc") {
      padding-left: 0 !important; /* idk why, but it work */
    }
    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;
    margin-bottom: var(--zen-element-separation);

    .zen-current-workspace-indicator {
      transition-property: padding;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      );
      transition-duration: var(--zen-mods-side-hover-transition-duration);
      transition-delay: var(--zen-mods-side-hover-transition-delay);
      .zen-current-workspace-indicator-chevron {
          width: 0 !important;
          height: 0 !important;
      }
      .zen-current-workspace-indicator-name {
        transition-property: width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }

      .zen-current-workspace-indicator-icon[no-icon="true"] {
        transition-property: width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }
    }

    tab[zen-essential] {
      .tab-stack,
      .tab-background,
      .tab-content {
        min-width: calc(var(--tab-min-width) - 4px) !important;
        transition-property: min-width, width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }
      .tab-icon-stack > .tab-icon-image {
        margin-inline: 0 !important;
      }
    }

    /* Same design as tabs for New Tab button and other toolbarbuttons */
    #TabsToolbar-customization-target toolbarbutton {
      margin: 0 !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;
      }
    }

    /* 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;
      transition-property: margin-inline;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      );
      transition-duration: var(--zen-mods-side-hover-transition-duration);
      transition-delay: var(--zen-mods-side-hover-transition-delay);
    }

    #titlebar {
      padding-top: var(--zen-toolbox-padding) !important;
    }

    @media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) {
      margin-top: var(--zen-toolbar-height) !important;
      @media (-moz-bool-pref: "zen.mods.side-hover.compat.arc") {
        margin-top: calc(
          var(--zen-toolbar-height) + 3px
        ) !important; /* Align to match toolbar height, hardcoded for Arc theme. */
      }
    }

    :hover {
      -moz-window-dragging: no-drag;
    }

    &::before {
      position: absolute !important;
      content: "";
      width: var(--zen-sidebar-width);
      opacity: 0;
      top: 0;
      inset-inline-start: 0;
      bottom: 0;
      inset-inline-end: 0;
      z-index: -2;
      @media (-moz-bool-pref: "zen.mods.side-hover.themed-background") {
        background: var(--zen-main-browser-background-toolbar) fixed !important;
        @media (-moz-bool-pref: "zen.mods.side-hover.themed-background.transparent") {
          background: var(--zen-main-browser-background) fixed !important;
          @media (-moz-bool-pref: "zen.mods.side-hover.themed-background.blur") {
            backdrop-filter: blur(
              var(--zen-mods-side-hover-themed-background-blur-size, 20px)
            ) !important;
          }
        }
      }
      @media (not (-moz-bool-pref: "zen.mods.side-hover.themed-background")) {
        background: var(--zen-dialog-background) !important;
      }
      border-start-end-radius: var(--zen-border-radius) !important;
      border-end-end-radius: var(--zen-border-radius) !important;
      box-shadow: var(--zen-big-shadow);
      transition: opacity var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay),
        width var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay);
    }

    @media not (-moz-bool-pref: "zen.mods.side-hover.themed-background.transparent") and not (-moz-bool-pref: "zen.mods.side-hover.themed-background.blur") {
      :root[zen-show-grainy-background="true"] &::after {
        content: "";
        position: absolute !important;
        top: 0;
        inset-inline-start: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: var(--zen-sidebar-width);
        background: url(chrome://browser/content/zen-images/grain-bg.png) repeat !important;
        pointer-events: none;
        mix-blend-mode: overlay;
        opacity: 0;
        z-index: -1;
        border-start-end-radius: var(--zen-border-radius) !important;
        border-end-end-radius: var(--zen-border-radius) !important;
        transition: opacity var(--zen-mods-side-hover-transition-function)
            var(--zen-mods-side-hover-transition-duration)
            var(--zen-mods-side-hover-transition-delay),
          width var(--zen-mods-side-hover-transition-function)
            var(--zen-mods-side-hover-transition-duration)
            var(--zen-mods-side-hover-transition-delay);
      }
    }

    > #titlebar,
    > #zen-sidebar-top-buttons {
      width: calc(
        var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2
      ) !important;
      max-width: var(--zen-sidebar-width) !important;
      min-width: var(--zen-toolbar-min-width) !important;
      inset-inline: var(--zen-toolbox-padding) !important;
      transition: width var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay),
        min-width var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay),
        max-width var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay);
    }

    > #nav-bar {
      margin: 0 !important;
      inset-inline-start: var(--zen-toolbox-padding) !important;
    }

    /* Hide empty top buttons */
    #zen-sidebar-top-buttons {
      display: none !important;
    }

    #zen-sidebar-foot-buttons {
      transition-property: flex-direction, justify-content;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      );
      transition-duration: var(--zen-mods-side-hover-transition-duration);
      transition-delay: var(--zen-mods-side-hover-transition-delay);
      transition-behavior: allow-discrete;
    }

    @media not (-moz-bool-pref: "zen.mods.side-hover.collapsed.bottom.workspaces") {
      #zen-workspaces-button {
        transition-property: flex-direction !important;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        ) !important;
        transition-duration: var(
          --zen-mods-side-hover-transition-duration
        ) !important;
        transition-delay: var(
          --zen-mods-side-hover-transition-delay
        ) !important;
        transition-behavior: allow-discrete !important;
      }
    }

    @media (-moz-bool-pref: "zen.mods.side-hover.collapsed.bottom.workspaces") {
      #zen-workspaces-button {
        transition-property: gap, justify-content !important;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        ) !important;
        transition-duration: var(
          --zen-mods-side-hover-transition-duration
        ) !important;
        transition-delay: var(
          --zen-mods-side-hover-transition-delay
        ) !important;
        transition-behavior: allow-discrete !important;

        toolbarbutton:not([active="true"]) {
          transition-property: visibility, position !important;
          transition-timing-function: var(
            --zen-mods-side-hover-transition-function
          ) !important;
          transition-duration: var(
            --zen-mods-side-hover-transition-duration
          ) !important;
          transition-delay: var(
            --zen-mods-side-hover-transition-delay
          ) !important;
          transition-behavior: allow-discrete !important;
        }
      }
    }

    .zen-workspace-tabs-section {
      &:not(.zen-current-workspace-indicator):not(.zen-essentials-container) {
        gap: var(--zen-toolbox-padding) !important;
      }
    }

    zen-folder {
      --zen-folder-tree-width: 2px;
      zen-folder {
        transition: margin-inline var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay) !important;
      }

      .tab-stack,
      .tab-background,
      .tab-content {
        --tab-min-width: 40px;
        transition-property: min-width, width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }

      .tab-group-folder-icon {
        transition: left var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay) !important;
      }

      .tab-group-label {
        transition: padding var(--zen-mods-side-hover-transition-function)
          var(--zen-mods-side-hover-transition-duration)
          var(--zen-mods-side-hover-transition-delay) !important;
      }
    }
    .tabbrowser-tab {
      transition: margin-inline var(--zen-mods-side-hover-transition-function)
        var(--zen-mods-side-hover-transition-duration)
        var(--zen-mods-side-hover-transition-delay) !important;

      @media (-moz-bool-pref: "zen.mods.side-hover.compat.arc") {
        transition: margin-inline var(--zen-mods-side-hover-transition-function)
            var(--zen-mods-side-hover-transition-duration)
            var(--zen-mods-side-hover-transition-delay),
          box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.24s cubic-bezier(0.22, 1.5, 0.36, 1),
          opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease !important;
      }
    }

    .tab-reset-pin-button {
      display: none !important;
      transition-property: display;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      );
      transition-duration: var(--zen-mods-side-hover-transition-duration);
      transition-delay: var(--zen-mods-side-hover-transition-delay);
      transition-behavior: allow-discrete;
    }
  }

  /* 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(--zen-mods-side-hover-expanded-width) !important;
    :root[zen-show-grainy-background="true"] &::after {
      opacity: var(--zen-grainy-background-opacity, 1) !important;
    }

    &::before {
      opacity: var(--zen-background-opacity, 1);
      transition: all var(--zen-mods-side-hover-transition-function)
        var(--zen-mods-side-hover-transition-duration)
        var(--zen-mods-side-hover-transition-delay);
    }

    #zen-media-controls-toolbar {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-property: opacity, visibility !important;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      ) !important;
      transition-duration: var(
        --zen-mods-side-hover-transition-duration
      ) !important;
      transition-delay: var(--zen-mods-side-hover-transition-delay) !important;
      transition-behavior: allow-discrete !important;
    }
  }

  /* 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])
    ) {
    tab:not([zen-essential]) .tab-background {
      min-width: var(--tab-min-width) !important;
    }

    tab[zen-essential] {
      .tab-stack,
      .tab-background,
      .tab-content {
        min-width: calc(var(--tab-min-width) - 4px) !important;
        transition-property: min-width, width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }
      .tab-icon-stack > .tab-icon-image {
        margin-inline: 0 !important;
      }
    }

    .zen-current-workspace-indicator {
      padding: calc(
        6px + var(--tab-inline-padding) + var(--zen-toolbox-padding)
      ) !important;
      :first-child {
        display: flex !important;
      }
    }

    zen-folder {
      zen-folder {
        --zen-folder-indent: 0 !important;
      }

      .tab-group-folder-icon {
        left: 6px !important;
      }

      .tab-group-label {
        padding-left: 40px !important;
      }

      .tabbrowser-tab {
        --zen-folder-indent: 0 !important;
      }

      .tab-stack,
      .tab-background,
      .tab-content {
        min-width: var(--tab-min-width) !important;
        transition-property: min-width, width;
        transition-timing-function: var(
          --zen-mods-side-hover-transition-function
        );
        transition-duration: var(--zen-mods-side-hover-transition-duration);
        transition-delay: var(--zen-mods-side-hover-transition-delay);
      }

      @media (-moz-bool-pref: "zen.mods.side-hover.collapsed.folders.tree-view") {
        zen-folder {
          .tab-group-container::after {
            display: none;
          }
        }

        .tab-group-container::after {
          opacity: 1;
          height: 100%;
        }
      }
    }

    /* Bottom buttons */
    #zen-sidebar-foot-buttons {
      flex-direction: column-reverse !important;
      justify-content: center !important;
    }

    @media (-moz-bool-pref: "zen.mods.side-hover.collapsed.bottom.workspaces") {
      #zen-workspaces-button {
        gap: 0 !important;
        justify-content: center !important;
        toolbarbutton:not([active="true"]) {
          visibility: hidden !important;
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          pointer-events: none !important;
        }
      }
    }

    @media not (-moz-bool-pref: "zen.mods.side-hover.collapsed.bottom.workspaces") {
      #zen-workspaces-button {
        flex-direction: column-reverse !important;
      }
    }

    #zen-media-controls-toolbar {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition-property: opacity, visibility !important;
      transition-timing-function: var(
        --zen-mods-side-hover-transition-function
      ) !important;
      transition-duration: var(
        --zen-mods-side-hover-transition-duration
      ) !important;
      transition-delay: var(--zen-mods-side-hover-transition-delay) !important;
      transition-behavior: allow-discrete !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: "zen.mods.side-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;
      }
    }
  }

  /* Support for tabs on the right */
  #navigator-toolbox[zen-right-side="true"] {
    direction: rtl !important;

    #titlebar,
    #zen-sidebar-top-buttons {
      direction: ltr !important;
    }

    @media (-moz-bool-pref: "zen.view.use-single-toolbar") {
      #nav-bar {
        direction: ltr !important;
      }
    }
  }
}