/*
# 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("base.css");
@import url("border.css");
@import url("active-tab-marker.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, #0a84ff);
}

: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:not(.active):hover {
  --tab-surface-active-gradient-start: rgba(249, 249, 250, 0.25);
  --tab-surface-active-gradient-end:   rgba(249, 249, 250, 0);
}

: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: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, none);
}

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

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

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

.tab.active:not(.collapsed):hover {
  --tab-surface: var(--tab-surface-active-hover);
}


:root.left .tab: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:not(.faviconized):not(.collapsed):hover {
  background-image: linear-gradient(
                      to right,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

:root.right .tab: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:not(.faviconized):not(.collapsed):hover {
  background-image: linear-gradient(
                      to left,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

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


.tab:not(.active):not(.highlighted):hover .highlighter::before {
  background-color: transparent;
  --tab-highlighter-start: rgba(0, 20, 20, 0.015);
  --tab-highlighter-end: rgba(0, 20, 20, 0.2);
}

:root.left .tab:not(.faviconized):not(.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:not(.faviconized):not(.active):not(.highlighted):hover .highlighter::before {
  background-image: linear-gradient(
                      to left,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

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