/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_popup_menubar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes menubar-items (File, Edit etc.) appear vertically as popup
 * When menubar is enabled, only the first item will be visible and it will use an icon instead of text.
 * When menubar is disabled and you hit Alt to show it, then the menubar items will appear in the corner as overlay.
 * Does NOT support toolbar buttons/items in menubar when in disabled mode.
 */

#toolbar-menubar{
  --uc-menubaritem-height: 28px;
  --uc-menubaritem-width: 40px;
}

#main-menubar > menu{visibility: collapse; transition: visibility 0ms linear 0.1s}
#main-menubar:hover > menu,    
#toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > #main-menubar > menu{visibility: visible}

:root:not([customizing],[sizemode="fullscreen"]) #menubar-items{
  display: block;
  position: fixed;
  z-index: 10;
  background-color: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
  inset-inline-start: 0;
}
:root[lwtheme]:not([customizing]) #menubar-items{
  background-color: var(--lwt-accent-color);
}
:root:not([customizing]) #main-menubar{
  flex-direction: column;
}
#main-menubar > menu { padding: 3px }
#main-menubar > menu > menupopup{
  margin: calc(0px - var(--uc-menubaritem-height)) 0 0 var(--uc-menubaritem-width);
}
#toolbar-menubar[autohide="true"][inactive] > #menubar-items{
  max-height: 0px;
  overflow: hidden;
}
#toolbar-menubar[autohide="true"]:not([inactive]){
  margin-bottom: calc(0px - var(--tab-min-height) + var(--tabs-navbar-shadow-size));
}
#toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){
  margin-inline-start: var(--uc-menubaritem-width);
}

:root:not([sizemode="fullscreen"]) #file-menu{
  fill: currentColor;
  visibility: visible;
  height: var(--uc-menubaritem-height);
  width: var(--uc-menubaritem-width);
  -moz-context-properties: fill;
  padding: 3px !important;
  background-repeat: no-repeat;
  background-position: center;
}

#main-menubar:not(:hover) > #file-menu{ background-image: url("chrome://devtools/skin/images/tool-storage.svg"); }

#file-menu > .menubar-text{ visibility: collapse }
#main-menubar:hover > #file-menu > .menubar-text{ visibility: visible }

#titlebar{
  opacity: 1 !important;
  will-change: unset !important;
  transition: none !important;
}