/* ***** BEGIN LICENSE BLOCK ***** 
 * Version: MPL 1.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is the Tree Style Tab.
 *
 * The Initial Developer of the Original Code is YUKI "Piro" Hiroshi.
 * Portions created by the Initial Developer are Copyright (C) 2007-2019
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s): YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
 *                 lv7777 (https://github.com/lv7777)
 *
 * ***** END LICENSE BLOCK ******/

:root {
  --toolbar-non-lwt-bgcolor: var(--grey-10);
  --toolbar-non-lwt-textcolor: var(--grey-90);
  --toolbar-non-lwt-inverted-textcolor: white;
  --toolbar-non-lwt-border-color: var(--grey-40);

  --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-lighter, var(--toolbar-non-lwt-inverted-textcolor));
  --tab-active-text: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
  --tab-active-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-inverted-textcolor));
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--toolbar-non-lwt-border-color)));
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));

  --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #e0e8f6 /* #grey-10 - #191104, (parseInt('f9f9fa', 16) - parseInt('191104', 16)).toString(16) */));
  --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #c1d2ee /* #grey-10 - #38270c, (parseInt('f9f9fa', 16) - parseInt('38270c', 16)).toString(16) */));
  --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #d1e2fe /* #grey-10 - #281600 + #000004, (parseInt('f9f9fa', 16) - parseInt('281600', 16) + parseInt('000004', 16)).toString(16) */));

  --tab-highlighted-highlight: var(--toolbar-non-lwt-inverted-textcolor);
  --tab-highlighted-glow: #3890f3; /* = rgb(56, 144, 243) */
  --tab-highlighted-base: var(--tab-surface);

  --throbber-color: var(--browser-loading-indicator, var(--browser-bg-lightest, var(--tab-highlighted-glow)));
  --throbber-color-active: var(--browser-loading-indicator, var(--tab-highlighted-glow));

  --multiselected-color-opacity: 0.25;
}

:root,
#background {
  background-color: var(--browser-background, var(--tab-surface));
  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"] {
    --toolbar-non-lwt-bgcolor: -moz-dialog;
    --toolbar-non-lwt-textcolor: -moz-dialogtext;
    --toolbar-non-lwt-inverted-textcolor: -moz-dialog;
    --toolbar-non-lwt-border-color: ThreeDShadow;

    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--face-highlight-more-more-lighter)));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, var(--face-highlight-lighter)));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, var(--face-highlight-more-lighter)));
  }
}

tab-item,
.after-tabs button {
  background: transparent;
  color: var(--tab-text);
  text-shadow: var(--browser-textshadow-for-header-image, none);
}

tab-item.active,
tab-item.bundled-active,
tab-item:hover {
  background: var(--tab-surface);
}

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

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

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

tab-item:not(.active):not(.bundled-active):not(.highlighted) {
  --throbber-color: var(--browser-loading-indicator, ThreeDDarkShadow);
}

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


@media (prefers-color-scheme: dark) {
  :root {
    --toolbar-non-lwt-bgcolor: #252526;
    --toolbar-non-lwt-textcolor: #efefef;
    --toolbar-non-lwt-inverted-textcolor: black;
    --toolbar-non-lwt-border-color: #4a4a4d;

    --tab-highlighted-highlight: white;
    --tab-dropmarker: var(--toolbar-non-lwt-textcolor);

    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #29363f /* #252526 + #041119 (switched R and B from #191104), (parseInt('252526', 16) + parseInt('041119', 16)).toString(16) */));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #314c5e /* #252526 + #0c2738 (switched R and B from #38270c), (parseInt('252526', 16) + parseInt('0c2738', 16)).toString(16) */));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #293b4e /* #252526 + #041628 (switched R and B from #281600 + #00004), (parseInt('252526', 16) + parseInt('041628', 16)).toString(16) */));
  }

  tab-item:not(.active):not(.bundled-active):not(.highlighted) {
    --throbber-color: var(--browser-loading-indicator, #afafaf);
  }

  /* Firefox applies dark colors to scrollbars in its in-content UI, when a
     Dark theme is applied by the platform. On the other hand, dark colors
     aren't applied to scrollbars in the sidebar also by default. Thus we need
     to imitate dark scrollbar manually. See also:
     https://github.com/piroor/treestyletab/issues/2373 */
  #tabbar {
    scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
  }
}
