/* TODO create separate repo for this */
/* TOP BAR */
#navigator-toolbox {
  --uc-navigationbar-width: 40vw;

  #TabsToolbar {
    /* Move new tab to far right */
    #tabbrowser-arrowscrollbox-periphery { margin-left: auto }
    /* remove alltabs button */
    #alltabs-button { display: none }
  }

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

  #PersonalToolbar {
    /* Change background color of bookmarks toolbar */
    background: var(--toolbox-bgcolor) !important;
    /* Adjust spacing of toolbar items */
    #PlacesToolbarItems { gap: .35rem; margin-block: .2rem }
  }
}

/* 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) {
  #TabsToolbar-customization-target {
    /* TODO fix w/o. Don't allow tabbar to move up when moving tabs */
    height: 37px;
    /* Make tabs fill more vertical space */
    .tab-background { margin-block: 1px !important }
  }
}


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

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

      #TabsToolbar-customization-target {
        height: var(--uc-toolbar-height);

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

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

       /* 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;
      /* Fix spacing around tabs by removing nav bar top border */
      border: none !important;

      #urlbar-container {
        /* Remove min and max width of urlbar */
        width: 0 !important;
        /* Make opened urlbar overlay the toolbar */
        #urlbar[open]:focus-within { min-width: 50vw !important }
      }
    }

    /* Bottom of tags is cut off by 1px without this */
    #PersonalToolbar { margin-top: 1px }
  }

  /* 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-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-textbox {
      width: 100% !important;
      background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
    }

    description {
      /* Hide description showing wrap conditions etc. */
      display: none;
      /* Show description when it says "Phrase Not Found" */
      &[status=notfound] { display: inline-block }
    }

    /* Move found matches label (roughly) into the textbox */
    label.found-matches,
    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;
    }

    /* Force checkboxes onto second line */
    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 }
  }
}