:root {
  /**
   * The number of buttons (back, forward, stop, etc) to the left of the URL bar
 * Add 1px here for each button 3 buttons = 3px
   */
  --buttons-left-of-urlbar: 3;

  /**
   * Width of `https://` text in your font as an m and a / may not be proportional in all fonts
   * Adjust this until only `https://` is hidden in the URL bar
   * +/-0.1 should work for most fonts
   */
  --https-text-offset-amount: -3.7em;
}

#navigator-toolbox {
  display: flex;
}

#urlbar-container {
  min-width: 18.2em !important;
}

#nav-bar {
  order: 0;
}

#titlebar {
  order: 1;
  width: 100%;
}

#page-action-buttons {
  margin-right: -100em;
  transition: all 0.3s ease-in;
}

:root[customizing] #nav-bar-customization-target,
#nav-bar:focus-within #nav-bar-customization-target,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
#nav-bar:hover #nav-bar-customization-target {
  margin-left: 0em;
  width: 50vw;
  transition-delay: 0s;
}

#urlbar-input-container .urlbar-input-box #urlbar-input {
  margin-left: var(--https-text-offset-amount) !important;
  transition: all 0.3s ease-in;
}

#urlbar-input-container .urlbar-input-box #urlbar-input:placeholder-shown {
  margin-left: 0 !important;
  transition-delay: 0.1s;
}

#nav-bar:hover .urlbar-input-box #urlbar-input,
#nav-bar:focus-within #urlbar-input-container .urlbar-input-box #urlbar-input {
  margin-left: 0em !important;
}

#urlbar-input-container:after {
  display: block;
  position: relative;
  pointer-events: none;
  float: right;
  width: 4em;
  margin-right: -0.2em;
  background: linear-gradient(to right, transparent, Field);
  z-index: 1;
  height: 1em;
  content: " ";
  transition: width 0.3s ease-in;
}

#nav-bar:hover #urlbar-input-container:after,
#nav-bar:focus-within #urlbar-input-container:after {
  width: 0;
}

#urlbar-input-container > box {
  position: relative;
  background-color: Field;
  z-index: 1;
}

#urlbar-input-container > box:hover {
  background-color: SelectedItem;
}

:root[customizing] #navigator-toolbox-background #nav-bar-customization-target,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
#nav-bar:hover #nav-bar-customization-target #page-action-buttons {
  margin-right: 0;
}

#nav-bar-customization-target {
  margin-left: calc(0px - calc(var(--buttons-left-of-urlbar) * 34px));
  min-width: 24em;
  width: 24em;
  transition: all 0.3s ease-in;
  transition-delay: 0.1s;
}

#nav-bar-customization-target ~ toolbarbutton,
#nav-bar-customization-target ~ toolbaritem {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

:root[customizing] #nav-bar-customization-target ~ toolbaritem,
:root[customizing] #nav-bar-customization-target ~ toolbarbutton,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbaritem,
#nav-bar:focus-within #nav-bar-customization-target ~ toolbaritem,
#nav-bar:hover #nav-bar-customization-target ~ toolbaritem,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbarbutton,
#nav-bar:hover #nav-bar-customization-target ~ toolbarbutton {
  opacity: 1 !important;
}

#identity-box.notSecure ~ .urlbar-input-box #urlbar-input,
#identity-box.chromeUI ~ .urlbar-input-box #urlbar-input {
  margin-left: 0em !important;
}