/*
# 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 {
  --toolbar-non-lwt-bgcolor: var(--in-content-page-background);
  --toolbar-non-lwt-textcolor: var(--in-content-page-color);

  --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
  --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface));
  --tab-text-regular: 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: var(--toolbar-non-lwt-bgcolor);
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed)));
  --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-box-background-hover)));
  --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, var(--in-content-button-background-mixed)));
  --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, var(--in-content-button-background-active-mixed)));
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --throbber-color: var(--browser-loading-indicator, var(--tab-text));
  --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active));

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

:root,
#background {
  background-color: var(--browser-background, var(--tabbar-bg));
  background-image: var(--browser-bg-url, var(--browser-header-url, none));
  background-position: left;
  background-size: var(--browser-background-image-size, auto);
}
:root.right,
:root.right #background {
  background-position: right;
}

@media not (prefers-color-scheme: dark) {
  :root[color-scheme="system-color"] {
    --tab-surface-regular: var(--browser-bg-for-header-image, var(--browser-bg-base, -moz-dialog));
    --tab-text-regular: var(--browser-fg, -moz-dialogtext);
    --tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
    --tab-text-active: var(--tab-text-regular);
    --tab-text-active-inverted: Highlight;
    --tab-border: var(--browser-border, var(--browser-bg-more-darker, ThreeDShadow));
    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, ThreeDHighlight));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, Highlight));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, 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, AppWorkspace);
    opacity: 0.15;

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

#tabbar {
  scrollbar-color: var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed))
                   var(--theme-colors-toolbar, var(--in-content-box-background));
}

@media (prefers-color-scheme: dark) {
  :root {
    --tab-highlighter: var(--browser-tab-highlighter, var(--dark-tab-line));
    --tabbar-bg: var(--browser-bg-darker, var(--dark-frame));
  }
}

tab-item,
.after-tabs button,
#subpanel-container,
#dummy-tab-color-box {
  --tab-surface: var(--tab-surface-regular);
  --tab-text: var(--tab-text-regular);
  --tab-text-shadow: var(--browser-textshadow-for-header-image, none);
  background: var(--tab-surface);
  color: var(--tab-text);
  text-shadow: var(--tab-text-shadow);
}

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

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

tab-item.active {
  --tab-surface: var(--tab-surface-active);
  --throbber-color: var(--throbber-color-active);
  --tab-text: var(--tab-text-active);
  --tab-text-inverted: var(--tab-text-active-inverted);
}
tab-item.bundled-active,
tab-item.active:hover {
  --tab-surface: var(--tab-surface-active-hover);
}

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

tab-item .burster {
  --throbber-color: var(--tab-loading-fill);
}
