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

/*
Creates placeholders for window controls.
This is a supporting file used by other stylesheets and is mostly
unnecessary if window titlebar is enabled.

Should preferably be imported before other stylesheets, because some values in this style are deliberately overridden by other styles.
*/

/* Modify these values to match your preferences
These reserve extra space on both sides of the nav-bar to be able to drag the window */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 30px; /* left side*/
  --uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

/* Default width - used on Windows10+ */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px;
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}
/* On linux set width based on number of caption buttons.
One button */
@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 28px;
  }
}
/* Two buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
       (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
       (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 56px;
  }
}
/* Three buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}

@media (-moz-platform: macos){
  :root:is([tabsintitlebar]) {
    --uc-window-control-width: 72px;
  }
  :root:is([tabsintitlebar][sizemode="fullscreen"]) {
    --uc-window-control-width: 0;
  }
}

.titlebar-buttonbox{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{ height: 32px }

#nav-bar{
  border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
  background-clip: border-box !important;
}

/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

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

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }
#titlebar{
  will-change: unset !important;
  transition: none !important;
  opacity: 1 !important;
}
#TabsToolbar{ visibility: collapse !important }
:root[sizemode="fullscreen"] #titlebar{ position: relative }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  flex-grow: 1;
  align-items: stretch;
  background-attachment: scroll, fixed, fixed;
  background-position: 0 0, var(--lwt-background-alignment), right top;
  background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat;
  background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto;
  padding-right: 20px;
}
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{
  background-color: var(--lwt-accent-color);
  background-image: linear-gradient(var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none);
  mask-image: linear-gradient(to left, transparent, black 20px);
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

#TabsToolbar, #sidebar-header {
  display: none !important;
}

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

/* Show sidebar only when the cursor is over it.
   The border controlling sidebar width will be removed so you'll need to modify
   these values to change width. 
   By default the internal layout of sidebar changes when hovered, but this can
   be changed by setting pref "userchrome.autohide-sidebar.static-layout.enabled" to true
 */

/* Note: If you want only *some* sidebar to be auto-hidden, then you can use [sidebarcommand] attribute selector.
   For example, to only affect Sidebery's sidebar replace all instances of #sidebar-box with
   #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"].
   To find the sidebarcommand value for any other sidebar, open that sidebar and use Browser Toolbox to inspect it.
   See: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
*/
:where(#main-window) #browser{
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 210px;
}
#main-window[sizemode="fullscreen"] #browser{
  --uc-sidebar-width: 1px;
}
#sidebar-box{
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar,3);
  background-color: inherit;
  /* This directionality flipper is played so that sidebar "grows" into the right direction */
  direction: ltr;
  &:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
    direction: rtl;
  }
  > :-moz-locale-dir(rtl){
    direction: rtl;
  }
}

#main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > .sidebar-browser-stack > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend],[sidebar-positionend]) > :-moz-locale-dir(rtl),
#sidebar-box:is([positionend],[sidebar-positionend]) > *{
  border-inline-width: 1px 0px;
}
@media -moz-pref("sidebar.revamp") {
  #sidebar, #sidebar-header{ border-style: none }
  #sidebar-box{ padding: 0 !important; }
}
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}
@media -moz-pref("userchrome.autohide-sidebar.static-layout.enabled"){
  #sidebar-box{
    min-width: var(--uc-sidebar-width) !important;
    contain: size;
    box-shadow: var(--content-area-shadow);
  }
  :root:not([inDOMFullscreen]) #tabbrowser-tabbox:not([sidebar-positionend]){
    margin-inline: var(--uc-sidebar-width) 0;
  }
  #sidebar-box:not([sidebar-positionend]){
    position: absolute !important;
    height: 100%;
    overflow: hidden;
    transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
    &:hover{
      min-width: var(--uc-sidebar-hover-width) !important;
      transition-delay: 0ms !important;
    }
  }
  #sidebar,#sidebar-header{
    min-width: var(--uc-sidebar-hover-width) !important;
    will-change: unset !important;
  }
  #sidebar-box[sidebar-positionend] > :is(#sidebar-header,#sidebar){
    transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
    transition-property: transform !important;
  }
  #sidebar-box[sidebar-positionend]:hover > :is(#sidebar-header,#sidebar){
      transform: translateX(0);
      transition-delay: 0ms !important;
    }
  }
}