/* ***** BEGIN LICENSE BLOCK ***** 
 * Version: MPL 1.1/GPL 2.0/LGPL 2.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-2017
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s): YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
 *                 lv7777 (https://github.com/lv7777)
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ******/

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

  --tab-surface-hover: var(--browser-bg-less-lighter, #e0e8f6);
  --tab-surface-active: var(--browser-bg-lighter, #c1d2ee);
  --tab-surface-active-hover: var(--browser-bg-more-lighter, #d1e2fe);

  --tab-highlighted-highlight: white;
  --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)));

  --multiselected-color-opacity: 0.25;
}

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

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

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

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

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

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

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

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

.tab:not(.active) .burster {
  --throbber-color: var(--browser-loading-indicator, #B5C5E0);
}
