/* ==UserStyle==
@name         Photonic - Windows 7 Transparent Tabs
@namespace    lootyhoof/photonic/win7
@version      1.0.0
@description  This style replaces the background (not selected) tabs with glass and fog, similar to the "Australis" (and Australium) theme. It does not change the tab shape or any other styling, and is designed to make the tabs behave like they do on other platforms (e.g. Windows 10).
@author       Lootyhoof
@homepageURL  https://github.com/lootyhoof/photonic
@supportURL   https://github.com/lootyhoof/photonic/issues
==/UserStyle== */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@media (-moz-os-version: windows-win7) {
  @media (-moz-windows-glass) {
    /* Glass Fog */
    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) {
      background-image: none;
      position: relative;
    }

    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme)::before {
      box-shadow: 0 0 30px 30px rgb(174,189,204);
      content: "";
      display: -moz-box;
      height: 0;
      margin: 0 60px;
      opacity: 0.85;
      position: absolute;
      pointer-events: none;
      top: 50%;
      width: -moz-available;
      z-index: -1;
    }

    #main-window[sizemode=normal] #tabbrowser-tabs[tabsontop=true] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
      position: relative;
    }

    #appmenu-button-container,
    #main-window:after  {
      z-index: 1 !important;
    }
    /* End Glass Fog */
  }

  @media (-moz-windows-default-theme) {
    #navigator-toolbox {
      --tabs-border-color: rgba(0,0,0,.3) !important;
    }
    
    :root:not(:-moz-lwtheme) {
      --titlebar-text-color: currentColor !important;
    }

    #TabsToolbar[tabsontop=true] .tabbrowser-tab:not([selected=true]):not(:-moz-lwtheme) {
      background-color: transparent !important;
      background-clip: padding-box !important;
    }
    
    /* Tab separators */

    .tabbrowser-tab::after,
    .tabbrowser-tab::before {
      border-left: 1px solid currentColor !important;
      margin-top: 5px !important;
      margin-bottom: 4px !important;
      opacity: 0.3 !important;
    }

    .tabbrowser-tab::before {
      margin-inline-start: -1px !important;
    }

    :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
    /* Show full height tab separators on hover and multiselection. */
    .tabbrowser-tab:hover::after,
    #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after {
      margin-top: var(--tabs-top-border-width) !important;
      margin-bottom: 0 !important;
    }

    #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected]::after,
    #tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected]::before,
    .tabbrowser-tab[selected]::after {
      border-color: var(--tabs-border-color) !important;
      margin-top: 0 !important;
      margin-bottom: 1px !important;
      opacity: 1 !important;
    }
    
    .tabbrowser-tab[selected] .tab-background {
      border-inline-end: none !important;
    }

    .tabbrowser-tab::after,
    #tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected]::before {
      content: "" !important;
      display: -moz-box !important;
    }
  }
}