/* 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') {
  /* Set the extra paddings */
  #tabbrowser-tabpanels {
    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
      padding-right: var(--zen-element-separation);
    }

    #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
      padding-left: var(--zen-element-separation);
    }
  }

  #zen-sidebar-splitter {
    display: none !important;
  }

  #navigator-toolbox {
    position: absolute;
    height: 98%;
    z-index: 9;
    background: var(--zen-themed-toolbar-bg) !important;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
    border-top-right-radius: var(--zen-border-radius);
    border-bottom-right-radius: var(--zen-border-radius);
    border: 1px solid var(--zen-colors-border);
    border-left-width: 0;
    padding: var(--zen-toolbox-padding) !important;
    transition: all 0.1s ease-in-out;
    right: calc(100% - var(--zen-element-separation));
    top: 50%;
    opacity: 0;

    transition-delay: 0.8s;
    backface-visibility: hidden;

    transform: translate3d(0, calc(-50% - 2px), 0);

    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
      border-left-width: 1px;
      border-right-width: 0;

      left: calc(100% - var(--zen-element-separation));
      right: unset;

      border-top-left-radius: var(--zen-border-radius);
      border-bottom-left-radius: var(--zen-border-radius);

      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  
  #navigator-toolbox:hover,
  #navigator-toolbox:focus-within,
  #navigator-toolbox[zen-user-show],
  #navigator-toolbox[flash-popup],
  #navigator-toolbox[has-popup-menu],
  #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)) {
    opacity: 1;
    transition-delay: 0s !important;
    
    transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0);
    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
      transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), calc(-50% - 2px), 0);
    }
  }
}