/*
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

:root {
  /* https://dxr.mozilla.org/mozilla-central/rev/b056526be38e96b3e381b7e90cd8254ad1d96d9d/browser/themes/windows/browser.css#45 */
  /* http://design.firefox.com/photon/visuals/color.html */
  --toolbar-non-lwt-bgcolor: #f9f9fa;
  --toolbar-non-lwt-textcolor: #0c0c0d;

  --tab-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
  --tab-text: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor));
  --tab-text-active: var(--tab-text);
  --tab-text-active-inverted: Highlight;
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, #b1b1b3 /* ThreeDShadow */));
  --tab-surface-hover: var(--browser-bg-more-more-lighter, #fefefe /* ThreeDHighlight */);
  --tab-surface-active: var(--face-highlight-more-lighter, Highlight);
  --tab-surface-active-hover: var(--face-highlight-more-more-lighter, Highlight);
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --throbber-color: var(--browser-loading-indicator, var(--tab-text));

  --tabbar-bg: var(--browser-bg-darker, darkgray);
}

:root,
#background {
  background-color: var(--browser-background, var(--tabbar-bg));
  background-image: var(--browser-bg-url, none);
}

:root[color-scheme="system-color"] {
  --tab-surface: var(--browser-bg-base, -moz-dialog);
  --tab-text: var(--browser-fg, -moz-dialogtext);
  --tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
  --tab-text-active: var(--tab-text);
  --tab-text-active-inverted: Highlight;
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, ThreeDShadow));
  --tab-surface-hover: var(--browser-bg-more-lighter, ThreeDHighlight);
  --tab-surface-active: var(--face-highlight-more-lighter, Highlight);
  --tab-surface-active-hover: var(--face-highlight-more-more-lighter, Highlight);
  --tab-dropmarker: var(--browser-fg, -moz-dialogtext);
  --tabbar-bg: var(--browser-bg-darker, ThreeDShadow);
}
:root[color-scheme="system-color"] #background::after {
  background: var(--browser-bg-darker, ThreeDDarkShadow);
  opacity: 0.15;

  bottom: 0;
  content: "";
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.tab,
.after-tabs button {
  background: var(--tab-surface);
  color: var(--tab-text);
}

.tab * {
  color: var(--tab-text);
}

.tab:not(.collapsed):not(.active):hover,
.after-tabs button:hover {
  --tab-surface: var(--tab-surface-hover);
  color: var(--tab-text);
}

.tab.active {
  --tab-surface: var(--tab-surface-active);
  --throbber-color: var(--browser-loading-indicator, var(--tab-text-active));
  --tab-text: var(--tab-text-active);
  --tab-text-inverted: var(--tab-text-active-inverted);
}
.tab:not(.collapsed).active:hover {
  --tab-surface: var(--tab-surface-active-hover);
}

.closebox {
  background: none transparent;
  border: none 0 transparent;
  margin: 0;
  padding: 0.1em;
}
