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

: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;

  --scrollbar-placeholder-size: 1em;

  --multiselected-color: transparent;
  --multiselected-color-opacity: 0.15;
}
.tab {
  --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);
}

/* 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,
#background {
  bottom: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
#tabbar.overflow {
  overflow-y: scroll;
}

: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: 10;
}

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

/* narrow scrollbar */

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow {
  margin-left: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

:root.right-scrollbar.narrow-scrollbar #tabbar.overflow {
  margin-right: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

/* no scrollbar */

:root.left-scrollbar.no-scrollbar #tabbar.overflow {
  margin-left: calc(0px - var(--scrollbar-size));
}

:root.right-scrollbar.no-scrollbar #tabbar.overflow {
  margin-right: calc(0px - var(--scrollbar-size));
}


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: 1; /* 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-highlight-color-box {
  background: Highlight;
  color: HighlightText;
}


/* tabs */

.tab {
  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,
.tab * {
  vertical-align: middle;
}

.tab > * {
  position: relative;
  z-index: 100;
}

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

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

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

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

.tab.duplicating {
  transition: none;
}


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

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

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

.tab .highlighter {
  z-index: 5000;
}

.tab .burster {
  z-index: 4000;,
}

.tab.faviconized.unread .favicon::before,
.tab.attention .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);
  z-index: 10;
}

.tab .extra-items-container.behind {
  z-index: 10;
}


/* pinned tabs */

.tab.pinned {
  border-top: none;
  border-left: none;
  margin: 0;
  position: fixed;
  z-index: 1; /* this is required to make pinned tabs clickable */
}

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

.tab.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.pinned .closebox,
.tab.faviconized :-moz-any(
  .twisty,
  .label
) {
  display: none;
}

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

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


/* tab label */

.tab .label {
  flex-grow: 1;
  overflow: hidden;
  /* text-overflow: ".."; *//* instead of "ellipsis" */;
  white-space: nowrap;
}
.tab .label.overflow {
  mask-image: linear-gradient(to left, transparent 0, black 2em);
}
.tab .label.overflow:dir(rtl),
:root.rtl .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 .label-content {
  color: inherit;
}

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

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

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


/* closebox */

.closebox {
  line-height: 0;
  opacity: var(--button-opacity);
  position: relative;
}

.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 .closebox::after {
  background: var(--tab-text);
  mask: url("./icons/close-16.svg") no-repeat center / 100%;
}


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

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


/* contextual identity (aka Container Tab) */

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

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

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

.tab.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: fixed;
  right: 0;
  z-index: 100;
}


.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: 200;
}
: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 {
  content: "▼";
  font-size: 0.65em;
  margin: 0.125em;
}

#contextual-identities-selector li {
  padding-left: calc(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;
}


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

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

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