/*
# 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-highlighter: var(--browser-tab-highlighter, Highlight);
  --tab-highlighter-inactive: rgba(0, 0, 0, 0.2);
  --tab-highlighter-size: calc(var(--favicon-size) / 8);
  --tab-highlighter-animation: 0.25s cubic-bezier(0.07, 0.95, 0, 1);
}

.highlighter::before,
.tab:not(.faviconized).subtree-collapsed.some-descendants-highlighted .highlighter::after,
.tab:not(.faviconized).subtree-collapsed.all-descendants-highlighted .highlighter::after {
  content: "";
  opacity: 0;
  position: absolute;
}

:root.animation .highlighter::before,
:root.animation .highlighter::after {
  transition: opacity var(--tab-highlighter-animation),
              transform var(--tab-highlighter-animation),
              width var(--tab-highlighter-animation);
}

.tab:not(.active):not(.highlighted):hover .highlighter::before,
.tab:not(.active):not(.highlighted):not(.faviconized):hover .highlighter::after {
  background: var(--tab-highlighter-inactive);
}
.tab.active .highlighter::before,
.tab.highlighted .highlighter::before,
.tab:not(.faviconized).highlighted .highlighter::after {
  background: var(--tab-highlighter);
}

.tab:not(.faviconized) .highlighter::before,
.tab:not(.faviconized) .highlighter::after {
  bottom: 0;
  top: 0;
  transform: scaleY(0);
  width: var(--tab-highlighter-size);
}
:root.left .tab:not(.faviconized) .highlighter::before,
:root.left .tab:not(.faviconized) .highlighter::after {
  left: 0;
}
:root.right .tab:not(.faviconized) .highlighter::before,
:root.right .tab:not(.faviconized) .highlighter::after {
  right: 0;
}
.tab:not(.faviconized):hover .highlighter::before,
.tab:not(.faviconized):hover .highlighter::after,
.tab.active:not(.faviconized) .highlighter::before,
.tab.active:not(.faviconized) .highlighter::after,
.tab.highlighted:not(.faviconized) .highlighter::before,
.tab.highlighted:not(.faviconized) .highlighter::after {
  opacity: 1;
  transform: scaleY(1);
}

.tab.faviconized .highlighter::before {
  height: var(--tab-highlighter-size);
  left: 0;
  right: 0;
  top: 0;
  transform: scaleX(0);
}
.tab.faviconized:hover .highlighter::before,
.tab.active.faviconized .highlighter::before,
.tab.highlighted.faviconized .highlighter::before {
  opacity: 1;
  transform: scaleX(1);
}


.tab[data-child-ids].subtree-collapsed.highlighted.some-descendants-highlighted .highlighter::after {
  opacity: 0.5;
}

.tab[data-child-ids].subtree-collapsed.highlighted.all-descendants-highlighted .highlighter::after {
  opacity: 1;
}
