/* 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/. */

@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,.5)
%define selectedTabHighlight rgba(255,255,255,.7)
%define toolbarShadowColor rgba(10%,10%,10%,.4)
%define toolbarShadowOnTab -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px)
%define bgTabTexture -moz-linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2))
%define bgTabTextureHover -moz-linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2))

.tabbrowser-strip {
  background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
}

/* ::::: primary toolbar buttons ::::: */

toolbarbutton {
  -moz-box-orient: vertical;
}

toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
toolbarbutton > .toolbarbutton-icon {
  -moz-margin-end: 0;
}

.tabs-container > toolbarbutton,
.tabs-container > toolbarbutton > .toolbarbutton-menubutton-button,
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  -moz-appearance: none;
  border-style: none;
  padding: 0 3px;
}

.tabs-container > toolbarbutton:not([disabled]):hover,
.tabs-container > toolbarbutton[open],
.tabs-container > toolbarbutton > .toolbarbutton-menubutton-button:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover {
  background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%);
  background-position: 1px -1px, 0 -1px, 100% -1px;
  background-size: -moz-calc(100% - 2px) 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

/* Tabstrip */

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

.tabbrowser-strip:not(:-moz-lwtheme) {
  background-image:
    -moz-linear-gradient(bottom, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
}

%ifndef WINSTRIPE_AERO
@media all and (-moz-windows-default-theme) {
  .tabbrowser-strip {
    padding-left: 2px;
    padding-right: 2px;
  }
}
%endif

.tabbrowser-tab,
.tabbrowser-arrowscrollbox > .tabs-newtab-button {
  -moz-appearance: none;
  background: @toolbarShadowOnTab@, @bgTabTexture@,
              -moz-linear-gradient(-moz-dialog, -moz-dialog);
  background-origin: border-box;
  background-position: 1px 2px;
  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  border-width: 6px 3px 4px;
  border-style: solid;
  border-image: url(tabbrowser/tab.png) 6 3 4 fill repeat stretch;
  border-radius: 7px 7px 0 0;
}

.tabbrowser-tab:hover,
.tabs-newtab-button:hover {
  background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
}

%ifndef WINSTRIPE_AERO
@media all and (-moz-windows-theme: luna-blue) {
  .tabbrowser-tab,
  .tabs-newtab-button {
    background-image: @toolbarShadowOnTab@,
                      -moz-linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9));
  }

  .tabbrowser-tab:hover,
  .tabs-newtab-button:hover {
    background-image: @toolbarShadowOnTab@,
                      -moz-linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9));
  }
}
%endif

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

.tabbrowser-tab:-moz-lwtheme {
  color: inherit;
}

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

.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
.tabs-newtab-button:-moz-lwtheme-brighttext {
  background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), 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%,60%,.6), 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%,60%,.5), 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%,80%,.5), hsla(0,0%,60%,.5) 80%);
}

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

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

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

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

/* Tab close button */
.tab-close-button {
  -moz-appearance: none;
  -moz-image-region: rect(0, 64px, 16px, 48px);
  border: none;
  padding: 0px;
  list-style-image: url("chrome://global/skin/icons/close.png");
}

.tab-close-button:-moz-system-metric(touch-enabled) {
  -moz-transform: scale(1.2);
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px);
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px);
}

.tab-close-button[selected="true"] {
  -moz-image-region: rect(0, 16px, 16px, 0);
}

.tab-close-button:focus {
  outline: none !important;
}

/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */

@media all and (-moz-touch-enabled) {
  .tabbrowser-arrowscrollbox > .scrollbutton-up,
  .tabbrowser-arrowscrollbox > .scrollbutton-down,
  .tabbrowser-strip .toolbarbutton-1 {
    min-width: 8.1mozmm;
  }

  .tabs-newtab-button {
    min-width: 10mozmm;
  }

  .tab-content {
    min-height: -moz-calc(6.8mozmm - 7px); /* subtract borders from the desired height */
  }
}

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  list-style-image: url("chrome://instantbird/skin/tabbrowser/tab-arrow-left.png");
  -moz-image-region: rect(0, 15px, 17px, 0);
  margin: 0;
  padding-right: 2px;
  border-right: 2px solid transparent;
  background-origin: border-box;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
  opacity: .4;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active {
  -moz-image-region: rect(0, 30px, 17px, 15px);
}

.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
  -moz-transform: scaleX(-1);
}

.tabbrowser-arrowscrollbox > .scrollbutton-down {
  -moz-transition: 1s background-color ease-out;
}

.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
  background-color: Highlight;
  -moz-transition: none;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
  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;
}

.tabs-newtab-button > .toolbarbutton-icon {
  margin-top: -1px;
  margin-bottom: -1px;
}

.tabs-newtab-button {
  list-style-image: url(chrome://instantbird/skin/tabbrowser/newtab.png);
  -moz-image-region: rect(0, 16px, 18px, 0);
}

.tabs-newtab-button {
  width: 30px;
}

.tabs-newtab-button:hover:active {
  -moz-image-region: rect(0, 32px, 18px, 16px);
}

.tabs-alltabs-button {
  list-style-image: url("chrome://instantbird/skin/tabbrowser/mainwindow-dropdown-arrow.png");
  -moz-image-region: rect(0, 13px, 11px, 0);
}

.tabs-alltabs-button > .toolbarbutton-icon {
  margin: 3px 0;
}

.tabs-alltabs-button > .toolbarbutton-text,
.tabs-alltabs-button > .toolbarbutton-menu-dropmarker {
  display: none;
}

.tabs-alltabs-button:hover:active,
.tabs-alltabs-button[open="true"] {
  -moz-image-region: rect(0, 26px, 11px, 13px);
}

/* 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;
}

/* Tabstrip close button */
.tabs-closebutton {
  -moz-appearance: none;
  list-style-image: url("chrome://global/skin/icons/close.png");
  -moz-image-region: rect(0, 16px, 16px, 0);
  padding: 4px 2px;
  margin: 0px;
  border: none;
}

.tabs-closebutton > .toolbarbutton-icon {
  -moz-margin-end: 0px !important;
  -moz-padding-end: 2px !important;
  -moz-padding-start: 2px !important;
}

.tabs-closebutton:hover {
  -moz-image-region: rect(0, 32px, 16px, 16px);
}

.tabs-closebutton:hover:active {
  -moz-image-region: rect(0, 48px, 16px, 32px);
}


/* 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;
  /* disabled for triggering grayscale AA (bug 659213)
  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;
  /* disabled for triggering grayscale AA (bug 659213)
  border-top-left-radius: .3em;
  */
  margin-left: 1em;
}


