/*
# 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");
@import url("base.css");
@import url("border.css");
@import url("plain-color.css");
@import url("vertigo-color.css");
@import url("shadow.css");

:root:not([color-scheme="system-color"]) {
  --tab-highlighter: var(--browser-tab-highlighter, var(--blue-50));
}

:root {
  --tab-surface-active-gradient-start: rgba(249, 249, 250, 0.4);
  --tab-surface-active-gradient-end:   rgba(249, 249, 250, 0);

  --multiselected-color-opacity: 0.15;
}
:root tab-item:not(.active):hover {
  --tab-surface-active-gradient-start: rgba(249, 249, 250, 0.25);
  --tab-surface-active-gradient-end:   rgba(249, 249, 250, 0);
}

@media not (prefers-color-scheme: dark) {
  :root[color-scheme="system-color"] {
    --tab-surface-active-gradient-start: var(--face-gradient-start-active);
    --tab-surface-active-gradient-end:   var(--face-gradient-end);
  }
  :root[color-scheme="system-color"] tab-item:not(.active):hover {
    --tab-surface-active-gradient-start: var(--face-gradient-start-inactive);
    --tab-surface-active-gradient-end:   var(--face-gradient-end);
  }
}

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

tab-item,
.after-tabs button {
  background-color: var(--tab-surface);
}

tab-item:hover,
.after-tabs button:hover {
  --tab-surface: var(--tab-surface-hover);
}

tab-item.active {
  --tab-surface: var(--tab-surface-active);
}

tab-item.active:hover,
tab-item.bundled-active {
  --tab-surface: var(--tab-surface-active-hover);
}


:root.left tab-item:not(.faviconized).active {
  background-image: linear-gradient(
                      to right,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 30%
                    );
}
:root.left tab-item:not(.faviconized):hover {
  background-image: linear-gradient(
                      to right,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

:root.right tab-item:not(.faviconized).active {
  background-image: linear-gradient(
                      to left,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 30%
                    );
}
:root.right tab-item:not(.faviconized):hover {
  background-image: linear-gradient(
                      to left,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

tab-item.faviconized.active {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 40%
                    );
}
tab-item.faviconized:hover {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 60%
                    );
}


tab-item:not(.active):not(.bundled-active):not(.highlighted):hover .highlighter::before {
  background-color: var(--browser-bg-active-for-header-image, var(--browser-bg-less-darker, transparent));
  --tab-highlighter-start: rgba(0, 20, 20, 0.015);
  --tab-highlighter-end: rgba(0, 20, 20, 0.2);
}

:root.left tab-item:not(.faviconized):not(.active):not(.bundled-active):not(.highlighted):hover .highlighter::before {
  background-image: linear-gradient(
                      to right,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

:root.right tab-item:not(.faviconized):not(.active):not(.bundled-active):not(.highlighted):hover .highlighter::before {
  background-image: linear-gradient(
                      to left,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

tab-item.faviconized:not(.active):not(.bundled-active):not(.highlighted):hover .highlighter::before {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

@media (prefers-color-scheme: dark) {
  :root {
    --tab-surface-active-gradient-start: rgba(12, 39, 56, 0.4);
    --tab-surface-active-gradient-end:   rgba(12, 39, 56, 0);
  }
  tab-item:not(.active):hover {
    --tab-surface-active-gradient-start: rgba(12, 39, 56, 0.25);
    --tab-surface-active-gradient-end:   rgba(12, 39, 56, 0);
  }

  tab-item:not(.active):not(.bundled-active):not(.highlighted):hover .highlighter::before {
    --tab-highlighter-start: var(--grey-10-a015);
    --tab-highlighter-end: var(--grey-10-a20);
  }
}
