:root {
  --uc-navbar-width-origin: 40vw;
  --uc-navbar-width: var(--uc-navbar-width-origin);
  --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));

  --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));

  @include Option("userChrome.autohide.fill_urlbar") {
    --uc-navbar-width-origin: 50vw;
    --uc-navbar-width: 24em;
  }
}

#nav-bar {
  --uc-navbar-double-block: calc(2 *  var(--uc-navbar-block, 0px));
  height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important;
  margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important;
  margin-bottom: var(--uc-navbar-block, 0px) !important;
  // transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
}

#titlebar,
#toolbar-menubar,
#TabsToolbar {
  transform: translateY(var(--uc-navbar-block, 0px));
}
#TabsToolbar > .titlebar-buttonbox-container {
  transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
}

#navigator-toolbox {
  position: relative;
  z-index: 2;
}

@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
  :root {
    --uc-navbar-gap: 10px;
    --uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size)

    &[uidensity="compact"] {
      --uc-navbar-block: 1px;
    }
    &[uidensity="touch"] {
      --uc-navbar-block: 3px;
    }
  }

  #nav-bar {
    --toolbarbutton-inner-padding: 6px; /* Original: 8px */
    border-radius: var(--uc-rounding-toolbar, var(--tab-border-radius, 4px));
  }

  #nav-bar,
  #nav-bar-customization-target {
    @include BoxAlign("center");
  }

  #urlbar-container {
    // Minus --toolbarbutton-inner-padding
    min-height: calc(var(--urlbar-container-height) - 2px) !important;
  }
}

@include Option("userChrome.tabbar.one_liner.combine_navbar") {
  #navigator-toolbox {
    background-color: var(--toolbar-bgcolor) !important;
  }

  #nav-bar {
    --lwt-tabs-border-color: transparent; // box-shadow
    background-color: unset !important; // var(--toolbar-bgcolor)
    background-image: unset !important; // var(--toolbar-bgimage)
  }
}

#urlbar-container {
  // https://github.com/mozilla/gecko-dev/commit/f30aeeee449c753d7494c788cae58dae7e1a92e5
  // https://github.com/mozilla/gecko-dev/commit/42a66e80d97bc07b25be913c02fd004ee9c7ca1a
  min-width: calc(var(--uc-oneliner-urlbar-base-width, 50px) + 24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding))
}
#urlbar[breakout][breakout-extend] {
  min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))) !important;
}

#PersonalToolbar {
  // for URL Bar
  position: relative;
  z-index: -1;
}

toolbarspring.chromeclass-toolbar-additional {
  display: none !important;
}

@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
  #TabsToolbar {
    margin-inline-start: var(--uc-navbar-margin) !important;
  }
  #nav-bar {
    margin-inline-end: var(--uc-tabbar-width) !important;
  }
  .titlebar-spacer[type="pre-tabs"] {
    display: none !important;
  }
}
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
  #TabsToolbar {
    margin-inline-end: var(--uc-navbar-margin) !important;
  }
  #nav-bar {
    margin-inline-start: var(--uc-tabbar-width) !important;
  }
  .titlebar-spacer[type="post-tabs"] {
    display: none !important;
  }
}
