/*== ShyFox Navbar ==================================================================================================================================

Navigation bar on top of the window


--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------

*/

/* local variables */
:root{
  --navbar-real-wdt: var(--navbar-wdt);
}

/* if navbar is not hidden, this window is not floating popup and not in fullscreen video */
#main-window:not(:is([titlepreface*="‌"], [titlepreface*="‍"]))[chromehidden=""]:not([inDOMFullscreen="true"]){
  /* set top margin to navbar height */
  --top-margin: calc(var(--toolbar-item-hgt)) !important;
}

/* padding tweak */
.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), .toolbaritem-menu-buttons {
  margin-inline-end: var(--toolbar-start-end-padding) !important;
}
#nav-bar-overflow-button {margin-inline-end: calc(var(--toolbar-start-end-padding) / 2) !important;}

/* limit items height */
#nav-bar-customization-target > * {max-height: var(--toolbar-item-hgt) !important;}
#nav-bar-customization-target {height: var(--toolbar-item-hgt) !important;}

#downloadsFooterButtons toolbarseparator {
  margin-top: 6px !important;
  padding-bottom: 2px !important;
}

/* 

--- NAVBAR SHOWN ------------------------------------------------------------------------------------------------------------------------------------

*/

#nav-bar{
  position: fixed !important;
  z-index: 3 !important;
  
  transition: var(--transition) !important;
  
  background-color: transparent !important;
  border-top: 0px solid transparent !important;
  
  top: 0px;
  right: auto !important;
  
  & > * {opacity: var(--dyn-opct);}
}

@media not (-moz-bool-pref: "sidebar.revamp") {
  #nav-bar {
    left: var(--left-margin) !important;
  }
}

/* centered navbar text */
#urlbar:not(:is(
  [breakout][breakout-extend],
  :focus-within
) ) {
  #urlbar-input {text-align: center !important}
}

/* tab loading progress in urlbar background */
#main-window:not([customizing]):not([titlepreface*="‌"]):has(.tabbrowser-tab[selected][busy]) #urlbar:not([breakout-extend]) #urlbar-background{
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--shy-color) 10%, transparent) 0 var(--shy-tab-load-pcent),
    color-mix(in srgb, var(--bt-col) 10%, transparent) var(--shy-tab-load-pcent) 100%
  ) !important;
}

/* space for window controls and magic width calculations (это пиздец) */
#main-window:not([customizing])[titlepreface*="​"]:not(:is([titlepreface*="‌"], [titlepreface*="‍"])){
  #nav-bar{
    margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-margin));
    width: calc(
      100vw
      - var(--left-margin)
      - var(--right-margin)
      - var(--buttonbox-right-wdt) 
      + var(--nav-rgt-btnbx-margin)
    ) !important;
  }
}

#main-window:not([customizing]):not([titlepreface*="​"]):not(:is([titlepreface*="‌"], [titlepreface*="‍"])){
  #nav-bar{
    margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-button));
    width: calc(
      100vw
      - var(--left-margin)
      - var(--right-margin)
      - var(--buttonbox-right-wdt) 
      + var(--nav-rgt-btnbx-button)
    ) !important;
  }
}

#main-window:not([customizing])[titlepreface*="᠎"]:not(:is([titlepreface*="‌"], [titlepreface*="‍"])){
  #nav-bar{
    margin-left: calc(var(--buttonbox-left-wdt) - var(--nav-lft-btnbx-margin));
    width: calc(
      100vw
      - var(--left-margin)
      - var(--right-margin)
      - var(--buttonbox-left-wdt) 
      + var(--nav-lft-btnbx-margin)
      - var(--buttonbox-right-wdt) 
      + var(--nav-rgt-btnbx-button)
    ) !important;
  }
}

#main-window:not([customizing])[titlepreface*="᠎"][titlepreface*="​"]:not(:is([titlepreface*="‌"], [titlepreface*="‍"])){
  #nav-bar{
    width: calc(
      100vw
      - var(--left-margin)
      - var(--right-margin)
      - var(--buttonbox-left-wdt) 
      + var(--nav-lft-btnbx-margin)
      - var(--buttonbox-right-wdt) 
      + var(--nav-rgt-btnbx-margin)
    ) !important;
  }
}

/* 

--- NAVBAR HIDDEN -----------------------------------------------------------------------------------------------------------------------------------

*/


/* activate style when navbar hidden or clean mode enabled (and not in customizing page) */
#main-window:is([titlepreface*="‌"], [titlepreface*="‍"]):not([customizing]){
  
  #nav-bar{
    overflow: visible !important;
    z-index: 4 !important;
    
    border-radius: var(--big-rounding);
    
    width: var(--navbar-real-wdt) !important;
    max-width: calc(
      100vw 
      - var(--left-margin)
      - var(--right-margin)
    );
    
    top: calc(
      var(--margin) 
      + var(--panel-hide-ldg) 
      - var(--toolbar-item-hgt) 
    );
    
    left: calc(
      (
        100vw 
        - var(--navbar-real-wdt) 
        + var(--left-margin) 
        - var(--right-margin) 
      ) / 2 
    ) !important;
    
    /* make all panel content invisible (it will visible when hover) */
    #nav-bar-customization-target > *:not(#unified-extensions-button),
    #nav-bar-overflow-button
    {
       transition: var(--transition) !important;
       opacity: 0 !important;
    }
    
    /* hover target (invisible box between window edge and panel) */
    #nav-bar-customization-target::before{
      content: "";
      position: absolute;
      z-index: -999;
      background-color: var(--debug-col);
      height: 500%;
      width: 100%;
      bottom: 0px;
    }
    
    /* indication bar (line on window edge) */
    &::before{
      content: "";
      position: absolute;
      transition: var(--transition);
      
      top: calc(
        100% 
        - var(--panel-hide-ldg) 
        - var(--margin) 
        + var(--hide-bar-padding)
      );
      
      height: calc(var(--margin) - var(--hide-bar-padding) * 2);
      width: calc(100% - var(--hide-bar-wdt-pad));
      left: calc(var(--hide-bar-wdt-pad) / 2);
      
      border-radius: var(--rounding);
      background-color: var(--bt-col);
      opacity: var(--hide-bar-opct);
    }
  }
  
  /* tab loading progress bar */
  &:has(.tabbrowser-tab[selected][busy]) #nav-bar::before{
    background: linear-gradient(
      to right,
      var(--shy-color) 0 var(--shy-tab-load-pcent),
      var(--bt-col) var(--shy-tab-load-pcent) 100%
    ) !important;
  }
  
  /* tab loading progress on whole panel */
  &:has(.tabbrowser-tab[selected][busy]) #nav-bar::after{
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -999;
    width: 100%;
    height: 100%;
    bottom: 0px;
    border-radius: var(--big-rounding);
    opacity: 0;
    background: linear-gradient(
      to right,
      var(--shy-color) 0 var(--shy-tab-load-pcent),
      transparent var(--shy-tab-load-pcent) 100%
    );
  }
  
  /* hotfix */
  #urlbar{
    visibility: collapse;
  }

  #urlbar-container::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: var(--rounding);
    background-color: var(--toolbar-field-background-color);
  }
  
  
  /* show navbar on hover or focus */
  &:has(
    #nav-bar-customization-target:hover #unified-extensions-button:not(:hover),
    #nav-bar-customization-target *:not(:is(#unified-extensions-button, #firefox-view-button))[open],
    #nav-bar-customization-target #searchbar:focus-within,
    #urlbar:focus-within,
    #urlbar[breakout][breakout-extend],
    #nav-bar-overflow-button[open],
    #nav-bar-overflow-button:hover
  ) {
    #nav-bar{
      
      /* hotfix */
      #urlbar{
        visibility: visible !important;
        transition: visibility 0s linear var(--trans-dur);
        min-width: var(--urlbar-width) !important;
      }

      
      top: calc(var(--top-margin) + var(--margin));
      
      background-color: var(--tb-col) !important;
      
      /* corners, shadow */
      border: var(--outline) !important;
      outline: var(--shadow) !important;
      
      #nav-bar-customization-target > *:not([disabled="true"]),
      #nav-bar-overflow-button {opacity: 1 !important;}
      #nav-bar-customization-target > *[disabled="true"] {opacity: 0.5 !important;}
      
      &::before {opacity: 0;}
      &::after {opacity: 0.1;} /* opacity of tab load progress indicator */
    }
  }
  
  /* hide all  */
  &[titlepreface*="‍"]{
    #nav-bar-customization-target > *:not(#urlbar-container, #unified-extensions-button) {display: none !important;}
  }
  
  /* adaptive navbar width */
  @media (max-width: 1000px) {
    #nav-bar{
      --navbar-real-wdt: calc(
        100vw 
        - var(--margin) * 2
        - var(--right-margin)
        - var(--buttonbox-left-wdt)
        - var(--buttonbox-right-wdt)
      ) !important;
      
      max-width: none !important;
      left: calc(
        var(--margin)
        + var(--buttonbox-left-wdt)
      ) !important;
    }
  }
}

/*

--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------

*/

#main-window[customizing]{
  #nav-bar{
    left: 140px !important;
    right: 140px !important;
    
    width: calc(100vw - 280px) !important;
    
    top: var(--margin) !important;
    border-radius: var(--big-rounding) !important;
    
    background-color: var(--bg-col) !important;
  }
  
  #urlbar-background, #searchbar {background-color: var(--tb-col) !important;}
}