// accent color mix for title bar and url bar backgrounds
@include moz-pref-media("not userChrome.theme-default") {

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

  // default titlebar background color, when not theme-material
  @include moz-pref-media("not userChrome.theme-material") {

    #navigator-toolbox,
    #toolbar-menubar,
    #TabsToolbar,
    #titlebar {
      background-color: get-var("background-color-0") !important;
    }
  }
}


// default dark mode styles
@media (prefers-color-scheme: dark) {
  @include moz-pref-media("not userChrome.theme-default") {

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

    // default titlebar background color, when not theme-material
    @include moz-pref-media("not userChrome.theme-material") {

      #navigator-toolbox,
      #toolbar-menubar,
      #TabsToolbar,
      #titlebar {
        background-color: get-var("background-color-0") !important;
      }
    }
  }
}

// special light mode titlebar background color for theme-chrome-refresh or theme-material
@media (prefers-color-scheme: light) {
  @include moz-pref-media("userChrome.theme-chrome-refresh or userChrome.theme-material") {

    #navigator-toolbox,
    #toolbar-menubar,
    #TabsToolbar,
    #titlebar {
      background-color: cm(get-var("background-color-50"),
          get-var("accent-color"),
          0.2) !important;
    }

    #urlbar-background,
    .urlbar-background,
    #searchbar {
      background-color: cm(get-var("background-color-50"),
          get-var("accent-color"),
          0.0333) !important;
    }
  }
}

// special dark mode titlebar color for theme-material
@media (prefers-color-scheme: dark) {
  @include moz-pref-media("userChrome.theme-material") {

    #navigator-toolbox,
    #toolbar-menubar,
    #TabsToolbar,
    #titlebar {
      background-color: get-var(sys-color-surface-container-lowest) !important;
      background-image: linear-gradient(90deg,
          cm(transparent, get-var(sys-color-tertiary), 0.2) 0%,
          cm(transparent, get-var(sys-color-secondary), 0.2) 80%) !important;
    }
  }
}

// inactive titlebar background color
@include moz-pref-media("not userChrome.theme-default") {
  :root:-moz-window-inactive {

    #navigator-toolbox,
    #toolbar-menubar,
    #TabsToolbar,
    #titlebar {
      background-color: get-var("background-color-50") !important;
      background-image: none !important;
    }
  }

  // special unfocused background color for chrome refresh
  @include moz-pref-media("userChrome.theme-chrome-refresh") {
    @media (prefers-color-scheme: dark) {
      :root:-moz-window-inactive {

        #navigator-toolbox,
        #toolbar-menubar,
        #TabsToolbar,
        #titlebar {
          background-color: #2b2b2b !important;
        }
      }
    }

  }
}

// restore tab opacity when window-inactive
:root[tabsintitlebar] #titlebar {
  &:-moz-window-inactive {
    // opacity: var(--inactive-titlebar-opacity);
    opacity: 1 !important;
  }
}

// title bar buttons opacity when window-inactive
@media (-moz-platform: windows) {
  :root:-moz-window-inactive #navigator-toolbox {
    .titlebar-buttonbox .titlebar-button {
      opacity: 0.5 !important;
    }

    .titlebar-buttonbox .titlebar-button:hover {
      opacity: 1 !important;
    }
  }
}

// hide tab spacers
.titlebar-spacer:is([type="pre-tabs"], [type="post-tabs"]) {
  display: none !important;
}

// hide unwanted left tab bar separator
#tabbrowser-tabs {
  border-inline-start: none !important;
  margin-inline-start: 0px !important;
}

// fix for firefox view button (black border under tab bar), see: https://github.com/edelvarden/material-fox-updated/issues/6
#firefox-view-button {
  margin: 0 !important;
}

// also for other buttons which can be added to the title bar
#TabsToolbar .toolbarbutton-1 {
  margin-bottom: 0 !important;
}

// remove unwanted opacity for tab bar when window inactive
.browser-titlebar {
  :root[tabsintitlebar] & {
    &:-moz-window-inactive {
      opacity: 1 !important;
    }
  }
}

// fix first tab rounded edge cutoff
scrollbox:is([orient="horizontal"], [smoothscroll="true"], [flex="1"]) {
  padding-inline-start: 12px !important;
  margin-inline-start: -12px !important;
  padding-inline-end: 12px !important;
  margin-inline-end: -12px !important;
}

// fix transparent background behind tab scroll buttons
#scrollbutton-up {
  z-index: 999 !important;
}

#scrollbutton-down {
  z-index: 999 !important;
}

spacer:is([part="overflow-start-indicator"]) {
  margin-inline: 0px 6px !important;
}

spacer:is([part="overflow-end-indicator"]) {
  margin-inline: 6px 0px !important;
}