:root {
  --appmenu-background: rgba(0,0,0,.85);
  --appmenu-border-color: rgba(0,0,0,.15);
  --appmenu-border-radius: 4px;
}

/* ::::: app menu button ::::: */

#appmenu-button {
  -moz-appearance: none;
  background: var(--appmenu-background);
  background-clip: padding-box;
  border-radius: 0 0 var(--appmenu-border-radius) var(--appmenu-border-radius);
  border: 1px solid var(--appmenu-border-color);
  border-top: none;
  font-weight: bold;
  box-shadow: none;
  padding: 0 1.5em .05em;
  margin: 0 0 2px;
  color: #fff;
}

@media (-moz-windows-classic) {
  #appmenu-button {
    margin-bottom: 1px;
  }
}

#main-window[privatebrowsingmode=temporary] #appmenu-button {
  --appmenu-background: rgba(2,2,2,.75);
  color: #000;
}

#appmenu-button:hover:not(:active):not([open]) {
  --appmenu-background: rgba(1,1,1,.75);
  --appmenu-border-color: rgba(0,0,0,.20);
}

#main-window[privatebrowsingmode=temporary] #appmenu-button:hover:not(:active):not([open]) {
  --appmenu-background: rgba(2,2,2,.85);
}

#appmenu-button:hover:active,
#appmenu-button[open] {
  border-radius: 0;
  --appmenu-background: rgba(0,0,0,.4);
  --appmenu-border-color: rgba(0,0,0,.25);
}

#main-window[privatebrowsingmode=temporary] #appmenu-button:hover:active,
#main-window[privatebrowsingmode=temporary] #appmenu-button[open] {
  --appmenu-background: rgba(2,2,2,.4);
}

#appmenu-button > .button-box {
  border-style: none;
  padding: 0;
}

#appmenu-button > .button-box > .button-menu-dropmarker {
  list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.svg);
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  margin-inline-start: .5em;
}

#main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .button-menu-dropmarker {
  list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.svg#darktext);
}

/* ::::: titlebar ::::: */

#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: -moz-window-titlebar;
}

#main-window[sizemode="maximized"] > #titlebar {
  -moz-appearance: -moz-window-titlebar-maximized;
}

@media all and (-moz-windows-classic) {
  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
    margin-top: 4px;
  }
}

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
}

#main-window[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

.titlebar-placeholder[type="appmenu-button"] {
  margin-left: 4px;
}

.titlebar-placeholder[type="caption-buttons"] {
  margin-left: 22px; 
}

#titlebar-min {
  -moz-appearance: -moz-window-button-minimize;
}

#titlebar-max {
  -moz-appearance: -moz-window-button-maximize;
}

#main-window[sizemode="maximized"] #titlebar-max {
  -moz-appearance: -moz-window-button-restore;
}

#titlebar-close {
  -moz-appearance: -moz-window-button-close;
}

@media not all and (-moz-windows-classic) {
  #titlebar-min {
    margin-inline-end: 2px;
  }
}

/* ::::: bookmark buttons ::::: */

toolbarbutton.bookmark-item {
  margin: 0;
  padding: 2px 3px;
}

toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
toolbarbutton.bookmark-item[open="true"] {
  padding-top: 3px;
  padding-bottom: 1px;
  padding-inline-start: 4px;
  padding-inline-end: 2px;
}

.bookmark-item:not(#bookmarks-menu-button) > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}


.bookmark-item > .toolbarbutton-text {
  display: -moz-box !important;
}

.bookmark-item > .toolbarbutton-menu-dropmarker {
  display: none;
}

@media (-moz-windows-glass) {
  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
    margin-top: 1px;
  }

  #appmenu-button {
    border-width: 2px;
    -moz-border-left-colors: rgba(255,255,255,.5) var(--appmenu-border-color);
    -moz-border-bottom-colors: rgba(255,255,255,.5) var(--appmenu-border-color);
    -moz-border-right-colors: rgba(255,255,255,.5) var(--appmenu-border-color);
    margin-bottom: 1px; 
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                0 0 2px 1px rgba(255,255,255,.25) inset;
  }

  #appmenu-popup {
    margin-top: -1px;
    margin-inline-start: 1px;
  }
}

@media all and (-moz-windows-default-theme) {
  #navigator-toolbox > toolbar:not(:-moz-lwtheme),
  #addon-bar:not(:-moz-lwtheme) {
    background-color: rgb(0,0,0);
  }

  #sidebar-splitter {
    border: 0;
    border-inline-end: 1px solid rgb(64,64,64);
    min-width: 0;
    width: 3px;
    background-color: transparent;
    margin-inline-start: -3px;
    position: relative;
  }
}

@media all and (-moz-windows-compositor) {
  #main-window {
  background-color: transparent;
    -moz-appearance: -moz-win-glass;
  }

  /* On win 10, if we don't set this on the entire browser container, including
   * the sidebar, then the accent color bleeds through in the titlebar
   * if the sidebar is open. */
  #browser {
    -moz-appearance: -moz-win-exclude-glass;
  }

/* ==== Windows 10 styling ==== */

  @media (-moz-os-version: windows-win10) {
    /* Draw XUL caption buttons on Win10 */
    #appmenu-button {
      margin-top: -1px !important;
      margin-bottom: 5px !important;
    }

    #tabbrowser-tabs {
      min-height: 28px;
    }

    #titlebar-buttonbox,
    .titlebar-button {
      -moz-appearance: none !important;
    }

    .titlebar-button {
      border: none;
      border-radius: 0px;
      margin: 0 !important;
      padding: 8px 17px;
      transition: background-color linear 120ms;
    }
    
    .titlebar-button:hover {
      background-color: hsla(0, 0%, 0%, .17);
    }

    .titlebar-button:hover:active {
      background-color: hsla(0, 0%, 0%, .27);
      transition: none;
    }

    .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
      opacity: 0.5;
    }

    #titlebar-close:hover {
      background-color: hsla(0, 0%, 0%, 1);
    }

    #titlebar-close:hover:active {
      background-color: hsla(0, 0%, 0%, 1);
      transition: none;
    }

    #main-window[sizemode=maximized] .titlebar-button {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .titlebar-button > .toolbarbutton-icon {
      width: 12px;
      height: 12px;
    }

    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
      margin-top: -4px;
    }

    #titlebar-min {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
    }

    #titlebar-max {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
    }

    #main-window[sizemode="maximized"] #titlebar-max {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
    }

    #titlebar-close {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
    }
    #titlebar-close:hover {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
    }

    /* light persona */
    .titlebar-button:-moz-lwtheme-darktext:hover {
      background-color: hsla(0, 0%, 0%, .17);
    }

    .titlebar-button:-moz-lwtheme-darktext:hover:active {
      background-color: hsla(0, 0%, 0%, .27);
      transition: none;
    }

    #titlebar-min:-moz-lwtheme-darktext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-darktext);
    }
    #titlebar-max:-moz-lwtheme-darktext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-darktext);
    }
    #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-darktext);
    }
    #titlebar-close:-moz-lwtheme-darktext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-darktext);
    }
    #titlebar-close:hover:-moz-lwtheme-darktext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-darktext);
    }

    /* dark persona */
    .titlebar-button:-moz-lwtheme-brighttext:hover {
      background-color: hsla(0, 0%, 0%, .27);
    }

    .titlebar-button:-moz-lwtheme-brighttext:hover:active {
      background-color: hsla(0, 0%, 0%, .37);
      transition: none;
    }

    #titlebar-min:-moz-lwtheme-brighttext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes);
    }
    #titlebar-max:-moz-lwtheme-brighttext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes);
    }
    #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes);
    }
    #titlebar-close:-moz-lwtheme-brighttext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
    }
    #titlebar-close:hover:-moz-lwtheme-brighttext {
      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
    }

    /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
    * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
    @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
      .titlebar-button > .toolbarbutton-icon {
        width: 11.5px;
        height: 11.5px;
      }
    }

    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
      .titlebar-button {
        padding-left: 14.1px;
        padding-right: 14.1px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
      .titlebar-button {
        padding-left: 15.3333px;
        padding-right: 15.3333px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }
  }

/* ==== Windows Vista/7/8 styling ==== */

  @media (-moz-os-version: windows-vista),
         (-moz-os-version: windows-win7),
         (-moz-os-version: windows-win8) {
    /* Make sure the native margins are correct on Win Vista/7/8.
     * We can't use -moz-win-glass there because the border sizing would
     * not be correct. */
    #main-window {
      -moz-appearance: -moz-win-borderless-glass;
    }
    
    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
    .titlebar-button {
      display: none;
    }

    /* The borders on the glass frame are ours, and inside #browser, and on
     * vista and win7 we want to make sure they are "glassy", so we can't use
     * #browser as the exclude-glass container. We use #appcontent instead. */
    #browser {
      -moz-appearance: none;
    }

    #appcontent {
      -moz-appearance: -moz-win-exclude-glass;
    }

    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
      margin-top: -7px;
    }

    /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */
    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme {
      border-top: 2px solid;
      -moz-border-top-colors: rgb(37, 44, 51) rgba(255,255,255,.6);
    }

    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive {
      -moz-border-top-colors: rgb(102, 102, 102) rgba(255,255,255,.6);
    }

    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container:-moz-lwtheme {
      margin-top: -1px;
    }

    #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
      margin-top: -2px;
    }

    #appmenu-button {
      margin-bottom: -1px; 
    }
  }
  
/* ==== ==== */
  
  #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) {
    -moz-appearance: none;
    background-color: rgb(0,0,0);
  }
  
  #main-menubar > menu:not(:-moz-lwtheme) {
    color: inherit;
  }

  /* Show toolbar borders on vista through win8, but not on win10 and later: */
  @media (-moz-os-version: windows-vista),
  (-moz-os-version: windows-win7),
  (-moz-os-version: windows-win8) {
     /* Vertical toolbar border */
    #main-window[sizemode=normal] #navigator-toolbox::after,
    #main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
    #main-window[sizemode=normal] #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(#nav-bar) {
      border-left: 1px solid hsla(0,0%,12%,0.25);
      border-right: 1px solid hsla(0,0%,12%,0.25);
      background-clip: padding-box;
    }

    #main-window[sizemode=normal] #navigator-toolbox > toolbar:-moz-lwtheme {
      border-color: transparent !important;
    }
    #main-window[sizemode=normal] #browser-border-start,
    #main-window[sizemode=normal] #browser-border-end {
      display: -moz-box;
      background-color: hsla(0,0%,0%,0.25);
      width: 1px;
    }
    #main-window[sizemode=normal] #browser-bottombox {
      border: 1px solid hsla(0,0%,12%,0.25);
      border-top-style: none;
    }
  }

  /* Round top corners on Vista/7/8, but not Win10 because it's flush against the window edge */
  @media (-moz-os-version: windows-vista),
  (-moz-os-version: windows-win7),
  (-moz-os-version: windows-win8) {
    #main-window[sizemode=normal][tabsontop=false] #PersonalToolbar:not(:-moz-lwtheme) {
      border-top-left-radius: 3.5px;
      border-top-right-radius: 3.5px;
    }

	#main-window[sizemode=normal][tabsontop=true] #nav-bar:not(:-moz-lwtheme),
    #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
    #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }
  }


  #main-window[sizemode=normal][tabsontop=true] #nav-bar:not(:-moz-lwtheme),
  #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
  #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
    border-top: 1px solid rgba(64,64,64,1);
    background-clip: padding-box;
  }
  #main-window[sizemode=normal]:not([disablechrome]) #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) {
    margin-bottom: -1px;
    background-image: none !important;
  }
  #main-window[sizemode=normal]:not([disablechrome]) #tabbrowser-tabs[tabsontop=true] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
    position: relative;
  }

  #main-window[sizemode=normal] #TabsToolbar[tabsontop=true] {
    padding-left: 4px;
    padding-right: 4px;
  }

  #main-window[sizemode=normal] #TabsToolbar[tabsontop=false] {
    padding-left: 2px;
    padding-right: 2px;
  }


  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar[tabsontop="true"],
  #navigator-toolbox[tabsontop="false"] > #nav-bar,
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }

  #appcontent:not(:-moz-lwtheme) {
    background-color: -moz-dialog;
  }

  #browser-bottombox:not(:-moz-lwtheme) {
    background-color: rgb(0,0,0);
    background-clip: padding-box;
  }

  @media (-moz-os-version: windows-vista),
  (-moz-os-version: windows-win7),
  (-moz-os-version: windows-win8) {
    #main-window[sizemode=normal] #browser-bottombox:not(:-moz-lwtheme),
    #main-window[sizemode=normal] #addon-bar:not(:-moz-lwtheme) {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }

  #addon-bar:not(:-moz-lwtheme) {
    -moz-appearance: none;
    border-bottom-style: none;
  }

  .tabbrowser-tab:not(:-moz-lwtheme) {
    text-shadow: none;
  }

  #main-window[sizemode=normal] .statuspanel-inner {

    padding-left: 1px;
    padding-right: 1px;
  }

  #tab-view:-moz-lwtheme {
    background-image: url("chrome://browser/skin/tabview/grain.png"),
                      -moz-linear-gradient(rgba(255,255,255,0), #CCD9EA 200px, #C7D5E7);
    background-attachment: fixed;
  }
}

@media not all and (-moz-windows-compositor) {
  #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
  #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
  #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme) {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }
}