/*
# 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-color.css");

:root {
  --color-animation: 0s ease-out;
  --tab-vertical-padding: 0.45em; /* We should define this as a variable to reuse calculation of extra tab contents size. */
  --tab-border-radius-size: 0.35em;
  --tab-dropshadow-blur: 0.4em;
  --tab-dropshadow-padding: 0.2em;
  --tab-dropshadow-size: var(--tab-dropshadow-padding); /* for backward compatibility */
  --in-tab-button-offset: calc(((var(--tab-caption-size) - 1em) / 2) + var(--tab-dropshadow-padding));
  --in-tab-button-negative-offset: calc(((1em - var(--tab-caption-size)) / 2) - var(--tab-dropshadow-padding));
  --tab-twisty-offset: calc(((var(--tab-ui-size) - var(--favicon-size)) / 2) + var(--tab-dropshadow-padding));
  --tab-twisty-negative-offset: calc(((var(--favicon-size) - var(--tab-ui-size)) / 2) - var(--tab-dropshadow-padding));

  /* Coloring */

  --in-content-page-background: white;
  --toolbar-non-lwt-bgcolor: light-dark(
    var(--in-content-page-background),
    rgb(66,65,77) /* https://searchfox.org/mozilla-central/rev/0c7c41109902cb8967ec3ef2c0ddb326701cfbee/toolkit/mozapps/extensions/default-theme/manifest.json#23 */
  );
  --toolbar-non-lwt-textcolor: var(--in-content-page-color);
  /* linear-gradient is from https://searchfox.org/mozilla-central/rev/6338ce9f059dbcf98072ad29033f3a4327085ddb/browser/themes/shared/tabs.inc.css#599 */
  --toolbar-non-lwt-bgimage: linear-gradient(var(--browser-selected-tab-bg,
                                                 var(--non-lwt-selected-tab-background-color-proton,
                                                     transparent)),
                                             var(--browser-selected-tab-bg,
                                                 var(--non-lwt-selected-tab-background-color-proton,
                                                     transparent))),
                             linear-gradient(var(--toolbar-bgcolor, transparent),
                                             var(--toolbar-bgcolor, transparent)),
                             var(--lwt-header-image, none);

  --tab-like-surface: var(--theme-colors-toolbar, var(--browser-bg-active-for-header-image, var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor))));
  --tab-surface-regular: transparent;
  --tab-surface-active-bgimage: var(--toolbar-non-lwt-bgimage);
  --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor));
  --tab-text-active: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
  --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed)));
  --tab-active-border: var(--browser-bg-active-for-header-image, transparent);
  --tab-surface-active: var(--browser-selected-tab-bg, var(--tab-like-surface, var(--in-content-button-background-mixed)));
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --throbber-color: var(--browser-loading-indicator, var(--tab-text));
  --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active));

  --tabbar-bg: light-dark(
    -moz-dialog,
    var(--browser-bg-darker, var(--dark-frame))
  );

  --tab-highlighted-glow: light-dark(
    rgb(42, 195, 162), /* https://searchfox.org/mozilla-central/rev/74f3c420ee54001059e1850bef3be876749ff873/browser/themes/shared/tabs.inc.css#927 */
    rgb(84, 255, 189) /* https://searchfox.org/mozilla-central/rev/74f3c420ee54001059e1850bef3be876749ff873/browser/themes/shared/tabs.inc.css#931 */
  );
  --multiselected-color: var(--tab-surface-active);
}
:root[data-user-agent*="Mac"] {
  --non-lwt-selected-tab-background-color-proton: transparent;
}

:root[data-user-agent*="Win"] {
  --toolbar-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  --tabbar-bg: light-dark(rgb(240, 240, 244), var(--browser-bg-darker, rgb(28, 27, 34)));
}
/* Firefox does not apply pale color to tabs in inactive windows when tabs are placed not in the titlebar, so we follow the decision. */
/*
:root[data-user-agent*="Win"]:-moz-window-inactive {
  --toolbar-non-lwt-textcolor: light-dark(rgb(31, 30, 37), rgb(235, 235, 239));
  --tabbar-bg: light-dark(rgb(235, 235, 239), var(--browser-bg-darker, rgb(31, 30, 37)));
}
*/

:root[color-scheme="system-color"][data-user-agent*="Linux"] {
  --toolbar-non-lwt-textcolor: -moz-dialogtext;
  --toolbar-non-lwt-bgcolor: -moz-dialog;
  --in-content-box-border-color-mixed: var(--ThreeDShadow);
}
:root[color-scheme="system-color"][data-user-agent*="Linux"] #background {
  --tabbar-bg: var(--AppWorkspace);
}

@media not (prefers-color-scheme: dark) {
  :root.platform-mac {
    --tabbar-bg: #f0f0f4; /* https://searchfox.org/mozilla-central/rev/e9eb869e90a8d717678c3f38bf75843e345729ab/browser/themes/osx/browser.css#52 */
  }

  /* we cannot know the GNOME3 "headerbar" color, so use inverted menu color instead. */
  :root[color-scheme="system-color"][data-user-agent*="Linux"]
    tab-item:not(.active):not(.bundled-active):not(.highlighted),
  :root[color-scheme="system-color"][data-user-agent*="Linux"]
    .after-tabs button,
  :root[color-scheme="system-color"][data-user-agent*="Linux"]
    .after-tabs [role="button"],
  :root[color-scheme="system-color"][data-user-agent*="Linux"]
    #subpanel-selector-anchor,
  :root[color-scheme="system-color"][data-user-agent*="Linux"]
    #background {
    --toolbar-non-lwt-bgcolor: var(--MenuText);
    --toolbar-non-lwt-textcolor: var(--Menu);
    --tabbar-bg: var(--toolbar-non-lwt-bgcolor);
    /* these colors need to redefined here to apply new --toolbar-non-lwt-textcolor */
    --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
    --tab-text-active: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
    --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  }
}


/* root container, background */

:root,
body,
#background {
  background-color: var(--browser-background, var(--tabbar-bg));
  background-image: var(--browser-bg-images, none);
  background-position: var(--browser-bg-position, left);
  background-size: var(--browser-bg-size, auto);
  background-repeat: var(--browser-bg-repeat, none);
}
:root.right,
:root.right #background {
  background-position: right;
}


/* overflow-start-indicator and overflow-end-indicator
   ref: https://searchfox.org/mozilla-central/rev/1ef947827852125825dda93d8f4f83d1f55739eb/browser/themes/shared/tabs.css#527-563 */
.overflow-indicator {
  height: 0.6em;

  &.start {
    background-position: 0 -0.3em;
    border-block-start: 0.05em solid rgba(255, 255, 255, 0.2);
  }
  &.end {
    background-position: 0 0.3em;
    border-block-end: 0.05em solid rgba(255, 255, 255, 0.2);
  }
  :root.left &.start,
  :root.left &.end {
    background-image: radial-gradient(ellipse at right,
                                      rgba(0,0,0,0.1) 0%,
                                      rgba(0,0,0,0.1) 7.6%,
                                      rgba(0,0,0,0) 87.5%);
  }
  :root.right &.start,
  :root.right &.end {
    background-image: radial-gradient(ellipse at left,
                                      rgba(0,0,0,0.1) 0%,
                                      rgba(0,0,0,0.1) 7.6%,
                                      rgba(0,0,0,0) 87.5%);
  }
}


/* tab bar */

#tabbar:not(.scrollbar-autohide) {
  #pinned-tabs-container,
  #normal-tabs-container {
    scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed)))
                     var(--theme-colors-toolbar, var(--in-content-box-background));
  }
}


/* tab and tab-like items */

tab-item-substance,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-selector-anchor {
  border: 1px solid transparent;
  border-width: 1px 0;
  position: relative;
}

tab-item,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-container,
#dummy-tab-color-box {
  --tab-surface: var(--tab-surface-regular);
  --tab-text: var(--tab-text-regular);
  --tab-text-shadow: var(--browser-textshadow-for-header-image, none);
}
tab-item-substance,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-container,
#dummy-tab-color-box {
  background: transparent;
  color: var(--tab-text);
  line-height: 1;
  text-shadow: var(--tab-text-shadow);
}

tab-item.active,
tab-item.active:hover,
tab-item.bundled-active,
tab-item.bundled-active:hover,
.mutiple-highlighted > tab-item.highlighted,
.mutiple-highlighted > tab-item.highlighted:hover {
  --tab-surface: var(--tab-surface-active);
  --tab-surface-bgimage: var(--tab-surface-active-bgimage);
  --throbber-color: var(--throbber-color-active);
  --tab-text: var(--tab-text-active);
  --tab-text-inverted: var(--tab-text-active-inverted);
}

tab-item:not(.active):not(.bundled-active):not(.highlighted):hover,
.after-tabs button:hover,
.after-tabs [role="button"]:hover,
#subpanel-selector-anchor:hover {
  --tab-surface: var(--tab-text-regular);
  --tab-text: var(--tab-text-regular);
}

tab-item-substance {
  padding-block: var(--tab-vertical-padding);
  padding-inline: 0.25em;
  /* Transparent tabs are shown above solid tabs.
     We have to set z-index to show all tabs in the same layer. */
  z-index: auto;
}

.after-tabs button,
.after-tabs [role="button"] {
  --tab-like-button-padding: 0.2em;
  padding-block: calc(var(--tab-dropshadow-blur) + var(--tab-like-button-padding));
  padding-inline: 0;
  z-index: 100;
}

:root.left:not(.rtl),
:root.right.rtl {
  tab-item:not(.pinned) tab-item-substance,
  .after-tabs button:not([data-menu-ui]),
  .after-tabs [role="button"]:not([data-menu-ui]) {
    padding-inline-end: 0.35em;
  }
}

:root.right:not(.rtl),
:root.left.rtl {
  tab-item:not(.pinned) tab-item-substance,
  .after-tabs button:not([data-menu-ui]),
  .after-tabs [role="button"]:not([data-menu-ui]) {
    padding-inline-start: 0.35em;
  }
}

tab-item[type="group"] tab-item-substance {
  max-width: calc(max(var(--tab-label-width), calc(var(--favicon-size) / 2)) +
                  0.25em /* margin-inline of tab-label */ +
                  var(--tab-border-radius-size) + var(--tab-border-radius-size) /* radius of tab-item-substance */ +
                  0.35em + 0.25em /* padding-inline of tab-item-substance */);
}


/* tab background */

.after-tabs button::before,
.after-tabs [role="button"]::before,
#subpanel-selector-anchor::before {
  content: " ";
  display: inline-block;
  position: absolute;
}

tab-item .background,
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before,
#subpanel-selector-anchor:hover::before {
  background-color: var(--tab-surface);
  background-image: var(--tab-surface-bgimage);
  border-radius: var(--tab-border-radius-size);
}

tab-item .background,
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before {
  bottom: var(--tab-dropshadow-padding);
  inset-inline-start: var(--tab-dropshadow-padding);
  inset-inline-end: var(--tab-dropshadow-padding);
  top: var(--tab-dropshadow-padding);
}

tab-item.faviconized .background {
  --tab-dropshadow-padding: 0.13em;
}

tab-item[type="group"] .background {
  border: 1px solid var(--tab-border);
}

tab-item[data-next-group-color] {
  .background,
  tab-item-substance:hover .background {
    --tab-surface: light-dark(var(--next-group-color-pale), var(--next-group-color)) !important;
    --tab-border: light-dark(var(--next-group-color), var(--next-group-color-invert)) !important;
    border: 1px solid var(--tab-border);
    opacity: 1 !important;
  }
}

#subpanel-selector-anchor:hover::before {
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
}

tab-item.active,
tab-item.bundled-active,
:root.mutiple-highlighted tab-item.highlighted {
  .background:not(.base),
  tab-item-substance:hover .background:not(.base) {
    box-shadow: 0 0 var(--tab-dropshadow-blur) rgba(0, 0, 0, 0.4);
    outline: 1px solid var(--browser-tab-highlighter, var(--tab-active-border, currentcolor));
    outline-offset: -1px;
  }
}
.sticky-tabs-container tab-item:not(.active):not(.bundled-active) .background.base {
  box-shadow: 0 0 var(--tab-dropshadow-blur) rgba(0, 0, 0, 0.2);
}

tab-item:not([type="group"]):not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .background:not(.base),
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before,
#subpanel-selector-anchor:hover::before {
  opacity: 0.11;
}

/* extra focus ring for multiselected tabs https://bugzilla.mozilla.org/show_bug.cgi?id=1751807 */
:root.mutiple-highlighted tab-item.highlighted {
  .background:not(.base),
  tab-item-substance:hover .background:not(.base) {
    outline: 1px solid var(--focus-outline-color);
    outline-offset: -1px;
  }
}
:root.mutiple-highlighted tab-item.highlighted.active {
  .background:not(.base),
  tab-item-substance:hover .background:not(.base) {
    outline-width: 2px;
    outline-offset: -2px;
  }
}


.sticky-tabs-container tab-item:not(.active):not(.bundled-active) .background.base {
  background-color: var(--browser-background, var(--tabbar-bg, var(--bg-color, ButtonFace)));
  background-image: var(--browser-bg-images, none);
  background-position: var(--browser-bg-position, left);
  background-size: var(--browser-bg-size, auto);
  background-repeat: var(--browser-bg-repeat, none);
  opacity: 1;
}



/* in-tab contents */

tab-item {
  * {
    color: var(--tab-text);
  }

  tab-label {
    margin-inline-start: 0.25em;
    padding-block: 0 0.25em;
    padding-inline: 0;
  }

  tab-favicon {
    margin-block: 0.25em;
  }

  /* expand buttons to fill full height of tab */
  tab-closebox,
  &:not(.faviconized) tab-sound-button {
    background: none transparent;
    border: none 0 transparent;
    margin-block: var(--in-tab-button-negative-offset);
    margin-inline: 0;
    padding-block: var(--in-tab-button-offset);
    padding-inline: 0.25em;

    &::before {
      border-radius: 10%;
      content: "";
      display: inline-block;
      height: calc(var(--svg-small-icon-size) + 0.2em);
      margin-block-start: -0.1em;
      margin-inline-start: -0.1em;
      width: calc(var(--svg-small-icon-size) + 0.2em);
      position: absolute;
    }

    &:hover::before {
      background: var(--tab-text);
      box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.3);
      opacity: 0.1;
    }

    &:active::before {
      opacity: 0.2;
    }

    &::after {
      position: relative;
    }
  }

  &.active tab-closebox:hover::before {
    background: var(--tab-text);
  }

  .burster {
    --throbber-color: var(--tab-loading-fill);
  }
}

/* hide active tab marker and highlighter for collapsed tree */
.highlighter::before,
tab-item:not(.faviconized).subtree-collapsed.some-descendants-highlighted .highlighter::after,
tab-item:not(.faviconized).subtree-collapsed.all-descendants-highlighted .highlighter::after {
  display: none;
}

/* contextual identity marker in tabs */

tab-item:not(.faviconized) .contextual-identity-marker {
  :root.left:not(.rtl) &,
  :root.right.rtl & {
    inset-inline-end: calc(var(--tab-dropshadow-blur) - var(--tab-highlighter-size));
  }

  :root.right:not(.rtl) &,
  :root.left.rtl & {
    inset-inline-start: calc(var(--tab-dropshadow-blur) - var(--tab-highlighter-size));
  }
}

tab-item.faviconized .contextual-identity-marker {
  bottom: auto;
  top: 0;
}

.after-tabs {
  button.newtab-action-selector-anchor::after,
  button.contextual-identities-selector-anchor::after {
    margin-block-start: calc((var(--favicon-size) - var(--svg-small-icon-size)) / 2 + var(--tab-dropshadow-blur) + var(--tab-like-button-padding));
  }
}
