/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* Tab background color (pinned & unpinned) */
.tab-background { background: transparent !important }
.tab-content { color: #fff !important }
.tabbrowser-tab[pending]:not(:hover) .tab-content { opacity: 0.5 }

/* Hover tab background color (pinned & unpinned) */
.tabbrowser-tab:hover .tab-background { background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.3)) !important }

/* Selected tab background color (pinned & unpinned) */
.tabbrowser-tab .tab-background[selected="true"],
.tab-background[multiselected] { background: #38688f !important }
.tabbrowser-tab[selected="true"]::after { display: none !important }

/* Active (loaded) not selected tab (not discarded) */
.tabbrowser-tab:not([pending]):not([selected]):not([busy]) .tab-content {
opacity: 1 !important;
background: #151515 !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: HIDE STUFF */

/* Hide top line on tabs */
.tab-line { display: none !important }

/* Hide tab container underline */
.tab-bottom-line { display: none !important }

/* Hide tab-throbber */
.tab-throbber { display: none !important }
.tabbrowser-tab[progress="true"] .tab-icon-image,
.tab-icon-image {
visibility: visible !important;
display: block !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: Separators */

#tabbrowser-tabs .tab-background-inner {
display: -moz-box !important;
border-right: 1px solid #505050 }
.tabbrowser-tab:-moz-any([selected],[beforeselected-visible]) .tab-background-inner { border-color: #38688f !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: FAVICONS */

/* Favicon default */
.tab-icon-image:not([src]) { list-style-image: url(../Icons/FaviconDefault.svg) !important }
.tabbrowser-tab[selected="true"] .tab-icon-image:not([src]) { filter: brightness(150%) !important }

/* Partial solution to tab-black-favicons under dark-theme */
tab .tab-icon, .tab-icon-image { filter: invert(40%) saturate(220%) brightness(130%) contrast(150%) !important }

/* Correction github favicon under dark theme */
.tabbrowser-tab[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4FAAAoAAAAEAAAACAAAAABACAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABERE3YTExPFDg4OEgAAAAAAAAAADw8PERERFLETExNpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQUFJYTExT8ExMU7QAAABkAAAAAAAAAAAAAABgVFRf/FRUX/xERE4UAAAAAAAAAAAAAAAAAAAAAAAAAABEREsETExTuERERHhAQEBAAAAAAAAAAAAAAAAAAAAANExMU9RUVF/8VFRf/EREUrwAAAAAAAAAAAAAAABQUFJkVFRf/BgYRLA4ODlwPDw/BDw8PIgAAAAAAAAAADw8PNBAQEP8VFRf/FRUX/xUVF/8UFBSPAAAAABAQEDAPDQ//AAAA"] .tab-icon-image { filter: invert(1.0) contrast(200%) brightness(200%) !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: CLOSE BUTTON */
/* CREDITS: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tab_close_button_always_on_hover.css
Always show tab close button on hover and never otherwise. */
.tabbrowser-tab .tab-close-button {
display: none }
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display:-moz-box !important }

/* Tab close button unselected tab */
.tab-content:not([selected]):hover .tab-close-button {
border-radius: 50px;
background-color: #999 !important }

/* Tab close button selected tab */
.tab-close-button {
border-radius: 50px;
background-color: #303030 !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: ICON SOUND */

.tab-icon-sound {
fill: #12BC00 !important;
opacity: 1 !important;
background-color: transparent !important;
margin-top: -18px !important }

.tab-icon-sound[muted] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important;
fill: red !important;
opacity: 1 !important;
filter: brightness(350%) !important;
background-color: transparent !important;
margin-top: -18px !important }

.tab-icon-overlay[pinned] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important;
fill: #12BC00 !important;
opacity: 1 !important;
background-color: transparent !important;
margin-top: -18px !important }

.tab-icon-overlay[muted][pinned] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important;
fill: red !important;
opacity: 1 !important;
filter: brightness(350%) !important;
background-color: transparent !important;
margin-top: -18px !important }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: LOADING PROGRESS LINE TAB INDICATOR */
/* CREDITS: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/ */

@keyframes loadingLine { from{background-size: 0 2px}to{background-size: 20% 2px} }

.tabbrowser-tab .tab-loading-burst {
background-image: linear-gradient(100deg, red, red) !important;
background-repeat: no-repeat !important;
transition-property: background-size, opacity;
transition-timing-function: sine, linear;
transition-delay: 0s, 0.4s;
transition-duration: 0.4s, 0.4s;
background-size: 100% 2px;
background-position-y: bottom;
margin-right: 2px /* clip the right side */;
opacity: 0 }

.tabbrowser-tab[busy] .tab-loading-burst,
.tabbrowser-tab[bursting] .tab-loading-burst {
opacity: 1;
transition-delay: 0s, 0s }

.tabbrowser-tab[busy]:not([progress]) .tab-loading-burst {
animation: loadingLine 0.4s ease-out backwards !important;
background-size: 20% 2px }

.tabbrowser-tab[progress] .tab-loading-burst {
background-size: 100% 2px !important;
transition-duration: 2s, 2s }

.tabbrowser-tab[bursting] .tab-loading-burst {
background-size: 100% 2px;
transition-duration: 0.1s, 0.3s }

/* Resizing loading-progress-line under tab */
.tab-loading-burst { margin: 0 0 0 0 }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* TABS: REDUCE "WHITE FLASHING" */
.browserContainer,
browser.display.background_color,
browser[type="content-primary"],
browser[type=content-primary],
browser[type=content] > html,
#browser vbox#appcontent tabbrowser,
#content,
#main-window,
/* CREDITS: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/blank_page_background.css */
#tabbrowser-tabpanels,
tabbrowser tabpanels,
tabpanels,
#tab-view-deck #browser tabbrowser#content { background-color: #202020 !important }