/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 * 
 * The contents of these files are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use these files 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 SidebarStyleTab.
 * 
 * The Initial Developer of the Original Code is YUKI "Piro" Hiroshi.
 * Portions created by the Initial Developer are Copyright (C) 2010-2017
 * the Initial Developer. All Rights Reserved.
 * 
 * Contributor(s): Philipp von Weitershausen <philipp@weitershausen.de>
 *                 YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
 * 
 * Alternatively, the contents of these files 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 these files only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of these files 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 these files under
 * the terms of any one of the MPL, the GPL or the LGPL.
 * 
 * ***** END LICENSE BLOCK ***** */

:root {
  --bg-color: #d4dde5;
  --bg-color-inactive: #e8e8e8;
  --shadow-color: #404040;
  --shadow-color-inactive: #868686;
  --tab-surface-active-color: #94A1C0;
  --tab-surface-active-gradient: linear-gradient(to bottom, #A0B0CF, #7386AB) repeat-x;
  --tab-surface-active-gradient-inactive: linear-gradient(to bottom, #B4B4B4, #8A8A8A) repeat-x;
  --tab-text: black;
  --tab-text-inverted: white;
  --tab-text-active: white;
  --badge-bg-color: #91a0c0;
  --badge-color-inactive: #b5b5b5;
  --badge-bg-color-inactive: #929292;
  --dropmarker-border-color: #577bf3;
  --dropmarker-bg-color: #d0def5;
  --throbber-color: white;
  --throbber-shadow-color: var(--dropmarker-border-color);

  --tab-highlighted-highlight: white;
  --tab-highlighted-glow: var(--dropmarker-border-color);
  --tab-highlighted-base: var(--bg-color);

  --multiselected-color: var(--tab-surface-active-gradient);
  --multiselected-color-opacity: 0.35;
}

.tab:not(.active) {
  --throbber-color: var(--dropmarker-border-color);
  --throbber-shadow-color: white;
}

/* Background colour for the tree sidebar (light blue when window is
   active, grey otherwise) */
:root,
#background {
  background: var(--bg-color);
}

:root:-moz-window-inactive,
:root:-moz-window-inactive #background {
  background: var(--bg-color-inactive);
}

/* Use the splitter to display the border of .tabs */
:root.left {
  border-right: 1px solid var(--shadow-color);
}
:root:-moz-window-inactive.left {
  border-right-color: var(--shadow-color-inactive);
}

:root.right {
  border-left: 1px solid var(--shadow-color);
}
:root:-moz-window-inactive.right {
  border-left-color: var(--shadow-color-inactive);
}

/* Style tabs themselves.  Get rid of most of the initial XUL styling */
.tab {
  border-top: 1px solid transparent;
  height: 2.2em;     /* height including border! */
  padding: 0.075em 3px 0.075em 2px;
  z-index: 0;
}

:root.left-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-left: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
:root.right-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-right: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}

.tab.active {
  border-top: 1px solid var(--tab-surface-active-color);
  background: var(--tab-surface-active-gradient);
}

:-moz-window-inactive .tab.active {
  border-top: 1px solid var(--tab-surface-active-color-inactive);
  background: var(--tab-surface-active-gradient-inactive);
}

/* Keep the close button at a safe distance from the tab label. */
.closebox::after {
  display: none;
}
.closebox {
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin-left: 3px;
  background: url("closetab.png") center center no-repeat;
  opacity: 0.27;  /* turn black into #b9b9b9 */
  border: 0 none;
}

.closebox:active {
  opacity: 0.46;  /* turn black into #8a8a8a */
}

.tab.active .closebox {
  background-image: url("closetab-white.png");
  opacity: 1;
}

.tab:not(.active):not(:hover) .closebox {
  display: none;
}

/* Tab label is without special decoration except when selected: then
   the text is white and bold. */
.tab .label {
  font-weight: normal;
  line-height: 1.4;
  color: var(--tab-text);
  text-align: start;
  text-shadow: none;
  margin-bottom: 1px;
  margin-left: 0.25em;
  padding: 0 0 0.25em 0;
}

.tab.active .label {
  font-weight: bold;
  color: var(--tab-text-active);
  text-shadow: 0 1px var(--shadow-color);
}

.tab.active .twisty {
  color: white;
}

/* Make the tab counter look like the bubbles in Mail.app et.al. */
.counter::before,
.counter::after {
  display: none;
}

.counter {
  font-size: 85%;
  background-color: var(--badge-bg-color);
  border-radius: 8px;
  padding: 2px 4px;
  color: var(--tab-text-active);
  font-weight: bold;
  text-shadow: none;
}

.tab.active .counter {
  background-color: var(--tab-text-active);
  color: var(--badge-bg-color);
}

:-moz-window-inactive .counter {
  background-color: var(--badge-bg-color-inactive);
}
:-moz-window-inactive .tab.active .counter {
  background-color: var(--tab-text-active);
  color: var(--badge-color-inactive);
}



/* Drag'n'drop styling */

/* Round blue rectangle around tabs that are dropping targets. */
.tab[data-drop-position="self"] {
  background: var(--dropmarker-bg-color);
  border: 2px solid var(--dropmarker-border-color); /* not OSX's colour but Firefox's */
  border-radius: 0.3em;
  padding: 0 1px 0 8px;
  outline: none !important;
}

/* White-blue-white separator for drop indicator. */
.tab[data-drop-position]:not([data-drop-position="self"])::before {
  background: transparent !important;
  max-height: 6px;
  min-height: 6px;
  border-image: url("dropmarker.png") 12 0 0 11 fill / 12px 0 0 11px;
  border-image-outset: 6px 0 0 0;
}

.tab:not(.faviconized)[data-drop-position="before"]::before {
  top: 6px;
}


.mutiple-highlighted .tab:not(.highlighted) {
  opacity: 0.5;
}



/* changed from original SidebarStyleTab */

.after-tabs button {
  background: transparent;
  border: 0 none;
}

/* for rightside tab bar: "display:none" breaks the order of tab contents. */
:root
  .tab:not(:hover):not(.active)
  .closebox {
  display: -moz-box !important;
  visibility: collapse !important;
}


/* for Multiple Tab Handler */
.tab:not(:hover):not(.active)[multipletab-ready-to-close="true"] .closebox {
  visibility: visible;
}



/* hide regular active tab marker */
.highlighter::before {
  display: none !important;
}


/* multiselection of tabs */

.mutiple-highlighted > .tab.highlighted::after {
  background: var(--multiselected-color);
  bottom: 0;
  content: " ";
  display: block;
  left: 0;
  opacity: var(--multiselected-color-opacity);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
