/*== ShyFox Floating Search =========================================================================================================================

Cool floating search panel


*/

/* about:config setting */
@media not (-moz-bool-pref: "shyfox.disable.floating.search") { 
  
  /* styles for urlbar */
  #urlbar[breakout-extend]{

    #urlbar-input {font-size: 23.5px !important;}
    #urlbar-input-container, .urlbar-input-container {height: 50px !important;}
    #urlbar-background {border-radius: var(--bigger-rounding) !important;}

    #urlbar-input-container, .urlbar-input-container {
      & > :is(box, image){
        height: 28px !important;
        margin-block: calc((50px - 28px) / 4) !important;
      }
    }

    position: fixed !important;
    z-index: 999999 !important;

    bottom: auto !important;
    top: 20vh !important;

    left: 18vw !important;
    right: 18vw !important;
    width: 64vw !important;

    /* cool translucent background */
    &:before{
      content: "";
      position: fixed;
      pointer-events: none;
      border-radius: var(--rounding);

      width: 200vw;
      height: 200vh;

      top: -30vh;
      left: -30vw;

      background-color: color-mix(in srgb, var(--bg-col) 80%, transparent);
    }
  } 
}