%if 0
/* 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/. */
%endif

@import url("chrome://global/skin/");

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

%filter substitution
%define toolbarHighlight rgba(255,255,255,.3)
%define selectedTabHighlight rgba(255,255,255,.8) 1px, rgba(255,255,255,.5) 3px

/* Tabstrip */

.tabbrowser-strip {
  min-height: 0;
  padding: 0;
}

.tabbrowser-strip:not(:-moz-lwtheme) {
  -moz-appearance: menubar;
  color: -moz-menubartext;
  box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
}

.tabbrowser-strip:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
  -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
}

.tabbrowser-tab,
.tabbrowser-arrowscrollbox > .tabs-newtab-button {
  position: static;
  -moz-appearance: none;
  background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%);
  background-origin: border-box;
  background-position: 1px 2px;
  background-size: 100% -moz-calc(100% - 2px);
  background-repeat: no-repeat;
  color: inherit;
  margin: 0;
  padding: 0;
  border-width: 4px 5px 3px 6px;
  border-style: solid;
  border-image: url(tabbrowser/tab.png) 4 5 3 6 fill repeat stretch;
  border-radius: 10px 8px 0 0;
  min-height: 25px; /* reserve space for the sometimes hidden close button */
}

.tabbrowser-tab:hover,
.tabs-newtab-button:hover {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.2) 4px, hsla(0,0%,75%,.2) 80%);
}

.tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 32%),
                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
  color: -moz-dialogtext;
}

.tabbrowser-tab[selected="true"]:-moz-lwtheme {
  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 32%);
  color: inherit;
}

.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
.tabs-newtab-button:-moz-lwtheme-brighttext {
  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,40%,.6) 4px, hsla(0,0%,30%,.6) 80%);
}

.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
.tabs-newtab-button:-moz-lwtheme-brighttext:hover {
  background-image: -moz-linear-gradient(hsla(0,0%,80%,.6), hsla(0,0%,60%,.6) 4px, hsla(0,0%,45%,.6) 80%);
}

.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
.tabs-newtab-button:-moz-lwtheme-darktext {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,60%,.5) 4px, hsla(0,0%,45%,.5) 80%);
}

.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
.tabs-newtab-button:-moz-lwtheme-darktext:hover {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,80%,.5) 4px, hsla(0,0%,60%,.5) 80%);
}

.tabbrowser-tab:focus > .tab-stack {
  outline: 1px dotted;
}

.tab-icon-image {
  width: 16px;
  height: 16px;
  margin-inline-end: 3px;
}

.tabs-newtab-button > .toolbarbutton-icon {
  margin-inline-start: 2px;
  margin-inline-end: 2px;
}

#context_closeOtherTabs {
  list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
}

#context_closeOtherTabs[disabled] {
  list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
}

#context_closeTab {
  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
}

/* Tab drag and drop */
.tab-drop-indicator-bar {
  height: 11px;
  margin-top: -11px;
  position: relative;
  /* set margin-inline-start to -1/2 indicator width: */
  margin-inline-start: -5px;
  margin-inline-end: -11px;
}

.tab-drop-indicator {
  z-index: 1;
  margin-top: 30px;
  height: 11px;
  width: 11px;
  margin-bottom: -30px;
  position: relative;
  background: url('chrome://instantbird/skin/tabbrowser/tabDragIndicator.png') 50% 50% no-repeat;
}

/* In-tab close button */
.tab-close-button > .toolbarbutton-icon {
  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
     use evil CSS to give the impression of smaller content */
  margin: -4px;
}

.tab-close-button {
  padding: 0;
  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
  margin-top: -1px;
  margin-bottom: -1px;
  margin-inline-end: -1px;
}

/* Tabstrip new tab button */
.tabs-newtab-button {
  list-style-image: url("moz-icon://stock/gtk-add?size=menu");
  -moz-image-region: auto;
}

/* Tabstrip close button */
.tabs-closebutton {
  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
}

.tabs-closebutton > .toolbarbutton-icon {
  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
     use evil CSS to give the impression of smaller content */
  margin: -2px;
}

/* Tabbrowser arrowscrollbox arrows */
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  -moz-appearance: none;
  margin: 0;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up {
  border-inline-start: 0;
  border-inline-end: 2px solid transparent;
}

.tabbrowser-arrowscrollbox > .scrollbutton-down {
  border-inline-start: 2px solid transparent;
  border-inline-end: 0;
  -moz-transition: 1s box-shadow ease-out;
  border-radius: 4px;
}

.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
  box-shadow: 0 0 5px 5px Highlight inset;
  -moz-transition: none;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
  border-width: 0 2px 0 0;
  border-style: solid;
  border-image: url("chrome://instantbird/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
}

.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
  border-width: 0 0 0 2px;
  border-style: solid;
  border-image: url("chrome://instantbird/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
}

.tabs-alltabs-button > .toolbarbutton-icon,
.tabs-alltabs-button > .toolbarbutton-menu-dropmarker,
.tabs-alltabs-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
  margin-top: -2px;
  margin-bottom: -2px;
}

.tabs-alltabs-button > .toolbarbutton-icon {
  display: none;
}

/* All tabs menupopup */
.alltabs-item[selected="true"] {
  font-weight: bold;
}

.alltabs-item[tabIsVisible] {
  /* box-shadow instead of background-color to work around native styling */
  box-shadow: inset -5px 0 ThreeDShadow;
}


/* Status panel */

.statuspanel-label {
  margin: 0;
  padding: 2px 4px;
  background: linear-gradient(#fff, #ddd);
  border: 1px none #ccc;
  border-top-style: solid;
  color: #333;
  text-shadow: none;
}

.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
  border-right-style: solid;
  border-top-right-radius: .3em;
  margin-right: 1em;
}

.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
  border-left-style: solid;
  border-top-left-radius: .3em;
  margin-left: 1em;
}

