/* TOP BAR */
#navigator-toolbox{
  --uc-navigationbar-width: 40vw;
}

/* Remove overflow button */
#nav-bar-overflow-button { display: none; }
  
/* remove alltabs button */
#alltabs-button { display: none; }

/* Change background color of toolbar */
#navigator-toolbox-background { 
  background: var(--toolbar-field-border-color) !important; 
}

/* Fix vertical spacing of tabs */
#TabsToolbar { 
  margin-top: -1px; 
}

/* Move new tab to far right */
#tabbrowser-arrowscrollbox-periphery {
  margin-left: auto;
}

/* Media queries for width of nav bar */
@media screen and (max-width: 1000px){
  #navigator-toolbox{
    --uc-navigationbar-width: 50vw;
  }
}
@media screen and (max-width: 800px){
  #navigator-toolbox{
    --uc-navigationbar-width: 60vw;
  }
}

/* Change look of tabs in smaller view */
@media screen and (max-width: 800px){
  .tab-background { 
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  #TabsToolbar{
    margin-left: 5px;
  }
}


/* COMBINE TOP BAR */
/* Combine top bar into single line if width >= 800px */
@media screen and (min-width: 800px){
  :root {
    --uc-toolbar-height: 36px; /* Half height bar */
  }

  /* Modify these to change relative widths or default height */
  #navigator-toolbox{
    margin-bottom: 0px;
  }
  
  #titlebar {
    margin-top: 2px;
  }

  #TabsToolbar{
    margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */
    margin-top: -4px;
    margin-bottom: 2px;
  }

   /* Tabs extend to bottom of bar */
  .tab-background { 
    margin-bottom: 0 !important;
    margin-top: 2px !important; /* See above navbox rule */
  }

   /* Center tab buttons */
  #tabs-newtab-button, 
  #alltabs-button
  { 
     margin-top: 4px !important; 
  }

  /* Integrate url / nav bar */
  #nav-bar{
    margin-right:calc(100vw - var(--uc-navigationbar-width));
    margin-top: calc(0px - var(--uc-toolbar-height));
    border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0;
  }

  /* 1px margin on touch density causes tabs to be too high */
  .tab-close-button{ 
    margin-top: 0 !important 
  }

  /* Make opened urlbar overlay the toolbar */
  #urlbar[open]:focus-within{ 
    min-width: 50vw !important; 
  }
  
  /* Remove min and max width of urlbar */
  #urlbar-container { 
    width: 0 !important;
  }
  
  /* Fix customization view */
  #customization-panelWrapper .panel-arrowbox .panel-arrow{ 
    margin-inline-end: initial !important; 
  }
  
  /* Shorter findbar */
  findbar {
    width: 600px !important;
  }
}


/* FINDBAR */
findbar {
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 0 5px;
  padding: 0 !important;
  background: var(--toolbar-field-border-color, --toolbar-field-background-color) !important; /* TODO fallback color doesn't work */
  border-top-width: 0 !important;
}

findbar .findbar-container {
  padding-bottom: 5px !important; /* Move search bar closer to left edge */
  padding-top:    2px !important; /* Move search bar closer to left edge */
  height: max-content !important;
  gap: 2px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Hide not found text etc */
findbar description {
  display: none;
}

/* Move found matches label (roughly) into the textbox */
findbar label.found-matches {
  position: absolute;
  top: 6.5px;
  right: 120px;
  background: var(--toolbar-field-background-color);
  color: color-mix(in srgb, var(--toolbar-non-lwt-textcolor), transparent 46%) !important;
  padding-left: 1ex;
}

/* Force checkboxes onto second line */
findbar .findbar-container hbox {
  width: 100%;
}
/* Force textbox to fill up first line */
findbar .findbar-container hbox .findbar-textbox {
  width: 100% !important;
}

/* Make checkboxes visible */
findbar .findbar-container checkbox{
  --checkbox-unchecked-bgcolor: var(--toolbar-bgcolor);
  --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, var(--toolbar-bgcolor) 80%, transparent);
  --checkbox-unchecked-active-bgcolor: var(--toolbar-bgcolor);
}


/* BOOKMARK BAR */
@-moz-document url(chrome://browser/content/browser.xhtml){  
  #PersonalToolbar[collapsed=false]{
    background: var(--toolbar-field-background-color) !important;
  }
  /* Space out bookmark items */
  .bookmark-item .toolbarbutton-text {
    padding: 2.5px 4px;
  }
}