/* ---------------------------------------- Custom settings ---------------------------------------- */

/* -------------------- Compact mode -------------------- */

:root[uidensity="compact"][lwtheme-mozlightdark]:is(:not(:-moz-lwtheme), :-moz-lwtheme-darktext)
{
    /* ---------- Shadows (Light theme / Compact mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    10%;
    --secondary-shadow-saturation:  20%;
}

:root[uidensity="compact"][lwtheme-mozlightdark]:is([lwt-default-theme-in-dark-mode], :-moz-lwtheme-brighttext)
{
    /* ---------- Shadows (Dark theme / Compact mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    25%;
    --secondary-shadow-saturation:  50%;
}

:root[uidensity="compact"]
{
    /* ---------- Drag space (Compact mode) ---------- */
    --drag-space-windowed:          8px;
    --drag-space-maximized:         0px;
    --drag-space-menubar-titlebar:  8px;
}

:root[uidensity="compact"]
{
    /* ---------- Context menus (Compact mode) ---------- */
    --browser-context-menu-margin-padding:  4px;
    --win10-context-menu-margin-padding:    2px;
}

/* -------------------- Normal mode -------------------- */

:root[lwtheme-mozlightdark]:is(:not(:-moz-lwtheme), :-moz-lwtheme-darktext)
{
    /* ---------- Shadows (Light theme / Normal mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    10%;
    --secondary-shadow-saturation:  20%;
}

:root[lwtheme-mozlightdark]:is([lwt-default-theme-in-dark-mode], :-moz-lwtheme-brighttext)
{
    /* ---------- Shadows (Dark theme / Normal mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    25%;
    --secondary-shadow-saturation:  50%;
}

:root
{
    /* ---------- Drag space (Normal mode) ---------- */
    --drag-space-windowed:          8px;
    --drag-space-maximized:         8px;
    --drag-space-menubar-titlebar:  8px;
}

:root
{
    /* ---------- Context menus (Normal mode) ---------- */
    --browser-context-menu-margin-padding:  6px;
    --win10-context-menu-margin-padding:    3px;
}

/* -------------------- Touch mode -------------------- */

:root[uidensity="touch"][lwtheme-mozlightdark]:is(:not(:-moz-lwtheme), :-moz-lwtheme-darktext)
{
    /* ---------- Shadows (Light theme / Touch mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    10%;
    --secondary-shadow-saturation:  20%;
}

:root[uidensity="touch"][lwtheme-mozlightdark]:is([lwt-default-theme-in-dark-mode], :-moz-lwtheme-brighttext)
{
    /* ---------- Shadows (Dark theme / Touch mode) ---------- */
    --primary-shadow-color:         black;
    --secondary-shadow-color:       black;
    --primary-shadow-blur:          2px;     /* Even values only */
    --secondary-shadow-blur:        8px;     /* Even values only */
    --primary-shadow-saturation:    25%;
    --secondary-shadow-saturation:  50%;
}

:root[uidensity="touch"]
{
    /* ---------- Drag space (Touch mode) ---------- */
    --drag-space-windowed:          8px;
    --drag-space-maximized:         8px;
    --drag-space-menubar-titlebar:  8px;
}

:root[uidensity="touch"]
{
    /* ---------- Context menus (Touch mode) ---------- */
    --browser-context-menu-margin-padding:  8px;
    --win10-context-menu-margin-padding:    4px;
}

/* -------------------- Alpenglow / Repository -------------------- */

:root:not([lwtheme-mozlightdark])
{
    /* ---------- Selected tab indicator ---------- */
    --tab-indicator-color: var(--toolbarbutton-icon-fill);  /* var(--toolbarbutton-icon-fill) */
    --tab-indicator-saturation: 100%;
}

/* ------------------------------------------------------------------------------------------------- */




/* ---------------------------------------- Shadows ---------------------------------------- */

:root[lwtheme-mozlightdark]
{
    --primary-shadow: color-mix(in srgb, var(--primary-shadow-color) var(--primary-shadow-saturation), transparent);
    --secondary-shadow: color-mix(in srgb, var(--secondary-shadow-color) var(--secondary-shadow-saturation), transparent);
}

:root[lwtheme-mozlightdark]
{
    --outer-shadows: 0 0 var(--primary-shadow-blur) 0 var(--primary-shadow),
                     0 0 var(--secondary-shadow-blur) 0 var(--secondary-shadow);
    --inner-shadows: inset 0 calc(-1 * var(--primary-shadow-blur)) var(--primary-shadow-blur) calc(-1 * var(--primary-shadow-blur)) var(--primary-shadow),
                     inset 0 calc(-1 * var(--secondary-shadow-blur)) var(--secondary-shadow-blur) calc(-1 * var(--secondary-shadow-blur)) var(--secondary-shadow);
    --special-outer-shadows: drop-shadow(0 0 calc(var(--primary-shadow-blur) / 2) var(--primary-shadow))
                             drop-shadow(0 0 calc(var(--secondary-shadow-blur) / 2) var(--secondary-shadow));
}

/* ---------------------------------------- Unneeded styles ---------------------------------------- */

:root
{
    --tab-selected-bgcolor: unset !important;

    --lwt-selected-tab-background-color: unset !important;

    --tabs-border-color: unset !important;
}

/* ---------------------------------------- Density ---------------------------------------- */

:root[uidensity="compact"]
{
    --tab-min-height: 30px !important;
}

:root[uidensity="touch"]
{
    --tab-min-height: 42px !important;
}

:root[sizemode="normal"]
{
    --tabbar-head: var(--drag-space-windowed);
}

:root[sizemode="maximized"]
{
    --tabbar-head: var(--drag-space-maximized);
}

:root:not([tabsintitlebar]),
#toolbar-menubar:not([autohide][inactive]) + #TabsToolbar
{
    --tabbar-head: var(--drag-space-menubar-titlebar);
}

/* ---------------------------------------- Alpenglow / Repository ---------------------------------------- */

:root:not([lwtheme-mozlightdark])
{
    --middle-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,2 C 0,2 100,2 100,2'/></svg>");
}

:root:not([lwtheme-mozlightdark])
{
    --tab-indicator: color-mix(in srgb, var(--tab-indicator-color) var(--tab-indicator-saturation), transparent);
}

:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[visuallyselected] .tab-background::before,
:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[visuallyselected] .tab-background::after
{
    stroke: var(--tab-indicator);
}

:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[visuallyselected] .tab-background
{
    background-color: var(--toolbar-bgcolor) !important;
    background-image: var(--middle-svg) !important;
    stroke: var(--tab-indicator);
    -moz-context-properties: stroke;
}

/* ---------------------------------------- Context menus (Not os related) ---------------------------------------- */

:root
{
    --arrowpanel-menuitem-margin: 0 var(--browser-context-menu-margin-padding) !important;
    --arrowpanel-menuitem-padding-block: var(--browser-context-menu-margin-padding) !important;
    --arrowpanel-menuitem-padding-inline: var(--browser-context-menu-margin-padding) !important;
    --panel-separator-margin-vertical: var(--browser-context-menu-margin-padding) !important;
    --panel-separator-margin-horizontal: var(--browser-context-menu-margin-padding) !important;
    --panel-subview-body-padding: var(--browser-context-menu-margin-padding) 0 !important;
}

/* ---------------------------------------- Context menus (Os related) ---------------------------------------- */

@media (-moz-os-version: windows-win10)
{
    @media (-moz-windows-non-native-menus)
    {
        menupopup
        {
            --panel-padding: var(--win10-context-menu-margin-padding) 0 !important;
        }

        menupopup > menuitem,
        menupopup > menu
        {
            padding-block: var(--win10-context-menu-margin-padding) !important;
        }
    }
}

/* ---------------------------------------- Rounded corners (SVG) ---------------------------------------- */

:root
{
    --left-side-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='context-fill' d='m 0,100 c 16.666667,0 33.334333,0 41.667167,-16.666167 C 50,66.667667 50,33.334333 58.333833,16.667167 66.667667,0 83.333333,0 100,0 c 0,0 0,100 0,100 0,0 -100,0 -100,0 z'/><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,98 C 16.666667,98 33.334333,98 41.667167,82.0005 50,66.001 50,34.001 58.333833,18.0005 66.667667,2 83.333333,2 100,2'/></svg>");
    --right-side-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='context-fill' d='M 100,100 C 83.333333,100 66.667667,100 58.333833,83.333833 50,66.667667 50,33.334333 41.667167,16.667167 33.334333,0 16.666667,0 0,0 c 0,0 0,100 0,100 0,0 100,0 100,0 z'/><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,2 C 16.666667,2 33.334333,2 41.667167,18.0005 50,34.001 50,66.001 58.333833,82.0005 66.667667,98 83.333333,98 100,98'/></svg>");
}

.tab-background::before,
.tab-background::after
{
    content: "";
    position: absolute;
    width: var(--tab-min-height);
    height: var(--tab-min-height);
    bottom: 0%;
    fill: transparent;
    z-index: -1;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-context-properties: fill, stroke;
}

.tab-background::before
{
    right: 100%;
    background-image: var(--left-side-svg);
}

.tab-background::after
{
    left: 100%;
    background-image: var(--right-side-svg);
}

.tabbrowser-tab[visuallyselected] .tab-background::before,
.tabbrowser-tab[visuallyselected] .tab-background::after
{
    fill: var(--toolbar-bgcolor) !important;
}

.tabbrowser-tab:hover .tab-background::before,
.tabbrowser-tab:hover .tab-background::after
{
    fill: var(--toolbarbutton-hover-background);
}

.tabbrowser-tab[multiselected] .tab-background::before,
.tabbrowser-tab[multiselected] .tab-background::after
{
    fill: var(--toolbarbutton-active-background);
}

/* ---------------------------------------- Titlebar ---------------------------------------- */

:root[lwtheme-mozlightdark] #titlebar
{
    --toolbarbutton-icon-fill: currentColor;

    --toolbarbutton-hover-background: color-mix(in srgb, currentColor 10%, transparent) !important;

    --toolbarbutton-active-background: color-mix(in srgb, currentColor 20%, transparent) !important;
}

/* ---------------------------------------- Tabs ---------------------------------------- */

.tabbrowser-tab
{
    margin-top: var(--tabbar-head) !important;
    padding-inline: unset !important;
    color: unset !important;
    --tab-label-mask-size: 2em !important;
}

.tabbrowser-tab[visuallyselected] .tab-stack
{
    color: var(--lwt-tab-text, var(--toolbar-color)) !important;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab:is([selected],:hover,[multiselected]):not([pinned]) .tab-stack
{
    margin-inline: calc(var(--tab-min-height) / 2) !important;
}

.tabbrowser-tab[selected] .tab-background
{
    filter: var(--special-outer-shadows);
}

.tab-background
{
    position: relative !important;
    margin: 0 calc(var(--tab-min-height) / 2) !important;
    border: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    opacity: unset !important;
}

.tabbrowser-tab:hover:not([selected],[multiselected]) .tab-background
{
    background: var(--toolbarbutton-hover-background) !important;
}

.tabbrowser-tab[multiselected]:not([selected]) .tab-background
{
    background: var(--toolbarbutton-active-background) !important;
}

.tab-context-line
{
    margin: calc(var(--tab-min-height) - 2px) 0 0 0 !important;
}

:root[uidensity="compact"] .tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 6px) !important;
    margin-inline: -5px !important;
}

.tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 8px) !important;
    margin-inline: -6px !important;
}

:root[uidensity="touch"] .tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 10px) !important;
    margin-inline: -7px !important;
}

/* -------------------- Tab icon image -------------------- */

.tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture], [busy])
{
    display: revert !important;
}

.tabbrowser-tab:is([image],[pinned]):not([selected]) .tab-content[attention],
.tabbrowser-tab:not([selected]) .tab-content[pinned][titlechanged]
{
    background-position: center top !important;
}

.tab-content[pinned]
{
    padding-inline: calc(var(--tab-min-height) / 3) !important;
}

.tab-loading-burst
{
    display: none !important;
}

.tab-close-button
{
    width: 24px !important;
    padding: 7px !important;
    border-radius: 50% !important;
}

/* ---------- Media icons on tabs ---------- */

:root
{
    --tab-media-icon-overlay-background: var(--toolbar-bgcolor);
    --tab-media-icon-overlay-color: var(--lwt-tab-text, var(--toolbar-color));
    --tab-media-icon-overlay-hover: color-mix(in srgb, currentColor 10%, var(--toolbar-bgcolor));
    --tab-media-icon-overlay-active: color-mix(in srgb, currentColor 20%, var(--toolbar-bgcolor));
    --tab-media-icon-overlay-shadows: var(--outer-shadows);
}

.tab-icon-overlay:is([pinned],[sharing]):not([crashed]):hover,
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover
{
    background-color: var(--tab-media-icon-overlay-hover) !important;
}

.tab-icon-overlay:is([pinned],[sharing]):not([crashed]):active,
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):active
{
    background-color: var(--tab-media-icon-overlay-active) !important;
}

.tabbrowser-tab:not([selected]) .tab-icon-overlay:is([pinned],[sharing]):not([crashed]),
.tabbrowser-tab:not([selected]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
{
    box-shadow: var(--tab-media-icon-overlay-shadows);
}

/* ----- Pinned tabs ----- */

.tab-icon-overlay:is([pinned],[sharing]):not([crashed])
{
    top: -6px !important;
    stroke: unset !important;
    background-color: var(--tab-media-icon-overlay-background) !important;
    fill: currentColor !important;
    color: var(--tab-media-icon-overlay-color) !important;
    fill-opacity: 1 !important;
}

/* ----- Regular tabs (All densities) ----- */

:root[uidensity=compact] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay),
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay),
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay)
{
    opacity: 1 !important;
}

.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
{
    background-color: var(--tab-media-icon-overlay-background) !important;
    fill: currentColor !important;
    color: var(--tab-media-icon-overlay-color) !important;
    border-radius: 50% !important;
    fill-opacity: 1 !important;
    bottom: 6px;
    left: 6px;
}

.tabbrowser-tab:not([pinned]) :is(.tab-throbber, .tab-icon-pending, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-overlay)
{
    margin-inline-end: 6px !important;
}

/* ----- Regular tabs (Normal / Touch) ----- */

:root:not([uidensity=compact]) .tab-secondary-label
{
    margin-block: 4px -4px !important;
    -moz-box-ordinal-group: 0;
}

/* ---------------------------------------- Tabbar ---------------------------------------- */

#TabsToolbar
{
    --toolbarbutton-inner-padding: unset !important;
    --attention-icon-color: currentColor !important;
    position: relative;
    clip-path: fill-box;
}

#TabsToolbar::before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    bottom: 0%;
    z-index: 2;
    box-shadow: var(--inner-shadows);
    background-repeat: no-repeat;
    pointer-events: none;
}

#TabsToolbar .toolbarbutton-1
{
    margin-top: var(--tabbar-head) !important;
}

#TabsToolbar #search-container
{
    margin-top: var(--tabbar-head) !important;
    padding-block: unset !important;
}

#TabsToolbar #personal-bookmarks
{
    margin-top: var(--tabbar-head) !important;
}

.accessibility-indicator,
.private-browsing-indicator
{
    margin-top: var(--tabbar-head) !important;
}

.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"]
{
    display: none !important;
}

/* ---------------------------------------- Indents ---------------------------------------- */

/* ---------- Tabs ---------- */

#tabbrowser-tabs[haspinnedtabs]:not([overflow]) .tabbrowser-tab[first-visible-tab],
#tabbrowser-tabs[positionpinnedtabs],
.tabbrowser-tab[first-visible-unpinned-tab]
{
    margin-left: calc(var(--tab-min-height) / 2) !important;
}

.tabbrowser-tab[last-visible-tab]
{
    margin-right: calc(var(--tab-min-height) / 2) !important;
}

/* ---------- Tab bar buttons ---------- */

#TabsToolbar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
#TabsToolbar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem)
{
    margin-left: calc(var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)) !important;
}

#TabsToolbar-customization-target > :is(toolbarbutton, toolbaritem):last-child,
#TabsToolbar-customization-target > toolbarpaletteitem:last-child > :is(toolbarbutton, toolbaritem),
#tabs-newtab-button
{
    margin-right: calc(var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)) !important;
}

/* ---------------------------------------- Shadow DOM ---------------------------------------- */

#tabbrowser-tabs[overflow]
{
    --my-margin-top: var(--tabbar-head) !important;
    --toolbarbutton-inner-padding: 0px !important;
}

#scrollbutton-up,
#scrollbutton-down,
spacer[part="overflow-start-indicator"],
spacer[part="overflow-end-indicator"]
{
    margin-top: var(--my-margin-top) !important;
}

/* ---------------------------------------- Separators ---------------------------------------- */

.tabbrowser-tab:not([pinned])::before,
.tabbrowser-tab[last-visible-tab]:not([pinned])::after
{
    content: "";
    display: inherit;
    position: absolute;
    width: 1px;
    background-color: color-mix(in srgb, currentColor 50%, transparent);
    margin-block: calc(var(--tab-min-height) / 3 - 3px);
}

#tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:is(
        [selected],
        :hover,
        :hover:not([pinned]) + .tabbrowser-tab,
        [selected]:not([pinned]) + .tabbrowser-tab:not([selected]),
        [multiselected])::before,
#tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:is(
        [selected],
        [last-visible-tab]:not([pinned]):hover,
        [multiselected])::after
{
    background-color: transparent;
}

.tabbrowser-tab::after
{
    margin-left: -1px;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab]::before,
#tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]::after
{
    background-color: transparent;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab:active::before
{
    background-color: transparent;
    transition-delay: 0.25s;
}

@media (min-resolution: 1.25dppx)
{
    .tabbrowser-tab::before,
    .tabbrowser-tab::after
    {
        width: 0.8px !important;
    }
}

@media (min-resolution: 1.5dppx)
{
    .tabbrowser-tab::before,
    .tabbrowser-tab::after
    {
        width: 0.66px !important;
    }
}

/* ---------------------------------------- Linux ---------------------------------------- */

@media (-moz-gtk-csd-available)
{
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::before,
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::after
    {
        fill: color-mix(in srgb, var(--toolbar-bgcolor), white 15%) !important;
    }

    /* ---------- Tab media icons ---------- */
    
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:is([pinned],[sharing]):not([crashed]),
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
    {
        background-color: color-mix(in srgb, var(--tab-media-icon-overlay-background), white 15%) !important;
    }

    @media (prefers-contrast)
    {
        :root:not(:-moz-lwtheme) .tab-background
        {
            outline: unset !important;
        }
    }
}

/* ---------------------------------------- Windows 10 / Windows 8 / Windows 7 ---------------------------------------- */

@media (-moz-os-version: windows-win10),
       (-moz-os-version: windows-win8),
       (-moz-os-version: windows-win7)
{
    @media (prefers-contrast)
    {
        :root:not(:-moz-lwtheme) .tab-background
        {
            outline: unset !important;
        }

        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::before,
        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::after
        {
            fill: color-mix(in srgb, var(--toolbar-bgcolor), white 15%) !important;
        }

        /* ---------- Tab media icons ---------- */
    
        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:is([pinned],[sharing]):not([crashed]),
        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
        {
            background-color: color-mix(in srgb, var(--tab-media-icon-overlay-background), white 15%) !important;
        }
    }
}

/* ---------------------------------------- Windows 10 ---------------------------------------- */

@media (-moz-os-version: windows-win10)
{
    @media not (prefers-contrast)
    {
        @media (-moz-windows-accent-color-in-titlebar)
        {
            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #toolbar-menubar,
            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #TabsToolbar
            {
                background: -moz-accent-color !important;
            }

            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #titlebar
            {
                color: -moz-accent-color-foreground !important;
            }
        }

        .titlebar-buttonbox-container
        {
            -moz-box-align: start !important;
        }

        .titlebar-button:not(.titlebar-close):hover
        {
            background-color: var(--toolbarbutton-hover-background) !important;
        }

        .titlebar-button:not(.titlebar-close):hover:active
        {
            background-color: var(--toolbarbutton-active-background) !important;
        }
    }
}

/* ---------------------------------------- Windows 7 ---------------------------------------- */

@media (-moz-os-version: windows-win7)
{
    @media (-moz-windows-compositor)
    {
        :root:not(:-moz-lwtheme) #toolbar-menubar,
        :root:not(:-moz-lwtheme) #TabsToolbar
        {
            background: color-mix(in srgb, white 50%, transparent) !important;
        }

        :root:not(:-moz-lwtheme) #toolbar-menubar[autohide][inactive] + #TabsToolbar
        {
            background: linear-gradient(transparent, color-mix(in srgb, white 75%, transparent)) !important;
        }

        :root[lwtheme-mozlightdark]:is(:-moz-lwtheme-darktext,:-moz-lwtheme-brighttext) #TabsToolbar
        {
            background: unset !important;
        }

        :root:-moz-lwtheme #TabsToolbar
        {
            color: unset !important;
        }
    }

    @media (-moz-windows-compositor: 0)
    {
        :root[lwtheme-mozlightdark] #TabsToolbar
        {
            background: unset !important;
        }
    }
}

/* Tab: selected colors */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { background: linear-gradient(to bottom,#AAFFAA,#FFAAFF) !important; }

/* Tab: hovered colors */
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content { background: linear-gradient(to bottom,#808080,#FFFFFF) !important; }