/* ------------------------------------ */
/* Firefox Translucent Tabbar for macOS */
/* ------------------------------------ */

:root#main-window {
  background-color: transparent !important;
}

:root:not(:-moz-window-inactive) #navigator-toolbox {
  background-color: transparent !important;
}

/* make tabs toolbar translucent */
:root #TabsToolbar,
:root #titlebar,
:root #tabbrowser-tabs {
  -moz-default-appearance: -moz-window-titlebar !important;
  appearance: -moz-window-titlebar !important;
  background-color: transparent !important;
}

/* De-emphasize tab icons and names when window is unfocused */
:root:-moz-window-inactive .tab-content {
  opacity: 0.6;
}

/* recolor toolbar button hover/active bg colors to semi-transparent */
:root {
  --toolbarbutton-hover-background: color-mix(
    in srgb,
    currentColor 11%,
    transparent
  ) !important;
  --toolbarbutton-active-background: color-mix(
    in srgb,
    currentColor 21%,
    transparent
  ) !important;
}

/* improve border visiblity for selected tabs */
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
  border: none !important;
}
#tabbrowser-tabs:not([noshadowfortests])
  .tab-background:is([selected], [multiselected]) {
  box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, 0.1),
    0 1px 5px rgba(0, 0, 0, 0.1) !important;
}
:root:-moz-window-inactive
  #tabbrowser-tabs:not([noshadowfortests])
  .tab-background:is([selected], [multiselected]) {
  box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, 0.05) !important;
}

@media (-moz-content-prefers-color-scheme: dark) {
  :root
    #tabbrowser-tabs:not([noshadowfortests])
    .tab-background:is([selected], [multiselected]) {
    box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) hsla(280, 6%, 60%, 0.5)
        inset,
      0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, 0.6),
      0 1px 5px rgba(0, 0, 0, 0.1) !important;
  }
  :root:-moz-window-inactive
    #tabbrowser-tabs:not([noshadowfortests])
    .tab-background:is([selected], [multiselected]) {
    box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, 0.4) !important;
  }
}

/* border between tab bar and navbar */
:root #nav-bar {
  box-shadow: 0 -1px 0 0 hsla(280, 6%, 0%, 0.1),
    0 -4px 4px -5px hsla(280, 6%, 0%, 0.2);
}

@media (-moz-content-prefers-color-scheme: dark) {
  :root #nav-bar {
    box-shadow: 0 -1px 0 0 hsla(280, 6%, 0%, 0.3),
      0 -4px 4px -5px hsla(280, 6%, 0%, 0.05) !important;
  }
}
