/* All overrides for compact mode go here */

@media not (-moz-bool-pref: "zen.view.compact") {
  #sidebar-box {
    margin-top: 0 !important;
  }
}

@media (-moz-bool-pref: "zen.view.compact") {
  :root[sizemode="fullscreen"],
  #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
  
  #navigator-toolbox {
    --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
    --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
    position: absolute;
    display: block;
    transition: 200ms ease-in-out !important;
    transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2)));
    opacity: 0;
    line-height: 0;
    z-index: 2;
    height: 100%;
    margin: 0;
    padding: var(--zen-compact-toolbox-margin) !important;

    & #titlebar {
      border: 1px solid var(--zen-colors-border);
      transition-delay: 200ms;
      background: var(--zen-colors-tertiary) !important;
      padding: 0 5px;
      border-radius: var(--zen-panel-radius);
    }

    & > * {
      pointer-events: none;  
    }

    &, & #titlebar {
      min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
    }
  }

  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
    #navigator-toolbox {
      width: fit-content !important;
    }
  }

  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
    #navigator-toolbox {
      min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
    }
  }

  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
  #sidebar-box:not([positionend="true"]) {
    margin-right: 0 !important;
    margin-left: var(--zen-sidebar-web-panel-spacing) !important;
  }

  #sidebar-box[positionend="true"] {
    margin-left: 0 !important;
    margin-right: var(--zen-sidebar-web-panel-spacing) !important;
  }

  #sidebar-splitter {
    margin: 0 !important;
  }

  @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
    #navigator-toolbox {
      /* Remove the top margin */
      /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
       * The top margin is calculated by taking the following factors into account:
       *  1. Element separation
       *  2. Extra margin to separate from the webview
       *  3. Add element separation variable, to avoid overlaping with the toolbar
       *  4. Calculate toolbar height, taken from zen-urlbar.css
       */
      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
    
      :root[zen-sidebar-legacy="true"] & {
        --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
      }
    }

    #zen-sidebar-web-panel-wrapper,
    #sidebar-box {
      margin-top: 0 !important;
    }
  }
  
  #navigator-toolbox:hover,
  #navigator-toolbox:focus-within,
  #navigator-toolbox[zen-user-show],
  #navigator-toolbox[movingtab],
  #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
  #navigator-toolbox:has(.tabbrowser-tab:active),
  #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
    transform: none !important;
    opacity: 1;

    & > * {
      pointer-events: all;  
    }
  }
  
  #navigator-toolbox > *{ line-height: normal; }
  
  #navigator-toolbox,
  #navigator-toolbox > *{
    -moz-appearance: none !important;
  }

  #zen-sidebar-splitter {
    display: none !important;
  }
  
  /* Don't apply transform before window has been fully created */
  :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
  
  :root[customizing] #navigator-toolbox{
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  #navigator-toolbox[inFullscreen] > #PersonalToolbar,
  #PersonalToolbar[collapsed="true"]{ display: none }

  :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
    margin-left: var(--zen-element-separation) !important;
  }

  @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
    #zen-appcontent-navbar-container {
      --urlbar-height: unset;
      transition: .2s ease-in-out;
      transform: translateY(calc(-100% + var(--zen-element-separation)));
      opacity: 0;
      position: absolute;
      width: 100%;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom: 1px solid var(--zen-colors-border);
      top: 0;
      background: var(--zen-colors-tertiary);
      z-index: 2;
      transition: .2s ease-in-out;
    }

    #zen-appcontent-navbar-container:hover,
    #zen-appcontent-navbar-container:focus-within,
    #zen-appcontent-navbar-container[zen-user-show],
    #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
    #zen-appcontent-navbar-container:has(*[open="true"]) {
      transform: translateY(0);
      opacity: 1;
    }

    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
      margin-top: var(--zen-element-separation) !important;
    }

    #titlebar {
      padding-top: 5px !important;
    }

    #zen-sidebar-web-panel-wrapper {
      margin-top: 10px !important;
    }
  }

  @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
    #navigator-toolbox {
      right: 0 !important;
      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
    }

    #navigator-toolbox > vbox {
      float: right;
    }

    #navigator-toolbox:hover,
    #navigator-toolbox:focus-within,
    #navigator-toolbox[zen-user-show],
    #navigator-toolbox[movingtab],
    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
      transform: none !important;
      opacity: 1;
  
      & > * {
        pointer-events: all;  
      }
    }
  }
}