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

/* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */

#main-window > body > box {
  // #navigator-toolbox-background for compatibility
  z-index: 1;
}

findbar {
  @include BoxOrder(0);
  position: relative;

  height: 0 !important;
  overflow: visible;
  border-top: none !important;
  padding: 0 !important;
  background: none !important;
  pointer-events: none;
  z-index: 1;

  // Move findbar so it isn't over the scrollbar
  // Delete if you want findbar to begin from right window edge
  margin-right: 16px;
  border-right: 1px solid var(--chrome-content-separator-color);

  &::before {
    content:"";
    @include Box;
    position: absolute;
    @include BoxFlex(200);
  }
}

.findbar-container,
.findbar-closebutton {
  border-style: solid;
  border-color: var(--chrome-content-separator-color);
  background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important;
  pointer-events: auto;
  height: 33px !important;
}

.findbar-container {
  @include BoxDirection("reverse");
  border-width: 0 0 1px 1px;
  border-radius: var(--uc-rounding-toolbar, var(--toolbarbutton-border-radius)) 0 0 var(--uc-rounding-toolbar, var(--toolbarbutton-border-radius)) !important;

  > .findbar-find-fast {
    padding: var(--toolbarbutton-inner-padding) 1px;
    margin: 0 !important;
  }
  > .findbar-find-status {
    @include Box;
    overflow: hidden;
    text-overflow: ellipsis;
    @include BoxFlex(1);
  }
  > hbox {
    margin-inline: 5px;
  }
}

.findbar-closebutton {
  width: 30px !important; /* Original: 24px */
  margin: 0 !important;
  border-width: 0 1px 1px 0px;
  border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important;
  padding: 2px 5px 2px 3px !important;
  overflow: clip;

  image {
    padding: 4px;
    border-radius: var(--toolbarbutton-border-radius);
  }
  &:hover > image{
    background: var(--toolbarbutton-hover-background) !important;
  }
}
