/* 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;
}

/* Fix spacing around tabs by removing nav bar top border */
#nav-bar {
  border: none !important;
}

/* 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-block: .2em !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;
    padding-top: 1px; /* Top bar is cut off otherwise */
  }

  #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: 3px !important; /* See above navigator-toolbox rule. Avoid cutting off top */
  }

   /* 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;
    border-right:  1px solid ThreeDShadow !important;
    box-shadow: 0 0 4px rgba(0,0,0,.4) !important;
  }

  /* 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;
  }

  /* Shorten findbar */
  findbar {
    width: 600px !important;
    border-radius: 0 0 0 5px;
    border-bottom: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.4); /* Move down 2px so it doesn't go over the tab bar */
  }
}


/* FINDBAR */
findbar {
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 !important;
  padding-top: 1px !important;
  background: -moz-headerbar Field !important;
  border-top-width: 0px !important;
  border-bottom: 1px solid ThreeDShadow;
}

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;
}

/* Force textbox to fill up first line */
findbar .findbar-textbox {
  width: 100% !important;
  background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
}

/* Hide description showing wrap conditions etc. */
findbar description {
  display: none;
}

/* Move found matches label (roughly) into the textbox */
findbar label.found-matches,
findbar description {
  position: absolute;
  top: 6.5px;
  right: 110px;
  color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important;
  /* So this text overrides the text below, TODO find a more elegant solution */
  padding-inline: 1ex;
  background: Field;
}

/* Show description when it says "Phrase Not Found" */
findbar description[status=notfound] {
  display: inline-block;
}

/* Force checkboxes onto second line */
findbar .findbar-container hbox {
  width: 100%;
}


/* BOOKMARK BAR */
@-moz-document url(chrome://browser/content/browser.xhtml) {
  #PersonalToolbar {
    background: -moz-headerbar Field !important;
    border-top: 1px solid ThreeDShadow !important;
    z-index: 1000; /* To not be affected by shadow from navbar */
  }
  /* Space out bookmark items */
  .bookmark-item .toolbarbutton-text {
    padding: 2.5px 4px;
  }
}