/*
# 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 {
  --tab-vertical-padding: 0.3em; /* We should define this as a variable to reuse calculation of extra tab contents size. */
}

tab-item-substance,
.after-tabs button,
.after-tabs [role="button"] {
  border: 1px solid var(--tab-border);
  border-width: 1px 0;
  padding-block: var(--tab-vertical-padding);
  padding-inline: 0.25em;
}
tab-item,
.after-tabs button,
.after-tabs [role="button"] {
  margin-block-end: -1px;
}

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 */ +
                  0.35em + 0.25em /* padding-inline */);
}

tab-item[data-next-group-color] {
  tab-item-substance {
    --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);
  }
}

tab-item.pinned tab-item-substance {
  border-block-width: 0 1px;
  border-inline-width: 0 1px;
}


.after-tabs button,
.after-tabs [role="button"] {
  padding-block: 0em;
  padding-inline: 0em;
}

#tabbar + .after-tabs button,
#tabbar + .after-tabs [role="button"] {
  /* IMPORTANT NOTE!!
     We need to keep sizes of the .after-tabs boxes inside/outside #tabbar exact same,
     to prevent flashing of the scrollbar from repeatedly switched overflow/underflow
     state. See also: https://github.com/piroor/treestyletab/issues/3589 */
  /* border-block-end: none; */
  border-block-end-color: transparent;
}


:root.left tab-item:not(.pinned) tab-item-substance,
:root.left .after-tabs button:not([data-menu-ui]),
:root.left .after-tabs [role="button"]:not([data-menu-ui]) {
  padding-inline-end: 0.35em;
}
:root.left tab-item:not(.pinned)[data-parent-id] tab-item-substance {
  border-inline-start-width: 1px;
}

:root.right tab-item:not(.pinned) tab-item-substance,
:root.right .after-tabs button:not([data-menu-ui]),
:root.right .after-tabs [role="button"]:not([data-menu-ui]) {
  padding-inline-start: 0.35em;
}
:root.right tab-item:not(.pinned)[data-parent-id] tab-item-substance {
  border-inline-end-width: 1px;
}

#tabbar tab-item.pinned + tab-item:not(.pinned) tab-item-substance,
#tabbar tab-item:not(.pinned):first-of-type tab-item-substance {
  border-block-start: none;
}

:root.have-pinned-tabs #pinned-tabs-container {
  border-block-end: 1px solid var(--tab-border);
}


/* 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;
}
.overflow-indicator.start {
  background-position: 0 -0.3em;
}
.overflow-indicator.end {
  background-position: 0 0.3em;
  border-block-end: 1px solid var(--tab-border);
}
:root.left .overflow-indicator.start,
:root.left .overflow-indicator.end {
  background-image: radial-gradient(ellipse at right,
                                    rgba(0,0,0,0.2) 0%,
                                    rgba(0,0,0,0.2) 7.6%,
                                    rgba(0,0,0,0) 87.5%);
}
:root.right .overflow-indicator.start,
:root.right .overflow-indicator.end {
  background-image: radial-gradient(ellipse at left,
                                    rgba(0,0,0,0.2) 0%,
                                    rgba(0,0,0,0.2) 7.6%,
                                    rgba(0,0,0,0) 87.5%);
}


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

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

tab-item {
  --in-tab-button-offset: calc((var(--tab-caption-size) - 1em) / 2);
  --in-tab-button-negative-offset: calc((1em - var(--tab-caption-size)) / 2);

  /* expand closebox to fill full height of tab */
  tab-closebox,
  &:not(.faviconized) tab-sound-button {
    margin-block: var(--in-tab-button-negative-offset);
    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;
    }
  }
}



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

/* This is required to avoid needless padding in the scrollbox produced by the box-shadow.
   See also: https://github.com/piroor/treestyletab/issues/3364 */
#normal-tabs-container.overflow tab-item:not(.pinned).last-visible,
#normal-tabs-container.overflow tab-item:not(.pinned).last-visible ~ tab-item {
  overflow: hidden;
}



.sticky-tabs-container tab-item .background:not(.base) {
  box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.2);
}


/* multiselection of tabs */

:root {
  --multiselected-color: Highlight;
}

:root.mutiple-highlighted tab-item.highlighted tab-item-substance::after {
  background: var(--multiselected-color);
  bottom: 0;
  content: " ";
  display: block;
  inset-inline-start: 0;
  inset-inline-end: 0;
  opacity: var(--multiselected-color-opacity);
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 10;
}


/* show more-highlighter like as tree */

tab-item:not(.faviconized) .highlighter::after {
   top: calc(var(--tab-highlighter-size) * 2);
}

tab-item[data-child-ids].subtree-collapsed.highlighted.some-descendants-highlighted .highlighter::after {
  width: calc(var(--tab-highlighter-size) * 2);
}
