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

#tabs-toolbar {
  --tabHeight: 31px;
  --tabCurveWidth: 30px;
  --tabCurveWidthNegative: -30px;
  --tabCurveHalfWidth: 15px;
  --tabCurveHalfWidthNegative: -15px;
  --tabBackgroundImage: url("chrome://messenger/skin/tabs/background-start.png"),
                        url("chrome://messenger/skin/tabs/background-middle.png"),
                        url("chrome://messenger/skin/tabs/background-end.png");
  --tab-stroke-background-size: auto 100%;
  --tab-separator-opacity: 0.2;
}

#tabs-toolbar[brighttext] {
  --tab-separator-opacity: 0.4;
}

/* image preloading hack */
#tabs-toolbar::before {
  /* Because of bug 853415, we need to ordinal this to the first position: */
  -moz-box-ordinal-group: 0;
  content: '';
  display: block;
  background-image: var(--tabBackgroundImage);
}

.tabmail-tab {
  -moz-appearance: none;
  -moz-box-align: stretch;
  background-color: transparent;
  border-radius: 0;
  border-width: 0;
  margin: 0;
  padding: 0;
}

/* The selected tab should appear above adjacent tabs and the highlight
   of #tabs-toolbar */
.tabmail-tab[selected=true] {
  position: relative;
  z-index: 2;
}

.tabmail-tab[type="preferencesTab"] {
  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
}

.tab-background-middle {
  -moz-box-flex: 1;
  background-clip: padding-box;
  border-left: var(--tabCurveHalfWidth) solid transparent;
  border-right: var(--tabCurveHalfWidth) solid transparent;
  margin: 0 var(--tabCurveHalfWidthNegative);
}

.tab-content {
  padding-inline-end: 9px;
  padding-inline-start: 9px;
}

.tab-throbber,
.tab-icon-image,
.tab-close-button {
  margin-top: 1px;
}

.tab-throbber,
.tab-icon-image {
  height: 16px;
  width: 16px;
}

.tab-throbber,
.tab-icon-image {
  margin-inline-end: 6px;
}

.tab-label {
  margin-inline-end: 0;
  margin-inline-start: 0;
}

.tab-content > .tab-close-button {
  margin-inline-start: 4px;
  margin-inline-end: -2px;
  padding: 0;
}

.tab-background {
  /* overlap the tab curves */
  margin-inline-end: var(--tabCurveHalfWidthNegative);
  margin-inline-start: var(--tabCurveHalfWidthNegative);
}

.tabmail-arrowscrollbox > scrollbox {
  padding-inline-end: var(--tabCurveHalfWidth);
  padding-inline-start: var(--tabCurveHalfWidth);
}

.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: var(--tabHeight);
  width: var(--tabCurveWidth);
}

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

/* Selected tab */

/*
 Tab background pseudo-elements which are positioned above
 .tab-background-start/end:
   - ::before - provides the fill of the tab curve and is clipped to the tab
                shape. This is where pointer events go for the curve.
   - ::after  - provides the border/stroke of the tab curve and is overlayed
                above ::before.  Pointer events go through to ::before to get
                the proper shape.
 */


.tab-background-start[selected=true]::after,
.tab-background-end[selected=true]::after {
  /* position ::after on top of its parent */
  margin-inline-start: var(--tabCurveWidthNegative);
  background-size: 100% 100%;
  content: '';
  display: -moz-box;
  position: relative;
}

.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before {
  /* all ::before pseudo elements */
  content: '';
  display: -moz-box;
}

.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
  background-image: url("chrome://messenger/skin/tabs/selected-start.svg");
  background-size: 100% 100%;
}

.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
  background-image: url("chrome://messenger/skin/tabs/selected-end.svg");
  background-size: 100% 100%;
}

/* For lightweight themes, clip the header image on start, middle, and end. */
.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
  clip-path: url(chrome://messenger/content/messenger.xul#tab-curve-clip-path-start);
}

.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
  clip-path: url(chrome://messenger/content/messenger.xul#tab-curve-clip-path-end);
}

.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
  background-image: url("chrome://messenger/skin/tabs/stroke-start.png");
}

.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
  background-image: url("chrome://messenger/skin/tabs/stroke-end.png");
}

.tab-background-middle[selected=true] {
  background-clip: padding-box, padding-box, content-box;
  background-color: var(--fgTabBackgroundColor);
  background-image: url("chrome://messenger/skin/tabs/active-middle.png"),
                    var(--fgTabTexture),
                    none;
  background-repeat: repeat-x;
  background-size: var(--tab-stroke-background-size), auto 100%;
  /* The padding-top combined with background-clip: content-box
     (the bottom-most) ensure the background-color doesn't extend
     above the top border. */
  padding-top: 2px;
}

.tab-background-start[selected=true]:-moz-lwtheme::before,
.tab-background-end[selected=true]:-moz-lwtheme::before,
.tab-background-middle[selected=true]:-moz-lwtheme {
  background-color: transparent;
}

@media (min-resolution: 1.1dppx) {
  #tabs-toolbar {
    --tabBackgroundImage: url(chrome://messenger/skin/tabs/background-start@2x.png),
                          url(chrome://messenger/skin/tabs/background-middle@2x.png),
                          url(chrome://messenger/skin/tabs/background-end@2x.png);
  }

  .tab-background-middle[selected=true] {
    background-image: url(chrome://messenger/skin/tabs/active-middle@2x.png),
                      var(--fgTabTexture),
                      none;
  }

  .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
  .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
    background-image: url(chrome://messenger/skin/tabs/stroke-start@2x.png);
  }

  .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
  .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
    background-image: url(chrome://messenger/skin/tabs/stroke-end@2x.png);
  }
}

/* End selected tab */

/* new tab button border and gradient on hover */
.tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
  background-image: var(--tabBackgroundImage);
  background-position: left bottom, var(--tabCurveWidth) bottom, right bottom;
  background-repeat: no-repeat;
  background-size: var(--tabCurveWidth) 100%,
                   calc(100% - (2 * var(--tabCurveWidth))) 100%,
                   var(--tabCurveWidth) 100%;
}

/* Tab pointer-events */
.tabmail-tab {
  pointer-events: none;
}

.tab-background-middle,
.tab-close-button {
  pointer-events: auto;
}

/* Tab separators */
.tabmail-tab::before {
  margin-top: 5px;
  margin-bottom: 4px;
  margin-inline-start: -1px;
  border-left: 1px solid currentColor;
  opacity: 0;
  content: '';
  display: -moz-box;
}

.tabmail-tab:not([selected]):not(:hover) +
.tabmail-tab:not([selected]):not(:hover)::before {
  opacity: var(--tab-separator-opacity);
  transition: opacity 100ms ease;
}

/* Tab Overflow */
.tabmail-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabmail-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  background-image: url("chrome://messenger/skin/tabs/overflow-indicator.png");
  background-size: 100% 100%;
  width: 14px;
  margin-bottom: 1px;
  pointer-events: none;
  position: relative;
  z-index: 3; /* the selected tab's z-index + 1 */
}

.tabmail-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
.tabmail-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
  transform: scaleX(-1);
}

.tabmail-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
  margin-inline-start: -2px;
  margin-inline-end: -12px;
}

.tabmail-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  margin-inline-start: -12px;
  margin-inline-end: -2px;
}

.tabmail-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
.tabmail-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
  opacity: 0;
}

.tabmail-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
.tabmail-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
  transition: opacity 150ms ease;
}

/* Content Tabs */
.contentTabToolbox {
  height: 0px;
}

.contentTabInstance[disablechrome] .contentTabToolbox {
  display: none;
}

.contentTabToolbar {
  height: 0px;
  min-height: 0px;
  padding: 0px;
}
