@charset "UTF-8";
/*
# 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("/resources/ui-base.css");

:root {
  /* default size, they will be overridden. */
  --favicon-size: 16px;
  --tab-size: 32px;
  --faviconized-tab-size: 28px;
  --svg-small-icon-size: 16px;

  --color-animation: 0.25s ease-out;
  --indent-animation: var(--indent-duration) ease-out;
  --collapse-animation: var(--collapse-duration) ease-out;
  --tab-animation: background    var(--color-animation),
                   bottom        var(--collapse-animation),
                   color         var(--color-animation),
                   left          var(--collapse-animation),
                   margin-bottom var(--collapse-animation),
                   margin-top    var(--collapse-animation),
                   max-height    var(--collapse-animation),
                   max-width     var(--collapse-animation),
                   min-height    var(--collapse-animation),
                   min-width     var(--collapse-animation),
                   opacity       var(--collapse-animation),
                   padding       var(--collapse-animation), /* for extra margin on overlay-scrollbar mode */
                   right         var(--collapse-animation),
                   top           var(--collapse-animation);
  --tab-indent-animation: margin-left   var(--indent-animation),
                          margin-right  var(--indent-animation);

  --button-opacity: 0.75;
  --button-hover-opacity: 1;
  --button-active-opacity: 0.5;

  --tab-highlighted-highlight: white;
  --tab-highlighted-glow: Highlight;
  --tab-highlighted-base: transparent;

  --tab-surface: var(--tab-surface-regular);
  --tab-text: var(--tab-text-regular);
  --tab-text-shadow: none;

  /* macOS workaround */
  --scrollbar-placeholder-size: 1em;

  --multiselected-color: transparent;
  --multiselected-color-opacity: 0.15;

  /* z-index of elements: we should define them here to keep their strict priorities */
  --invisible-z-index:       -100;
  --dummy-element-z-index:   1; /* dummy tab */
  --background-z-index:      10; /* background screen */
  --accessible-ui-z-index:   100; /* tabbar itself, and others */
  --over-tabs-z-index:       100; /* buttons after tabs, pinned tabs (required to make pinned tabs clickable) */
  --over-buttons-z-index:    200; /* buttons on buttons after tabs */
  --notification-ui-z-index: 9000;
  --blocking-ui-z-index:     10000; /* frontmost of others */

  --tab-extra-contents-behind-z-index: 10;
  --tab-base-z-index:                  100;
  --tab-favicon-z-index:               200;
  --tab-burster-z-index:               4000;
  --tab-highlighter-z-index:           5000;
  --tab-extra-contents-front-z-index:  6000;
  --tab-ui-z-index:                    9000;
  --tab-drop-marker-z-index:           10000;
}

tab-item {
  --tab-current-size: var(--tab-size);
  --attention-marker-x-offset: calc(0px - ((var(--tab-current-size) - var(--favicon-size)) / 2) + ((var(--tab-current-size) - var(--faviconized-tab-size)) / 2));
  --attention-marker-y-offset: calc(0px - ((var(--tab-current-size) - var(--favicon-size)) / 2) + ((var(--tab-current-size) - var(--faviconized-tab-size))));
  --attention-marker-gradient: radial-gradient(circle farthest-corner at 50% calc(100% - 3px),
                                               var(--tab-highlighted-highlight) 3%,
                                               var(--tab-highlighted-glow) 10%,
                                               rgba(255, 255, 255, 0) 20%);
  --attention-marker-gradient-hover: radial-gradient(circle farthest-corner at 50% calc(100% - 3px),
                                                     var(--tab-highlighted-highlight) 3%,
                                                     var(--tab-highlighted-glow) 10%,
                                                     rgba(255, 255, 255, 0) 23%);
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

:root.debug * {
  outline: 1px dotted rgba(255, 0, 0, 0.5);
}

/* Show internal tab id in the debug mode */
:root.debug tab-item::after {
  content: attr(data-tab-id);
  opacity: 0.65;
}
:root.debug tab-item.faviconized::after {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* This is required to prevent dragging of images (ex. favicon).
   Otherwise they are unexpectedly dragged just as an image and
   it is downloadable via dropping on the desktop or others. */
img {
  pointer-events: none;
}

button {
  -moz-user-focus: ignore;
}

.vbox {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}


/* tabbar */

:root, body {
  font: message-box; /* this is same to Firefox's UI. */
}

#tabbar-container,
#tabbar,
#background,
#subpanel-container {
  bottom: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--accessible-ui-z-index);
}

#tabbar {
  position: absolute;
}

#tabbar.overflow {
  overflow-y: scroll;
}

:root.initializing #tabbar {
  opacity: 0;
}

:root.animation #tabbar {
  transition: margin-top var(--collapse-animation);
}

#background {
  background-color: -moz-dialog; /* This is required to cover dummy elements. See also: https://github.com/piroor/treestyletab/issues/1703#issuecomment-354646405 */
  pointer-events: none;
  z-index: var(--background-z-index);
}

/* put scrollbar leftside */
:root.left #tabbar {
  direction: rtl;
}
:root.left #all-tabs,
:root.left #tabbar .after-tabs {
  direction: ltr;
}

#tabbar {
  scrollbar-width: thin;
}


ul {
  flex-grow: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}


/* dummy elements to calculate actual size of boxes */

#dummy-tabs {
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  pointer-events: none;
  position: fixed;
  right: 0;
  z-index: var(--dummy-element-z-index); /* Put it below the background. See also: https://github.com/piroor/treestyletab/issues/1703#issuecomment-354646405 */
}

#dummy-favicon-size-box {
  background: -moz-dialog;
  display: inline-block;
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
  min-width: 16px;
  min-height: 16px;
}

#dummy-tab-color-box {
  background: -moz-dialog;
}

#dummy-highlight-color-box {
  background: Highlight;
  color: HighlightText;
}


/* tabs */

tab-item {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  left: 0;
  line-height: 1;
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  /* margin-top: 0; *//* don't set for animation */
  max-width: 100%;
  overflow: hidden;
  opacity: 1;
  position: relative;
  top: 0;
}

tab-item,
tab-item * {
  vertical-align: middle;
}

tab-item > * {
  position: relative;
  z-index: var(--tab-base-z-index);
}

tab-item tab-favicon {
  z-index: var(--tab-favicon-z-index);
}

tab-item.hidden {
  pointer-events: none;
  position: fixed;
  visibility: collapse;
}

:root.animation tab-item.animation-ready,
:root.animation .after-tabs button {
  transition: var(--tab-animation);
}
:root.animation tab-item.animation-ready:not(.expanding),
:root.animation tab-item.animation-ready.expanding.moving {
  transition: var(--tab-animation),
              var(--tab-indent-animation);
}

tab-item.removing,
tab-item:not(.pinned).collapsed,
tab-item.duplicating {
  margin-top: calc(0px - var(--tab-size));
  opacity: 0;
  pointer-events: none;
  z-index: var(--invisible-z-index);
}

tab-item:not(.pinned).collapsed.collapsed-completely {
  visibility: collapse;
}

tab-item.duplicating {
  transition: none;
}


:root.left tab-item tab-twisty {
  order: -1;
}
:root.left tab-item tab-closebox {
  order: 10000;
}

:root.right tab-item tab-twisty {
  order: 10000;
}
:root.right tab-item tab-closebox {
  order: -1;
}

tab-item .highlighter,
tab-item .burster,
tab-item.faviconized.unread tab-favicon::before,
tab-item.attention tab-favicon::before,
tab-item .extra-items-container.behind,
tab-item .extra-items-container.front {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

tab-item .extra-items-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
}

tab-item .extra-items-container.front {
  justify-content: flex-end;
  left: var(--tab-label-start-offset);
  pointer-events: auto;
  right: var(--tab-label-end-offset);
  z-index: var(--tab-extra-contents-front-z-index);
}

tab-item:not(.bursting) .burster {
  display: none;
}

tab-item .highlighter {
  z-index: var(--tab-highlighter-z-index);
}

tab-item .burster {
  z-index: var(--tab-burster-z-index);
}

tab-item.faviconized.unread tab-favicon::before,
tab-item.attention tab-favicon::before {
  bottom: auto;
  content: '';
  height: var(--faviconized-tab-size);
  left: var(--attention-marker-x-offset);
  right: auto;
  top: var(--attention-marker-y-offset);
  width: var(--faviconized-tab-size);
}

tab-item .extra-items-container.behind {
  z-index: var(--tab-extra-contents-behind-z-index);
}


/* pinned tabs */

tab-item.pinned {
  border-top: none;
  border-left: none;
  margin: 0;
  position: fixed;
  z-index: var(--over-tabs-z-index);
}

tab-item.pinned:not(.faviconized) {
  left: 0;
  right: 0;
}

tab-item.faviconized {
  --tab-current-size: var(--faviconized-tab-size);
  height: var(--tab-current-size);
  max-height: var(--tab-current-size);
  max-width: var(--tab-current-size);
  width: var(--tab-current-size);
  padding: calc((var(--tab-current-size) - var(--favicon-size)) / 2);
}

tab-item.pinned tab-closebox,
tab-item.faviconized :-moz-any(
  tab-twisty,
  tab-label
) {
  display: none;
}

tab-item.faviconized.unread:not(.active):not(:hover) tab-favicon::before,
tab-item.attention:not(:hover) tab-favicon::before {
  background-image: var(--attention-marker-gradient);
}

tab-item.faviconized.unread:not(.active):hover tab-favicon::before,
tab-item.attention:hover tab-favicon::before {
  background-image: var(--attention-marker-gradient-hover);
}


/* tab label */

tab-item tab-label {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

:root:not([data-label-overflow="fade"]) tab-item tab-label {
  text-overflow: ".."; /*ellipsis*/;
}

:root[data-label-overflow="fade"] tab-item tab-label.overflow {
  mask-image: linear-gradient(to left, transparent 0, black 2em);
}
:root[data-label-overflow="fade"] tab-item tab-label.overflow:dir(rtl),
:root[data-label-overflow="fade"].rtl tab-item tab-label.overflow {
  direction: rtl;
  mask-image: linear-gradient(to right, transparent 0, black 2em);
}

/* This is for backward compatibility about custom user style rules like https://github.com/piroor/treestyletab/issues/1363 */
tab-item .label-content {
  color: inherit;
}

tab-item:not([data-child-ids]) .counter,
tab-item:not(.subtree-collapsed) .counter {
  display: none;
}

.counter::before {
  content: "(";
}

.counter::after {
  content: ")";
}


/* tab-closebox */

tab-closebox {
  line-height: 0;
  opacity: var(--button-opacity);
  position: relative;
  z-index: var(--tab-ui-z-index);
}

tab-closebox::after {
  /*
    There are some possible characters for this purpose:
    https://en.wikipedia.org/wiki/X_mark
    - X: upper case X
      * Too narrow
    - ×: U+00D7 MULTIPLICATION SIGN (z notation Cartesian product)
      * Too small on macOS
    - ╳: U+2573 BOX DRAWINGS LIGHT DIAGONAL CROSS
      * Too large on Ubuntu
    - ☓ : U+2613 SALTIRE (St Andrew's Cross)
      * Narrow a little on Windows and macOS
    - ✕: U+2715 MULTIPLICATION X
      * Too small on macOS
    - ✖: U+2716 HEAVY MULTIPLICATION X
      * Too small on macOS
    - ❌ : U+274C CROSS MARK
      * Colored on macOS
    - ❎ : U+274E NEGATIVE SQUARED CROSS MARK
      * Colored on macOS
      * Box around the mark is unnecessary
    - ⨉ : U+2A09 N-ARY TIMES OPERATOR
    - ⨯: U+2A2F VECTOR OR CROSS PRODUCT
      * Too small on macOS
    - 🗙: U+1F5D9 CANCELLATION X
      * Unavailable on macOS
    - 🗴 : U+1F5F4 BALLOT SCRIPT X
      * Unavailable on macOS
    - 🞩: U+1F7A9 LIGHT SALTIRE
      * Unavailable on macOS
    So ⨉ (U+2A09) looks good for me on Windows, macOS, and Linux (tested on Ubuntu).
    But it is not guaranteed, so now we use SVG icon instead.
  */
  -moz-context-properties: fill;
  background: url("./icons/close-16.svg") no-repeat center / 100%;
  content: "";
  display: inline-block;
  fill: var(--tab-text);
  height: var(--svg-small-icon-size);
  width: var(--svg-small-icon-size);
}
:root.simulate-svg-context-fill tab-closebox::after {
  background: var(--tab-text);
  mask: url("./icons/close-16.svg") no-repeat center / 100%;
}


tab-item:not(.collapsed) tab-closebox:hover {
  opacity: var(--button-hover-opacity);
}

tab-item:not(.collapsed) tab-closebox:active {
  opacity: var(--button-active-opacity);
}


/* contextual identity (aka Container Tab) */

.contextual-identity-marker {
  bottom: 0;
  position: absolute;
}

:root.left tab-item:not(.faviconized) .contextual-identity-marker {
  right: 0;
  top: 0;
  width: calc(var(--favicon-size) / 6);
}

:root.right tab-item:not(.faviconized) .contextual-identity-marker {
  left: 0;
  top: 0;
  width: calc(var(--favicon-size) / 6);
}

tab-item.faviconized .contextual-identity-marker {
  height: calc(var(--favicon-size) / 6);
  left: 0;
  right: 0;
}


/* non-tab items */

#tabbar.overflow .after-tabs,
#tabbar:not(.overflow) ~ .after-tabs {
  display: none;
}

#tabbar ~ .after-tabs {
  bottom: 0;
  height: 0;
  justify-content: flex-end;
  left: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  z-index: var(--over-tabs-z-index);
}


.newtab-button-box {
  position: relative;
}

.newtab-button {
  background: none transparent;
  margin: 0;
  text-align: center;
}

.newtab-button::before {
  -moz-context-properties: fill;
  background: url("./icons/new-16.svg") no-repeat center / 100%;
  content: "";
  display: inline-block;
  fill: var(--tab-text);
  height: var(--svg-small-icon-size);
  opacity: var(--button-opacity);
  width: var(--svg-small-icon-size);
}
:root.simulate-svg-context-fill .newtab-button::before {
  background: var(--tab-text);
  mask: url("./icons/new-16.svg") no-repeat center / 100%;
}

.newtab-button:hover::before {
  opacity: var(--button-hover-opacity);
}

:root.newtab-action-selectable
  .after-tabs
  .newtab-button-box:hover
  .newtab-action-selector-anchor,
.after-tabs
  .newtab-action-selector-anchor.open,
:root.contextual-identity-selectable
  .after-tabs
  .newtab-button-box:hover
  .contextual-identities-selector-anchor:not([disabled="true"]),
.after-tabs
  .contextual-identities-selector-anchor.open {
  pointer-events: auto;
  opacity: 1;
}

.after-tabs .newtab-action-selector-anchor,
.after-tabs .contextual-identities-selector-anchor {
  background: none;
  bottom: 0;
  color: var(--tab-text);
  display: flex;
  max-width: 1.5em;
  opacity: 0;
  overflow: hidden;
  padding: 0.25em;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity var(--collapse-animation);
  z-index: var(--over-buttons-z-index);
}
:root.contextual-identity-selectable
  .after-tabs
  .newtab-action-selector-anchor {
  border-width: 0 1px 0 0;
  left: 0;
}
:root:not(.contextual-identity-selectable)
  .after-tabs
  .newtab-action-selector-anchor,
.after-tabs .contextual-identities-selector-anchor {
  border-width: 0 0 0 1px;
  right: 0;
}

.newtab-action-selector-anchor::-moz-focus-inner,
.contextual-identities-selector-anchor::-moz-focus-inner {
  border: none;
}

.newtab-action-selector-anchor::before,
.contextual-identities-selector-anchor::before,
#subpanel-toggler::before {
  content: "▼";
  font-size: 0.65em;
  margin: 0.125em;
}

#contextual-identities-selector li {
  /* (default padding defined in MenuUI.js) + (icon size) + (margin between icon and label) */
  padding-left: calc((1em - 16px + 0.5em) + var(--favicon-size) + 0.2em);
}


#out-of-view-tab-notifier {
  background: transparent repeat-x bottom;
  background-image: linear-gradient(
                      to top,
                      var(--tab-highlighted-glow) 0,
                      transparent 100%
                    );
  display: none;
  margin-top: calc(0 - var(--tab-size));
  min-height: var(--tab-size);
  pointer-events: none;
  position: relative;
  opacity: 0;
}

#out-of-view-tab-notifier.notifying {
  animation: blink var(--out-of-view-tab-notify-duration) ease-in-out 1;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  #out-of-view-tab-notifier.notifying {
    animation: none;
  }
}


/* sub panel */

#subpanel-container {
  top: auto;
}

iframe#subpanel {
  border: none;
  height: auto;
  margin: 0;
  max-height: none;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}

#subpanel-header {
  background: var(--tab-surface);
  border-top: 1px solid var(--tab-border);
  cursor: ns-resize;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 1;
  margin: 0;
  padding: 0.3em 0.2em 0.2em;
}

#subpanel-container:not(.collapsed) #subpanel-header {
  border-bottom: 1px solid var(--tab-border);
}

#subpanel-header-main {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#subpanel-selector-anchor,
#subpanel-toggler {
  background: none;
  border: none;
  color: var(--tab-text);
  display: inline-block;
  font: -moz-button;
  padding: 0 0.5em;
}

#subpanel-selector-anchor {
  cursor: default;
}

#subpanel-selector-anchor > * {
  pointer-events: none;
}

#subpanel-selector-anchor span.icon > img,
#subpanel-selector span.icon > img {
  height: 1em;
  max-height: 1em;
  max-width: 1em;
  width: 1em;
}

#subpanel-selector-anchor span.icon > img:not([src]) {
  display: none;
}

#subpanel-selector span.icon > :not([src]) {
  visibility: hidden;
}

#subpanel-selector span.icon {
  margin-right: 0.25em;
}

#subpanel-toggler {
  cursor: default;
  max-width: 1.5em;
}

#subpanel-container.collapsed #subpanel-toggler::before {
  content: "▲";
}



/* fake context menu */

#tabContextMenu:not([data-tab-id]) li.extra {
  display: none !important;
}


/* bookmark dialog */

.rich-confirm .bookmark-dialog input[type="text"],
.rich-confirm .bookmark-dialog button {
  max-width: 100%;
}


/* blocking UI */

#blocking-screen {
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--blocking-ui-z-index);
}

:root.blocking-throbber #blocking-screen {
  background: rgba(0, 0, 0, 0.35);
}

:root.blocking #blocking-screen {
  display: block;
}
