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

/**
 * Makes items in the main toolbar show on two (or three) lines.
 * Anything before urlbar in the customization order is shown at first line.
 * Urlbar is shown on second line, or first if no items are before it.
 * Anything after urlbar on the third line.
 *
 * Unfortunately items that don't fit in a row are not pushed to overflow menu. Instead,
 * they become invisible. Luckily that probably is less of a problem when using this style.
 */

:root{
  --uc-multirow-toolbar-height: 40px;
}
:root[uidensity="compact"]{
  --uc-multirow-toolbar-height: 34px;
}
:root[uidensity="touch"]{
  --uc-multirow-toolbar-height: 44px;
}
#nav-bar-customization-target{
  display: flex;
  flex-wrap: wrap;
}

#urlbar{
  --urlbar-toolbar-height: var(--uc-multirow-toolbar-height) !important;
}

#nav-bar-customization-target > [flex]{ flex-grow: 2 }
#nav-bar-customization-target > toolbarspring{ flex-grow: 1 }

#urlbar-container{
  width: calc(100% - 20px);
  margin-inline: 40px !important; /* Empty space on both sides of urlbar */
}