%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
%filter substitution
%define horizontalTabPadding 9px

:root {
  --tabs-top-border-width: 0px;
  --tab-toolbar-navbar-overlap: 1px;
  --tab-min-height: 33px;
  --tab-min-width: 76px;
  --tab-loading-fill: #0A84FF;
}

:root[uidensity=compact] {
  --tab-min-height: 29px;
}

:root[uidensity=touch] {
  --tab-min-height: 41px;
}

:root:-moz-lwtheme {
  --tab-line-color: var(--lwt-accent-color);
}

tabbrowser {
  /* Value for --in-content-page-background in in-content/common.inc.css */
  background-color: #f9f9fa;
}

:root[privatebrowsingmode=temporary] tabbrowser {
  /* Value for --in-content-page-background in aboutPrivateBrowsing.css */
  background-color: #25003e;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height);
}

.tab-stack {
  min-height: inherit;
}

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

/* The selected tab should appear above the border between the tabs toolbar and
   the navigation toolbar. */
.tabbrowser-tab[visuallyselected=true] {
  position: relative;
  z-index: 2;
}

.tab-content {
  padding: 0 @horizontalTabPadding@;
}

.tab-content[pinned] {
  padding: 0 12px;
}

:root[sessionrestored] .tab-loading-burst {
  position: relative;
  overflow: hidden;
}

:root[sessionrestored] .tab-loading-burst::before {
  position: absolute;
  content: "";
  /* We set the width to be a percentage of the tab's width so that we can use
     the `scale` transform to scale it up to the full size of the tab when the
     burst occurs. We also need to set the margin-inline-start so that the
     center of the burst matches the center of the favicon. */
  width: 5%;
  height: 100%;
  /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks
     to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */
  margin-inline-start: calc(17px - 2.5%);
}

:root[sessionrestored] .tab-loading-burst[pinned]::before {
  /* This is like the margin-inline-start rule above, except that icons for
     pinned tabs are 12px from the edge. */
  margin-inline-start: calc(20px - 2.5%);
}

:root[sessionrestored] .tab-loading-burst[bursting]::before {
  background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg");
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
  -moz-context-properties: fill;
  fill: var(--tab-loading-fill);
}

:root[sessionrestored] .tab-loading-burst[bursting][notselectedsinceload]::before {
  animation-name: tab-burst-animation-light;
}

@keyframes tab-burst-animation {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(40);
  }
}

@keyframes tab-burst-animation-light {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(40);
  }
}

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

:root[sessionrestored] .tab-throbber[busy] {
  position: relative;
  overflow: hidden;
  width: 16px;
  height: 16px;
}

:root[sessionrestored] .tab-throbber[busy]::before {
  content: "";
  position: absolute;
  background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
  background-position: left center;
  background-repeat: no-repeat;
  width: 960px;
  height: 100%;
  animation: tab-throbber-animation 1.05s steps(60) infinite;
  -moz-context-properties: fill;

  /* XXX: It would be nice to transition between the "connecting" color and the
     "loading" color (see the `.tab-throbber[progress]::before` rule below);
     however, that currently forces main thread painting. When this is fixed
     (after WebRender lands), we can do something like
     `transition: fill 0.333s, opacity 0.333s;` */

  fill: currentColor;
  opacity: 0.7;
}

:root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before {
  animation-name: tab-throbber-animation-rtl;
}

@keyframes tab-throbber-animation {
  100% { transform: translateX(-100%); }
}

@keyframes tab-throbber-animation-rtl {
  100% { transform: translateX(100%); }
}

:root[sessionrestored] .tab-throbber[progress]::before {
  fill: var(--tab-loading-fill);
  opacity: 1;
}

#TabsToolbar[brighttext] .tabbrowser-tab:not([visuallyselected=true]) {
  --tab-loading-fill: #fff;
}

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

.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-image:not([pinned]) {
  margin-inline-end: 6px;
}

.tab-icon-image {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
}

.tab-icon-image[src^="chrome://"] {
  -moz-context-properties: fill;
  fill: currentColor;
}

.tab-icon-image[sharing]:not([selected]),
.tab-sharing-icon-overlay {
  animation: 3s linear tab-sharing-icon-pulse infinite;
}

/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
@keyframes tab-sharing-icon-pulse {
  0%, 16.66%, 83.33%, 100% {
    opacity: 0;
  }
  33.33%, 66.66% {
    opacity: 1;
  }
}

.tab-icon-image[sharing]:not([selected]) {
  animation-delay: -1.5s;
}

.tab-sharing-icon-overlay {
  /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
  margin-inline-start: -22px;
  position: relative;
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
}

.tab-sharing-icon-overlay[pinned] {
  margin-inline-start: -16px;
}

.tab-sharing-icon-overlay[sharing="camera"] {
  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
}

.tab-sharing-icon-overlay[sharing="microphone"] {
  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
}

.tab-sharing-icon-overlay[sharing="screen"] {
  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
}

.tab-icon-overlay {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-inline-start: -15px;
  margin-inline-end: -1px;
  position: relative;
}

.tab-icon-overlay[pinned] {
  margin-inline-start: -6px;
  margin-inline-end: -10px;
}

.tab-icon-overlay[crashed] {
  list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}

.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
  border-radius: 10px;
}

.tab-icon-overlay[soundplaying]:hover,
.tab-icon-overlay[muted]:not([crashed]):hover,
.tab-icon-overlay[activemedia-blocked]:not([crashed]):hover {
  background-color: white;
}

.tab-icon-overlay[soundplaying] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
}

.tab-icon-overlay[muted]:not([crashed]) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}

.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
}

#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
}

#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}

#TabsToolbar[brighttext] .tab-icon-overlay[activemedia-blocked]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[activemedia-blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
}

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

.tab-close-button {
  margin-inline-end: -2px;
  padding: 0;
  -moz-context-properties: fill, fill-opacity, stroke-opacity;
  stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
}

:root[uidensity=touch] .tab-close-button {
  margin-inline-end: -@horizontalTabPadding@;
  padding: 10px calc(@horizontalTabPadding@ - 2px);
}

.tab-icon-sound {
  margin-inline-start: 1px;
  width: 16px;
  height: 16px;
  padding: 0;
}

.tab-icon-sound[soundplaying],
.tab-icon-sound[muted],
.tab-icon-sound[activemedia-blocked] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}

.tab-icon-sound[muted] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
}

.tab-icon-sound[activemedia-blocked] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
}

.tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
.tab-icon-sound:-moz-lwtheme-darktext[muted],
.tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
  filter: drop-shadow(1px 1px 1px white);
}

.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
.tab-icon-sound:-moz-lwtheme-brighttext[muted],
.tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
  filter: drop-shadow(1px 1px 1px black);
}

.tab-icon-sound[soundplaying]:not(:hover),
.tab-icon-sound[muted]:not(:hover),
.tab-icon-sound[activemedia-blocked]:not(:hover) {
  opacity: .8;
}

.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
  transition: opacity .3s linear var(--soundplaying-removal-delay);
  opacity: 0;
}

/* Tab Overflow */
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  width: 18px;
  background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
  background-size: 17px 100%;
  background-repeat: no-repeat;
  border-left: 1px solid;
  border-image: linear-gradient(rgba(255,255,255,.2),
                                rgba(255,255,255,.2) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
                                transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap)));
  border-image-slice: 1;
  pointer-events: none;
  position: relative;
  z-index: 3; /* the selected tab's z-index + 1 */
}

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

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
  margin-inline-start: -1px;
  margin-inline-end: -17px;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  margin-inline-start: -17px;
  margin-inline-end: -1px;
}

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

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

.tabbrowser-tab:not([visuallyselected=true]),
.tabbrowser-tab:-moz-lwtheme {
  color: inherit;
}

.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
  color: var(--toolbar-color, inherit);
}

.tab-line {
  height: 2px;
}

/* Selected tab */

.tab-background {
  border: 1px none transparent;
  background-clip: padding-box;
}

%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar,
%endif
:root:not([tabsintitlebar]),
:root[extradragspace] {
  --tabs-top-border-width: 1px;
}

%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
%endif
:root:not([tabsintitlebar]) .tab-background,
:root[extradragspace] .tab-background {
  border-top-style: solid;
}

.tab-background[selected=true] {
  border-top-color: var(--tabs-border);
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  background-repeat: repeat-x;
}

.tab-line[selected=true] {
  background-color: var(--tab-line-color);
}

/*
 * LightweightThemeConsumer will set the current lightweight theme's header
 * image to the lwt-header-image variable, used in each of the following rulesets.
 */

/* Lightweight theme on tabs */
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-attachment: scroll, fixed;
  background-color: transparent;
  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                    var(--lwt-header-image);
  background-position: 0 0, right top;
  background-repeat: repeat-x, no-repeat;
  background-size: auto 100%, auto auto;
}

/* Tab hover */

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
  background-color: rgba(0,0,0,.1);
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
  background-color: rgba(255,255,255,.1);
}

.tab-line:not([selected=true]) {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
}

.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
  background-color: rgba(0,0,0,.2);
  opacity: 1;
  transform: none;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
  background-color: rgba(255,255,255,.2);
}

/* Pinned tabs */

/* Pinned tab separators need position: absolute when positioned (during overflow). */
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]:-moz-locale-dir(rtl)::after {
  right: unset;
  left: 0;
}

#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] > .tab-stack {
  border-inline-end: 1px solid transparent;
}

.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-image: url(chrome://browser/skin/tabbrowser/indicator-tab-attention.svg);
  background-position: center bottom calc(-4px + var(--tab-toolbar-navbar-overlap));
  background-repeat: no-repeat;
}

.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
  background-position-x: left 11px;
}

.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]):-moz-locale-dir(rtl) {
  background-position-x: right 11px;
}

.tab-label[attention]:not([selected="true"]) {
  font-weight: bold;
}

/* Tab separators */

.titlebar-placeholder[type="pre-tabs"],
.titlebar-placeholder[type="post-tabs"] {
  width: 40px;
}

.titlebar-placeholder[type="pre-tabs"] {
  border-inline-end: 1px solid;
  opacity: 0.2;
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border-left: 1px solid;
  margin-top: 5px;
  margin-bottom: 4px;
  opacity: 0.3;
}

%ifdef CAN_DRAW_IN_TITLEBAR
%ifdef MENUBAR_CAN_AUTOHIDE
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
%else
:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
%endif
%endif
/* Show full height tab separators on hover. */
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after {
  margin-top: var(--tabs-top-border-width);
  margin-bottom: 0;
}

/* Show full height tab separators on selected tabs. */
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after {
  border-color: var(--tabs-border);
  margin-top: 0;
  margin-bottom: var(--tab-toolbar-navbar-overlap);
  opacity: 1;
}

.tabbrowser-tab::after,
/* Also show separators beside the selected tab when dragging it. */
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {
  content: "";
  display: -moz-box;
}

/* Tab bar scroll arrows */

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  list-style-image: url(chrome://browser/skin/arrow-left.svg);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  color: inherit;
}

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

/* New tab button */

.tabs-newtab-button,
#TabsToolbar > #new-tab-button ,
#TabsToolbar > toolbarpaletteitem > #new-tab-button {
  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg);
}

/* All tabs button and menupopup */

#alltabs-button {
  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
}

.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
}

.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url("chrome://global/skin/icons/loading.png");
}

@media (min-resolution: 1.1dppx) {
  .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
  }
}

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

.alltabs-endimage[soundplaying],
.alltabs-endimage[muted],
.alltabs-endimage[activemedia-blocked] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}

.alltabs-endimage[muted] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
}

.alltabs-endimage[activemedia-blocked] {
  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
}

.restore-tabs-button-wrapper {
  visibility: hidden;
  position: fixed; /* so the button does not take up actual space and cause overflow buttons in the tabbar when hidden */
}

.restore-tabs-button-wrapper[shown] {
  visibility: visible;
  position: initial;
}

.restore-tabs-button {
  box-sizing: border-box;
  -moz-appearance: none;
  background-color: hsl(0,0%,0%,.04);
  border: 1px solid hsla(0,0%,16%,.2);
  border-radius: 3px;
  margin: 3px;
  margin-inline-start: 9px;
  transition: max-width 100ms;
  padding: 0 5px;
}

.restore-tabs-button:hover {
  background-color: hsl(0,0%,0%,.08);
}

.restore-tabs-button:active {
  background-color: hsl(0,0%,0%,.11);
}

#TabsToolbar[brighttext] .restore-tabs-button {
  background-color: hsl(0,0%,100%,.07);
  border-color:currentColor;
  color: currentColor;
  opacity: .7;
}

#TabsToolbar[brighttext] .restore-tabs-button:hover {
  background-color: hsl(0,0%,100%,.17);
}

#TabsToolbar[brighttext] .restore-tabs-button:active {
  background-color: hsl(0,0%,100%,.27);
}

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

.restore-tabs-button > .toolbarbutton-text {
  display: -moz-box;
}