// Main URL bar wrapper with paddings
#urlbar-container {
  --urlbar-container-height: 42px !important;
}

// Just URL bar without top and bottom paddings
#urlbar {
  --urlbar-height: 34px !important;
  --urlbar-toolbar-height: 42px !important;
}

html,
body {
  --urlbar-min-height: 34px !important; // Minimum Height
  --toolbarbutton-height: 34px !important; // Button Height
  --toolbarbutton-inner-padding: 6px !important; // Button Inner Padding
  --urlbar-icon-border-radius: 100px !important; // Icon Border Radius
  --toolbarbutton-border-radius: 100px !important; // Button Border Radius
  --urlbar-container-padding: 2px !important; // Container Padding
}

// Fix Icons sizes after URL Bar Size Change
.identity-box-button,
#notification-popup-box,
#tracking-protection-icon-container,
.urlbar-page-action,
#urlbar-go-button,
.search-go-button {
  width: auto !important;
  height: calc(var(--urlbar-height) - var(--urlbar-container-padding) * 2) !important;
  border-radius: var(--urlbar-icon-border-radius) !important;
  padding: 0 8px !important;
  -moz-box-pack: center !important;
  align-items: center !important;
  justify-content: center !important;
}

#notification-popup-box {
  padding: 0 !important;
}

.notification-anchor-icon {
  padding: 0 !important;
}

#urlbar {
  &[open] {

    #urlbar-background,
    .urlbar-background,
    #searchbar {
      border-radius: 16px !important;
      border: none !important;
      box-shadow: get-var("elevation-4") !important;

      @media (prefers-color-scheme: light) {
        box-shadow: get-var("elevation-3") !important;
      }
    }
  }

  &:not([open])[focused] {

    #urlbar-background,
    .urlbar-background,
    #searchbar {
      box-shadow: none !important;
    }
  }
}

// Fix URL Input Font Size
#urlbar-input,
#urlbar,
#searchbar {
  font: unset !important;
  font-size: 14px !important;
}

@include moz-pref-media("not userChrome.theme-default") {
  #urlbar:is([open], [focused]) {

    #urlbar-background,
    .urlbar-background,
    #searchbar {
      background-color: get-var("urlbar-background-color-open") !important;
    }
  }
}

// hide url bar search input placeholder if focused
#urlbar:is([open], [focused]) {
  #urlbar-input::placeholder {
    color: transparent !important;
  }
}

.searchbar-textbox:focus::placeholder {
  color: transparent !important;
}

// remove theme navbar top border
#nav-bar {
  box-shadow: none !important;
  border-top: none !important;
}

// nav bar bottom content separator border
#navigator-toolbox {
  // border-bottom: 1px solid var(--chrome-content-separator-color);
  border-bottom: 1px solid get-var("content-separator-color") !important;
}

// Url bar bg color change on hover, feat: https://github.com/edelvarden/material-fox-updated/issues/69
#urlbar-background,
.urlbar-background,
#searchbar {
  transition-property: background-color !important;
  transition-duration: get-var("short-duration") !important;
  transition-timing-function: get-var("point-to-point") !important;
}

#urlbar:not([focused]):hover #urlbar-background,
#urlbar:not([focused]):hover .urlbar-background,
#searchbar:hover {
  background-color: get-var("urlbar-background-color-hover") !important;
}

#urlbar:is([open], [focused]) #urlbar-background,
#urlbar:is([open], [focused]) .urlbar-background {
  transition-duration: 0s !important;
}