/*
# 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/.
*/

/* tabs */

:root {
  --dropmarker-color: white;
  --throbber-color: white;
  --throbber-shadow-color: rgba(0, 0, 0, 0.45);
  --tab-surface: #9d9d9d;
  --tab-surface-active: #b3b2b3;
  --tab-text: black;
  --tab-text-inverted: white;

  --tab-highlighted-highlight: white;
  --tab-highlighted-glow: var(--tab-surface-active);
  --tab-highlighted-base: var(--tab-surface);
}

.tab,
.tab *,
.tab:not(.collapsed):hover,
.after-tabs button {
  color: val(--tab-text);
}

:root.left .tab:not(.faviconized),
:root.left .after-tabs button {
  border-image: url("tab-l.png") 10 5 10 10 fill / 10px 5px 10px 10px;
  padding: 2px 5px 2px 10px;
}

:root.left .tab:not(.faviconized).active,
:root.left .after-tabs button:hover {
  border-image: url("tab-active-l.png") 10 5 10 10 fill / 10px 5px 10px 10px;
}

:root.right .tab:not(.faviconized),
:root.right .after-tabs button {
  border-image: url("tab-r.png") 10 10 10 5 fill / 10px 10px 10px 5px;
  padding: 2px 10px 2px 5px;
}

:root.right .tab:not(.faviconized).active,
:root.right .after-tabs button:hover {
  border-image: url("tab-active-r.png") 10 10 10 5 fill / 10px 10px 10px 5px;
}

:root.left-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-left: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
:root.right-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-right: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}

.favicon {
  background: url("icon-bg.png") no-repeat bottom;
  background-size: 100%;
  padding: 0 3px 3px;
  position: relative;
  left: -3px;
}

.tab .label,
.tab .counter {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tab .label {
  margin-left: 0.25em;
}

.closebox {
  background: none transparent;
  border: 0 none;
  padding: 5px 3px 7px;
}


/* pinned tabs */

.tab.faviconized {
  border: 1px solid #666666;
  border-radius: 4px;
  margin: 1px 0 0 1px;
  padding: 2px 4px 2px 3px;
}

.tab.faviconized.unread .favicon::before,
.tab.attention .favicon::before {
  left: calc(var(--attention-marker-x-offset) + 3px);
}


/* tab bar */

:root,
#background {
  background: #797979;
}

:root.left #background {
  border-right: 2px solid #444444;
}

:root.left:not(.overflow) #tabbar {
  background-image: url("shadow-active-l.png");
  background-repeat: repeat-y;
  background-position: top right;
}

:root.right #background {
  border-left: 2px solid #444444;
}

:root.right:not(.overflow) #tabbar {
  background-image: url("shadow-active-r.png");
  background-repeat: repeat-y;
  background-position: top left;
}


/* anchor buttons on the new tab button */

:root.left:not(.contextual-identity-selectable)
  .after-tabs
  .newtab-action-selector-anchor,
:root.left
  .after-tabs .contextual-identities-selector-anchor {
  border-image: url("tab-r.png") 10 10 10 5 fill / 10px 0 10px 5px;
  padding-left: 5px;
}

:root.left:not(.contextual-identity-selectable)
  .after-tabs
  .newtab-action-selector-anchor:hover,
:root.left
  .after-tabs .contextual-identities-selector-anchor:hover {
  border-image: url("tab-active-r.png") 10 10 10 5 fill / 10px 0 10px 5px;
}

:root.left.contextual-identity-selectable
  .after-tabs
  .newtab-action-selector-anchor {
  padding-right: 15px;
}


:root.right:not(.contextual-identity-selectable)
  .after-tabs
  .newtab-action-selector-anchor,
:root.right
  .after-tabs .contextual-identities-selector-anchor {
  padding-right: 20px;
}

:root.right.contextual-identity-selectable
  .after-tabs
  .newtab-action-selector-anchor {
  border-image: url("tab-l.png") 10 5 10 10 fill / 10px 5px 10px 0;
  padding-right: 10px;
}

:root.right.contextual-identity-selectable
  .after-tabs
  .newtab-action-selector-anchor:hover {
  border-image: url("tab-active-l.png") 10 5 10 10 fill / 10px 5px 10px 0;
}


.mutiple-highlighted .tab:not(.highlighted) {
  opacity: 0.5;
}


/* hide regular active tab marker */
.highlighter::before {
  display: none !important;
}

