@layer LowPriority, HighPriority; 

@import "special/windows.css" layer(HighPriority) /* supports() */ (-moz-platform: windows);
@import "special/linux.css"   layer(HighPriority) /* supports() */ (-moz-platform: linux);
@import "special/mac.css"     layer(HighPriority) /* supports() */ (-moz-platform: macos);
@import "Lepton_Icons/icons/Lepton_Icons.css" /* layer() supports() */ (-moz-bool-pref: "userChrome.Menu.Icons.LeptonIcons.Enabled");
@import "third_party_custom_styles.css"       /* layer() supports() */ (-moz-bool-pref: "userChrome.Style.ThirdParty.Enabled");

@layer LowPriority
{

@media (-moz-platform: windows),
       (-moz-platform: linux),
       (-moz-platform: macos)
{

/* ---------------------------------------- Tabs (SVG) ---------------------------------------- */

:root
{
    @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled")
    {
        --left-svg:   url("special/tabs/option_1/left_corners.svg");
        --center-svg: url("special/tabs/option_1/center.svg");
        --right-svg:  url("special/tabs/option_1/right_corners.svg");
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled")
    {
        --left-svg:   url("special/tabs/option_2/left_corners.svg");
        --center-svg: url("special/tabs/option_2/center.svg");
        --right-svg:  url("special/tabs/option_2/right_corners.svg");
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled")
    {
        --left-svg:   url("special/tabs/option_3/left_corners.svg");
        --center-svg: url("special/tabs/option_3/center.svg");
        --right-svg:  url("special/tabs/option_3/right_corners.svg");
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled")
    {
        --left-svg:   url("special/tabs/option_4/left_corners.svg");
        --center-svg: url("special/tabs/option_4/center.svg");
        --right-svg:  url("special/tabs/option_4/right_corners.svg");
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")
    {
        --left-svg:   url("special/tabs/option_5/left_corners.svg");
        --center-svg: url("special/tabs/option_5/center.svg");
        --right-svg:  url("special/tabs/option_5/right_corners.svg");
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")
    {
        --left-svg:   url("special/tabs/option_1/left_corners.svg");
        --center-svg: url("special/tabs/option_1/center.svg");
        --right-svg:  url("special/tabs/option_1/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")
    {
        --left-svg:   url("special/tabs/option_6/left_corners.svg");
        --center-svg: url("special/tabs/option_6/center.svg");
        --right-svg:  url("special/tabs/option_6/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")
    {
        --left-svg:   url("special/tabs/option_7/left_corners.svg");
        --center-svg: url("special/tabs/option_7/center.svg");
        --right-svg:  url("special/tabs/option_7/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")
    {
        --left-svg:   url("special/tabs/option_8/left_corners.svg");
        --center-svg: url("special/tabs/option_8/center.svg");
        --right-svg:  url("special/tabs/option_8/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2 - 6px);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled")
    {
        --left-svg:   url("special/tabs/option_9/left_corners.svg");
        --center-svg: url("special/tabs/option_9/center.svg");
        --right-svg:  url("special/tabs/option_9/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled")
    {
        --left-svg:   url("special/tabs/option_10/left_corners.svg");
        --center-svg: url("special/tabs/option_10/center.svg");
        --right-svg:  url("special/tabs/option_10/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled")
    {
        --left-svg:   url("special/tabs/option_11/left_corners.svg");
        --center-svg: url("special/tabs/option_11/center.svg");
        --right-svg:  url("special/tabs/option_11/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
        --outer-drop-border-offset: 1px;
    }

    @media (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled")
    {
        --left-svg:   url("special/tabs/option_12/left_corners.svg");
        --center-svg: url("special/tabs/option_12/center.svg");
        --right-svg:  url("special/tabs/option_12/right_corners.svg");
        
        --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
        --outer-drop-border-offset: 1px;
    }

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

    @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")
    {
        --tab-first-last-inline-margin: calc(var(--tab-block-margin) / 2);
        --tab-overflow-clip-margin: var(--tab-first-last-inline-margin);
        --tab-inset-clip-path: 0px calc(-1 * var(--tab-first-last-inline-margin));
        --tab-scroll-animation-inline-margin: calc(-1 * var(--tab-first-last-inline-margin));
        --tab-scroll-animation-inline-padding: calc(var(--tab-first-last-inline-margin) * 2);
        --tab-bg-block-margin: var(--tab-block-margin);
        --tab-inline-padding: var(--tab-first-last-inline-margin);
        --tab-separator-offset: var(--tab-first-last-inline-margin);
    }

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

    @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled")
    {
        --tab-overflow-clip-margin: var(--tab-first-last-inline-margin);
        --tab-inset-clip-path: -4px calc(-1 * var(--tab-first-last-inline-margin)) 0px;
        --tab-scroll-animation-inline-margin: calc(-1 * var(--tab-first-last-inline-margin));
        --tab-scroll-animation-inline-padding: var(--tab-first-last-inline-margin);
        --tab-bg-block-margin: 0px;
        --tab-inline-padding: 0px;
        --tab-separator-offset: 0px;
    }
}

/* ---------------------------------------- Tab Bar Shadows ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled")      or
       (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled")   or
       (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled")     or
       (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
{
    @media (prefers-color-scheme: light)
    {
        :root
        {
            --shadow-blur: 4px;
            --shadow-color: rgb(0, 0, 0);

            --outer-box-shadow: 0
                                0
                                var(--shadow-blur)
                                color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent);

            --inner-box-shadow: inset
                                0
                                calc(-1 * var(--shadow-blur))
                                var(--shadow-blur)
                                calc(-1 * var(--shadow-blur))
                                color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent);

            --outer-drop-shadow: drop-shadow(
                                 0
                                 0
                                 calc(var(--shadow-blur) / 2)
                                 color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent));

            /* ---------- Saturation ---------- */

            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled")
            {
                --shadow-saturation: 10%;
            }

            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled")
            {
                --shadow-saturation: 25%;
            }

            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled")
            {
                --shadow-saturation: 50%;
            }

            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
            {
                --shadow-saturation: 100%;
            }
        }
    }
}

@media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled")      or
       (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled")   or
       (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled")     or
       (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
{
    @media (prefers-color-scheme: dark)
    {
        :root
        {
            --shadow-blur: 4px;
            --shadow-color: rgb(0, 0, 0);

            --outer-box-shadow: 0
                                0
                                var(--shadow-blur)
                                color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent);

            --inner-box-shadow: inset
                                0
                                calc(-1 * var(--shadow-blur))
                                var(--shadow-blur)
                                calc(-1 * var(--shadow-blur))
                                color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent);

            --outer-drop-shadow: drop-shadow(
                                 0
                                 0
                                 calc(var(--shadow-blur) / 2)
                                 color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent));

            /* ---------- Saturation ---------- */

            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled")
            {
                --shadow-saturation: 25%;
            }

            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled")
            {
                --shadow-saturation: 50%;
            }

            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled")
            {
                --shadow-saturation: 75%;
            }

            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
            {
                --shadow-saturation: 100%;
            }
        }
    }
}

/* ---------------------------------------- Tab Bar Borders ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Borders.Enabled")
{
    @media (prefers-color-scheme: light)
    {
        :root
        {
            --my-border-width: 1px;
            --my-border-color: var(--chrome-content-separator-color);

            --outer-box-border: 0 0 0 var(--my-border-width) var(--my-border-color);

            --inner-box-border: inset 0 calc(-1 * var(--my-border-width)) 0 var(--my-border-color);

            --outer-drop-border: drop-shadow(
                                 0
                                 calc(-1 * var(--my-border-width))
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 var(--my-border-width)
                                 var(--outer-drop-border-offset, 0)
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 0
                                 var(--my-border-width)
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 calc(-1 * var(--my-border-width))
                                 var(--outer-drop-border-offset, 0)
                                 0
                                 var(--my-border-color));
        }
    }
}

@media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Borders.Enabled")
{
    @media (prefers-color-scheme: dark)
    {
        :root
        {
            --my-border-width: 1px;
            --my-border-color: var(--chrome-content-separator-color);

            --outer-box-border: 0 0 0 var(--my-border-width) var(--my-border-color);

            --inner-box-border: inset 0 calc(-1 * var(--my-border-width)) 0 var(--my-border-color);

            --outer-drop-border: drop-shadow(
                                 0
                                 calc(-1 * var(--my-border-width))
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 var(--my-border-width)
                                 var(--outer-drop-border-offset, 0)
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 0
                                 var(--my-border-width)
                                 0
                                 var(--my-border-color))

                                 drop-shadow(
                                 calc(-1 * var(--my-border-width))
                                 var(--outer-drop-border-offset, 0)
                                 0
                                 var(--my-border-color));
        }
    }
}

/* ---------------------------------------- System Theme ---------------------------------------- */

@media not (prefers-contrast)
{
    :root:not([lwtheme])
    {
        .tabbrowser-tab[visuallyselected]
        {
            color: var(--toolbar-color) !important;

            .tab-background
            {
                background-color: var(--toolbar-bgcolor) !important;
            }
        }
    }
}

/* ---------------------------------------- Light Theme / Dark Theme ---------------------------------------- */

:root:is(
         [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"],
         [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"]
        )
{
    .tabbrowser-tab[visuallyselected]
    {
        color: var(--toolbar-color) !important;

        .tab-background
        {
            background-color: var(--toolbar-bgcolor) !important;
        }
    }
}

/* ---------------------------------------- Pinned Tabs Width ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.Tabs.Pinned.Width.LowOffset.Enabled")
{
    :root
    {
        --pinned-tabs-width-offset: 2px;
    }
}

@media (-moz-bool-pref: "userChrome.Tabs.Pinned.Width.HighOffset.Enabled")
{
    :root
    {
        --pinned-tabs-width-offset: 4px;
    }
}

/* ---------------------------------------- Firefox View ---------------------------------------- */

:where(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs
{
    border-inline-start: none !important;
    padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
    margin-inline-start: 0px !important;
}

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon
{
    background-color: var(--toolbarbutton-active-background) !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
}

#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon
{
    background-color: var(--toolbarbutton-hover-background) !important;
}

#TabsToolbar #firefox-view-button[attention]
{
    background-position: var(--tab-attention-indicator-position) !important;
}

/* ---------------------------------------- Main Window ---------------------------------------- */

:root
{
    --tab-shadow-max-size: 0px !important;
    --tab-attention-indicator-position: 50% calc(50% + 12px);
}

/* ---------------------------------------- Nav Bar ---------------------------------------- */

#nav-bar
{
    border: none !important;
}

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

:root[tabsintitlebar]
{
    #titlebar
    {
        will-change: auto !important;
        transition: none !important;
        opacity: 1 !important;
    }

    &:-moz-window-inactive .titlebar-color
    {
        color: color-mix(in srgb, currentColor 60%, transparent) !important;
        --toolbarbutton-icon-fill: currentColor !important;
    }
}

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

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

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

/* ---------------------------------------- Context Menu (Not System Related) ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.Menu.Size.Compact.Enabled") or
       (-moz-bool-pref: "userChrome.Menu.Size.Normal.Enabled")  or
       (-moz-bool-pref: "userChrome.Menu.Size.Touch.Enabled")
{
    :root
    {
        --arrowpanel-menuitem-margin-block:   0px !important;
        --arrowpanel-menuitem-margin-inline:  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-horizontal:  var(--browser-context-menu-margin-padding) !important;
        --panel-separator-margin-vertical:    var(--browser-context-menu-margin-padding) !important;
        --panel-subview-body-padding-block:   var(--browser-context-menu-margin-padding) !important;
        --panel-subview-body-padding-inline:  0px !important;

        @media (-moz-bool-pref: "userChrome.Menu.Size.Compact.Enabled")
        {
            --browser-context-menu-margin-padding: 4px;
        }

        @media (-moz-bool-pref: "userChrome.Menu.Size.Normal.Enabled")
        {
            --browser-context-menu-margin-padding: 6px;
        }

        @media (-moz-bool-pref: "userChrome.Menu.Size.Touch.Enabled")
        {
            --browser-context-menu-margin-padding: 8px;
        }
    }
}

/* -------------------- Extensions menu -------------------- */

#unified-extensions-panel
{
    --uei-icon-size: 24px !important;
}

#unified-extensions-panel .unified-extensions-item
{
    margin-block: 0px !important;
}

#unified-extensions-panel :is(
                              .unified-extensions-item-name,
                              .unified-extensions-item-message-deck > *
                             )
{
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* ---------------------------------------- Drag Space ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.DragSpace.Left.Disabled")
{
    .titlebar-spacer[type="pre-tabs"]
    {
        display: none !important;
    }
}

@media (-moz-bool-pref: "userChrome.DragSpace.Right.Disabled")
{
    .titlebar-spacer[type="post-tabs"]
    {
        display: none !important;
    }
}

@media (-moz-bool-pref: "userChrome.DragSpace.Top.Windowed.Enabled")
{
    :root[sizemode="normal"]
    {
        --drag-space: 8px;
    }
}

@media (-moz-bool-pref: "userChrome.DragSpace.Top.Maximized.Enabled")
{
    :root[sizemode="maximized"]
    {
        --drag-space: 8px;
    }
}

@media (-moz-bool-pref: "userChrome.DragSpace.Top.Fullscreen.Enabled")
{
    :root[sizemode="fullscreen"]
    {
        --drag-space: 8px;
    }
}

#TabsToolbar :is(.tabbrowser-tab, .toolbarbutton-1, separator, #personal-bookmarks, #search-container, .accessibility-indicator, .private-browsing-indicator, #private-browsing-indicator-with-label)
{
    margin-top: var(--drag-space, 0px) !important;
}

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

#tabbrowser-arrowscrollbox
{
    --margin-top: var(--drag-space, 0px) !important;
}

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

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

.tabbrowser-tab
{
    --tab-label-mask-size: 0px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    overflow-clip-margin: var(--tab-overflow-clip-margin) !important;
    clip-path: inset(var(--tab-inset-clip-path)) !important;
    padding-inline: var(--tab-inline-padding) !important;

    &[visuallyselected]
    {
        position: relative;
        z-index: 2 !important;
        filter: var(--outer-drop-border, drop-shadow(0 0 0 transparent))
                var(--outer-drop-shadow, drop-shadow(0 0 0 transparent));
    }

    &:not([visuallyselected])
    {
        color: inherit !important;

        &:hover .tab-background
        {
            background-color: var(--toolbarbutton-hover-background) !important;
        }

        &[multiselected] .tab-background
        {
            background-color: var(--toolbarbutton-active-background) !important;
        }
    }

    .tab-background
    {
        mask-image: var(--left-svg), var(--center-svg), var(--right-svg);
        mask-size: auto 100%, calc(100% - var(--tab-min-height) * 2) 100%, auto 100%;
        mask-position: left center, center center, right center;
        mask-repeat: no-repeat, no-repeat, no-repeat;
        box-shadow: none !important;
        outline: none !important;
        margin-block: var(--tab-bg-block-margin) !important;
        margin-inline: calc(-1 * (var(--tab-min-height) / 2)) !important;
        border-radius: 0px !important;
        pointer-events: none !important;
    }

    &[pinned] .tab-content
    {
        padding-inline: calc((var(--tab-min-height) - 16px) / 2 + var(--pinned-tabs-width-offset, 0px)) !important;
    }

    &:not([pinned]) .tab-content
    {
        padding-inline: 10px !important;
    }
}

.tab-drop-indicator
{
    opacity: 0 !important;
}

#tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected])
{
    z-index: auto !important;
}

.tabbrowser-tab[pending] .tab-icon-image
{
    opacity: 0.5 !important;
}

.tab-close-button
{
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    margin: 0px !important;
}

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

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

/* -------------------- Selected Tab Indicator -------------------- */

@media (-moz-bool-pref: "userChrome.Tabs.SelectedTabIndicator.Enabled")
{
    .tabbrowser-tab[visuallyselected][usercontextid] .tab-background
    {
        box-shadow: inset 0 -2px 0 var(--tab-loading-fill) !important;
    }

    .tabbrowser-tab[visuallyselected]:not([usercontextid]) .tab-background
    {
        box-shadow: inset 0 2px 0 var(--tab-loading-fill) !important;
    }
}

/* -------------------- Tab Counter -------------------- */

#tabbrowser-tabs
{
    counter-reset: TabCounter;
}

.tabbrowser-tab
{
    counter-increment: TabCounter;
}

#tabbrowser-tabs ~ #alltabs-button::after
{
    content: counter(TabCounter);
}

/* -------------------- Container Indicators -------------------- */

.tab-context-line
{
    margin: 0px !important;
}

/* -------------------- Tab Icon Indicators -------------------- */

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

/* -------------------- Media Icons -------------------- */

.tab-icon-overlay:not([crashed])
{
    stroke: transparent !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    color: inherit !important;
    fill: currentColor !important;
    fill-opacity: 1 !important;
    z-index: 1 !important;
}

.tab-icon-overlay:not([crashed]):hover
{
    background-color: var(--toolbarbutton-hover-background) !important;
}

.tab-icon-overlay:not([crashed]):hover:active
{
    background-color: var(--toolbarbutton-active-background) !important;
}

.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):not([crashed]) .tab-icon-overlay
{
    top: -8px !important;
    inset-inline-end: -8px !important;
}

.tab-icon-overlay[indicator-replaces-favicon],
.tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay)
{
    opacity: 1 !important;
}

.tabbrowser-tab:not([pinned]) .tab-icon-stack > *
{
    margin-inline-end: 10px !important;
}

.tabbrowser-tab[busy] .tab-icon-overlay
{
    display: none !important;
}

.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay)
{
    mask-image: url("special/Additional_Elements/Media.svg");
    mask-size: 16px 16px;
}

:root:-moz-locale-dir(rtl) .tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay)
{
    mask-image: url("special/Additional_Elements/Media_rtl.svg");
}

/* ---------- Picture-In-Picture ---------- */

.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before
{
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-size: 16px 16px;
    mask-position: center center;
    mask-repeat: no-repeat;
}

:root:-moz-locale-dir(rtl) .tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before
{
    transform: rotateY(180deg);
}

.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay)
{
    position: relative !important;
    padding: 2px !important;
    inset-inline-start: 8px !important;
    top: 8px !important;
    mask-image: none !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
{
    mask-image: url("special/Additional_Elements/PIP.svg");
}

.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
{
    mask-image: url("special/Additional_Elements/PIP_Sound.svg");
}

/* -------------------- Tab Text -------------------- */

.tab-label-container
{
    height: var(--tab-min-height) !important;
}

.tab-label
{
    width: 100% !important;
    height: 16px !important;
    line-height: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-block: 0px !important;
}

#tabbrowser-tabs[secondarytext-unsupported] .tab-label
{
    height: var(--tab-min-height) !important;
    line-height: var(--tab-min-height) !important;
}

.tab-secondary-label
{
    width: 100% !important;
    height: 16px !important;
    line-height: 16px !important;
    margin-block: 0px !important;
    order: -1 !important;
}

.tab-secondary-label > *
{
    width: 100% !important;
    height: 16px !important;
    line-height: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ---------------------------------------- Tab Bar ---------------------------------------- */

#TabsToolbar
{
    --toolbarbutton-inner-padding: inherit !important;
    position: relative !important;
}

#TabsToolbar::before
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    inset-inline-start: 0px;
    box-shadow: var(--inner-box-border, inset 0 0 0 transparent),
                var(--inner-box-shadow, inset 0 0 0 transparent);
    pointer-events: none;
    z-index: 2;
}

#TabsToolbar #search-container
{
    padding-block: 0 !important;
}

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

#TabsToolbar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
#TabsToolbar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem)
{
    margin-inline-start: 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)
{
    margin-inline-end: calc(var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)) !important;
}

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))
{
    margin-inline-start: 0px !important;
}

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])),
#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])),
#tabbrowser-tabs[overflow][haspinnedtabs]
{
    margin-inline-start: var(--tab-first-last-inline-margin) !important;
}

.tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden]))
{
    margin-inline-end: var(--tab-first-last-inline-margin) !important;
}

#tabs-newtab-button
{
    margin-inline-start: calc(-1 * var(--tab-first-last-inline-margin) / 2) !important;
}

.toolbarbutton-1:has(+ #tabbrowser-tabs:not([overflow])),
.toolbarbutton-1:has(+ #tabbrowser-tabs[overflow][haspinnedtabs])
{
    margin-inline-end: calc(-1 * var(--tab-first-last-inline-margin) / 2 + 1px) !important;
    z-index: 0 !important;
}

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

@media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Low.Enabled")    or
       (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Medium.Enabled")
{
    .tab-stack
    {
        margin-inline-end: 1px !important;
    }

    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::before,
    #tabbrowser-tabs[overflow][haspinnedtabs] .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) .tab-stack::before,
    .tab-stack::after
    {
        content: "";
        display: block;
        position: absolute;
        width: 1px;
        height: 50%;
        border-inline-end: 1px solid currentColor;
        top: 25%;
        opacity: var(--separators-color-saturation);
        box-sizing: border-box;
        pointer-events: none;
    }

    .tab-stack::before
    {
        inset-inline-end: 100%;
        transform: translateX(calc(-1 * var(--tab-separator-offset)));
    }

    :root:-moz-locale-dir(rtl) .tab-stack::before
    {
        transform: translateX(var(--tab-separator-offset));
    }

    .tab-stack::after
    {
        inset-inline-start: 100%;
        transform: translateX(var(--tab-separator-offset));
    }

    :root:-moz-locale-dir(rtl) .tab-stack::after
    {
        transform: translateX(calc(-1 * var(--tab-separator-offset)));
    }

    .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::before,
    .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after
    {
        opacity: 0 !important;
    }

    #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after,
    #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after,
    #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after
    {
        opacity: var(--separators-color-saturation) !important;
    }

    @media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Low.Enabled")
    {
        :root
        {
            --separators-color-saturation: 0.25;
        }
    }

    @media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Medium.Enabled")
    {
        :root
        {
            --separators-color-saturation: 0.5;
        }
    }
}

/* ---------------------------------------- Tab Scroll Animation ---------------------------------------- */
       
#tabbrowser-tabs[overflow] .tabbrowser-tab:not([pinned])
{
    box-sizing: content-box !important;
}

#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned])
{
    pointer-events: none !important;
    box-sizing: content-box !important;
    padding-inline: var(--tab-scroll-animation-inline-padding) !important;
    margin-inline: var(--tab-scroll-animation-inline-margin) !important;
    overflow-clip-margin: 0px !important;
}

#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) .tab-stack
{
    pointer-events: auto !important;
}

#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))
{
    margin-inline-start: 0px !important;
}

#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden]))
{
    margin-inline-end: 0px !important;
}

/* ---------------------------------------- Tabs On Bottom ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.Tabs.TabsOnBottom.Enabled")
{
    @media (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled")
    {
        :root
        {
            --outer-drop-border-offset: -1px;
        }
    }

    /* -------------------- Title Bar -------------------- */

    #titlebar
    {
        order: 2 !important;
    }

    #toolbar-menubar
    {
        --toolbarbutton-icon-fill: inherit !important;
        background-color: var(--toolbar-bgcolor) !important;
        color: var(--toolbar-color) !important;
        appearance: none !important;
    }

    #TabsToolbar::before
    {
        transform: rotateX(180deg);
    }

    /* -------------------- Nav Bar -------------------- */

    #nav-bar
    {
        order: 0 !important;
    }

    /* -------------------- Personal Bar -------------------- */

    #PersonalToolbar
    {
        order: 1 !important;
    }

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

    :root
    {
        --drag-space: 0px !important;
    }

    .tabbrowser-tab
    {
        --tab-inset-clip-path: 0px calc(-1 * var(--tab-first-last-inline-margin));
    }

    .tab-background
    {
        transform: rotateX(180deg);
    }
}

/* ---------------------------------------- One Line ---------------------------------------- */

@media (-moz-bool-pref: "userChrome.OneLine.TabBarFirst.Enabled") or
       (-moz-bool-pref: "userChrome.OneLine.NavBarFirst.Enabled")
{
    @media (-moz-bool-pref: "userChrome.OneLine.TabBarFirst.Enabled")
    {
        #navigator-toolbox
        {
            grid-template-columns: auto min-content !important;
        }

        #titlebar
        {
            grid-area: 1 / 1 / span 1 / span 1 !important;
        }
    }

    @media (-moz-bool-pref: "userChrome.OneLine.NavBarFirst.Enabled")
    {
        #navigator-toolbox
        {
            grid-template-columns: min-content auto !important;
        }

        #nav-bar
        {
            grid-area: 1 / 1 / span 1 / span 1 !important;
        }
    }

    :root
    {
        --drag-space: 0px !important;
    }

    #navigator-toolbox
    {
        display: grid !important;
        -moz-window-dragging: drag !important;
    }

    #TabsToolbar::before
    {
        display: none !important;
    }

    /* -------------------- Nav Bar -------------------- */

    #nav-bar
    {
        margin: var(--tab-block-margin) !important;
        border-radius: var(--tab-border-radius) !important;
        box-shadow: var(--outer-box-border, 0 0 0 transparent),
                    var(--outer-box-shadow, 0 0 0 transparent) !important;
    }

    #urlbar-container,
    #search-container
    {
        padding-block: 0px !important;
    }

    #urlbar-container
    {
        --urlbar-container-height: var(--tab-min-height) !important;
    }

    /* -------------------- Bookmarks Bar -------------------- */

    #PersonalToolbar
    {
        margin-inline: var(--tab-block-margin) !important;
        border-radius: var(--tab-border-radius) !important;
        box-shadow: var(--outer-box-border, 0 0 0 transparent),
                    var(--outer-box-shadow, 0 0 0 transparent) !important;
    }

    #PersonalToolbar[collapsed="false"]
    {
        margin-bottom: var(--tab-block-margin) !important;
    }

    /* -------------------- Bookmarks Bar / Notifications -------------------- */

    #navigator-toolbox > *:not(#titlebar, #nav-bar)
    {
        grid-column: 1 / span 2 !important;
    }

    /* -------------------- Customization -------------------- */

    #customization-panelWrapper
    {
        --panel-arrow-offset: 0px !important;
    }

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

    @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
           (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or
           (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled")
    {
        :root
        {
            --tab-min-height: 44px !important;

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

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

        #urlbar-container
        {
            --urlbar-container-height: calc(var(--tab-min-height) - var(--tab-block-margin) * 2) !important;
        }
    }
}

/* ---------------------------------------- Menu Icons ---------------------------------------- */

/* ---------- Regular Icons ---------- */

@media (-moz-bool-pref: "userChrome.Menu.Icons.Regular.Enabled")
{
    :root
    {
        --tab-new-page: url("./icons/tab_desktop_new_page_20_regular.svg");
        --window: url("./icons/window_20_regular.svg");
        --window-inprivate-account: url("./icons/window_inprivate_account_20_regular.svg");
        --star-line-horizontal: url("./icons/star_line_horizontal_3_20_regular.svg");
        --star-add: url("./icons/star_add_20_regular.svg");
        --star: url("./icons/star_20_filled.svg");
        --history: url("./icons/history_20_regular.svg");
        --arrow-download: url("./icons/arrow_download_20_regular.svg");
        --key: url("./icons/key_20_regular.svg");
        --puzzle-piece: url("./icons/puzzle_piece_20_regular.svg");
        --print: url("./icons/print_20_regular.svg");
        --save-edit: url("./icons/save_edit_20_regular.svg");
        --document-search: url("./icons/document_search_20_regular.svg");
        --settings: url("./icons/settings_20_regular.svg");
        --question-circle: url("./icons/question_circle_20_regular.svg");
        --color: url("./icons/color_20_regular.svg");
        --window-dev-tools: url("./icons/window_dev_tools_20_regular.svg");
        --person-feedback: url("./icons/person_feedback_20_regular.svg");
        --warning: url("./icons/warning_20_regular.svg");
        --arrow-clockwise: url("./icons/arrow_clockwise_20_regular.svg");
        --arrow-redo: url("./icons/arrow_redo_20_regular.svg");
        --arrow-undo: url("./icons/arrow_undo_20_regular.svg");
        --clipboard-paste: url("./icons/clipboard_paste_20_regular.svg");
        --clipboard-search: url("./icons/clipboard_search_20_regular.svg");
        --copy: url("./icons/copy_20_regular.svg");
        --cut: url("./icons/cut_20_regular.svg");
        --delete: url("./icons/delete_20_regular.svg");
        --dismiss: url("./icons/dismiss_20_regular.svg");
        --folder-add: url("./icons/folder_add_20_regular.svg");
        --pin: url("./icons/pin_20_regular.svg");
        --speaker-mute: url("./icons/speaker_mute_20_regular.svg");
        --tab-desktop: url("./icons/tab_desktop_20_regular.svg");
        --tab-desktop-copy: url("./icons/tab_desktop_copy_20_regular.svg");
        --edit: url("./icons/edit_20_regular.svg");
        --speaker-2: url("./icons/speaker_2_20_regular.svg");
        --camera-edit: url("./icons/camera_edit_20_regular.svg");
        --cursor-hover: url("./icons/cursor_hover_20_regular.svg");
        --image-copy: url("./icons/image_copy_20_regular.svg");
        --image-edit: url("./icons/image_edit_20_regular.svg");
        --link: url("./icons/link_20_regular.svg");
        --play: url("./icons/play_20_regular.svg");
        --pause: url("./icons/pause_20_regular.svg");
        --search: url("./icons/search_20_regular.svg");
        --tab-desktop-image: url("./icons/tab_desktop_image_20_regular.svg");
        --translate: url("./icons/translate_20_regular.svg");
    }
}

/* ---------- Filled Icons ---------- */

@media (-moz-bool-pref: "userChrome.Menu.Icons.Filled.Enabled")
{
    :root
    {
        --tab-new-page: url("./icons/tab_desktop_new_page_20_filled.svg");
        --window: url("./icons/window_20_filled.svg");
        --window-inprivate-account: url("./icons/window_inprivate_account_20_filled.svg");
        --star-line-horizontal: url("./icons/star_line_horizontal_3_20_filled.svg");
        --star-add: url("./icons/star_add_20_filled.svg");
        --star: url("./icons/star_20_filled.svg");
        --history: url("./icons/history_20_filled.svg");
        --arrow-download: url("./icons/arrow_download_20_filled.svg");
        --key: url("./icons/key_20_filled.svg");
        --puzzle-piece: url("./icons/puzzle_piece_20_filled.svg");
        --print: url("./icons/print_20_filled.svg");
        --save-edit: url("./icons/save_edit_20_filled.svg");
        --document-search: url("./icons/document_search_20_filled.svg");
        --settings: url("./icons/settings_20_filled.svg");
        --question-circle: url("./icons/question_circle_20_filled.svg");
        --color: url("./icons/color_20_filled.svg");
        --window-dev-tools: url("./icons/window_dev_tools_20_filled.svg");
        --person-feedback: url("./icons/person_feedback_20_filled.svg");
        --warning: url("./icons/warning_20_filled.svg");
        --arrow-clockwise: url("./icons/arrow_clockwise_20_filled.svg");
        --arrow-redo: url("./icons/arrow_redo_20_filled.svg");
        --arrow-undo: url("./icons/arrow_undo_20_filled.svg");
        --clipboard-paste: url("./icons/clipboard_paste_20_filled.svg");
        --clipboard-search: url("./icons/clipboard_search_20_filled.svg");
        --copy: url("./icons/copy_20_filled.svg");
        --cut: url("./icons/cut_20_filled.svg");
        --delete: url("./icons/delete_20_filled.svg");
        --dismiss: url("./icons/dismiss_20_filled.svg");
        --folder-add: url("./icons/folder_add_20_filled.svg");
        --pin: url("./icons/pin_20_filled.svg");
        --speaker-mute: url("./icons/speaker_mute_20_filled.svg");
        --tab-desktop: url("./icons/tab_desktop_20_filled.svg");
        --tab-desktop-copy: url("./icons/tab_desktop_copy_20_filled.svg");
        --edit: url("./icons/edit_20_filled.svg");
        --speaker-2: url("./icons/speaker_2_20_filled.svg");
        --camera-edit: url("./icons/camera_edit_20_filled.svg");
        --cursor-hover: url("./icons/cursor_hover_20_filled.svg");
        --image-copy: url("./icons/image_copy_20_filled.svg");
        --image-edit: url("./icons/image_edit_20_filled.svg");
        --link: url("./icons/link_20_filled.svg");
        --play: url("./icons/play_20_filled.svg");
        --pause: url("./icons/pause_20_filled.svg");
        --search: url("./icons/search_20_filled.svg");
        --tab-desktop-image: url("./icons/tab_desktop_image_20_filled.svg");
        --translate: url("./icons/translate_20_filled.svg");
    }
}

/* ---------- Native Browser Menus ---------- */

@media (-moz-bool-pref: "userChrome.Menu.Icons.Regular.Enabled") or
       (-moz-bool-pref: "userChrome.Menu.Icons.Filled.Enabled")
{
    :is(

        /* ----- Main Menu ----- */

        #appMenu-new-tab-button2,
        #appMenu-new-window-button2,
        #appMenu-new-private-window-button2,
        #appMenu-bookmarks-button,
        #appMenu-history-button,
        #appMenu-downloads-button,
        #appMenu-passwords-button,
        #appMenu-extensions-themes-button,
        #appMenu-print-button2,
        #appMenu-save-file-button2,
        #appMenu-find-button2,
        #appMenu-translate-button,
        #appMenu-settings-button,
        #appMenu-help-button2,

        /* ----- Main Menu (Submenus) ----- */

        #appmenu-moreTools-button,
        #appmenu-developer-tools-view > toolbarbutton:nth-child(1),

        #appMenu_menu_openHelp,
        #appMenu_feedbackPage,
        #appMenu_menu_HelpPopup_reportPhishingtoolmenu,

        /* ----- Bookmark Menu ----- */

        #panelMenuBookmarkThisPage,
        #panelMenu_showAllBookmarks,
        #BMB_bookmarksShowAllTop,
        #BMB_bookmarksShowAll,

        /* ----- History Menu ----- */

        #PanelUI-historyMore,

        /* ----- Library Menu ----- */

        #appMenu-library-bookmarks-button,
        #appMenu-library-history-button,
        #appMenu-library-downloads-button,

        /* ----- Downloads Menu ----- */

        #downloadsHistory,

        /* ----- Developer Menu ----- */

        #PanelUI-developer-tools-view > toolbarbutton:nth-child(1),

        /* ----- Sidebar Menu ----- */

        #sidebar-switcher-bookmarks,
        #sidebar-switcher-history

    )::before
    {
        content: "" !important;
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        mask-size: 20px 20px;
        mask-repeat: no-repeat;
        mask-position: center center;
        margin-block: -2px;
        margin-inline: -2px 6px;
    }

    /* ----- Main Menu ----- */
    
    #appMenu-new-tab-button2::before
    {
        mask-image: var(--tab-new-page);
    }
    
    #appMenu-new-window-button2::before
    {
        mask-image: var(--window);
    }
    
    #appMenu-new-private-window-button2::before
    {
        mask-image: var(--window-inprivate-account);
    }
    
    #appMenu-bookmarks-button::before
    {
        mask-image: var(--star-line-horizontal);
    }
    
    #appMenu-history-button::before
    {
        mask-image: var(--history);
    }
    
    #appMenu-downloads-button::before
    {
        mask-image: var(--arrow-download);
    }
    
    #appMenu-passwords-button::before
    {
        mask-image: var(--key);
    }
    
    #appMenu-extensions-themes-button::before
    {
        mask-image: var(--puzzle-piece);
    }

    #appMenu-print-button2::before
    {
        mask-image: var(--print);
    }

    #appMenu-save-file-button2::before
    {
        mask-image: var(--save-edit);
    }

    #appMenu-find-button2::before
    {
        mask-image: var(--document-search);
    }

    #appMenu-translate-button::before
    {
        mask-image: var(--translate);
    }

    #appMenu-settings-button::before
    {
        mask-image: var(--settings);
    }

    #appMenu-help-button2::before
    {
        mask-image: var(--question-circle);
    }

    /* ----- Main Menu (Submenus) ----- */

    #appmenu-moreTools-button::before
    {
        mask-image: var(--color);
    }

    #appmenu-developer-tools-view > toolbarbutton:nth-child(1)::before
    {
        mask-image: var(--window-dev-tools);
    }

    #appMenu_menu_openHelp::before
    {
        mask-image: var(--question-circle);
    }

    #appMenu_feedbackPage::before
    {
        mask-image: var(--person-feedback);
    }

    #appMenu_menu_HelpPopup_reportPhishingtoolmenu::before
    {
        mask-image: var(--warning);
    }

    /* ----- Bookmark Menu ----- */

    #panelMenuBookmarkThisPage::before
    {
        mask-image: var(--star-add);
    }

    #panelMenuBookmarkThisPage[starred]::before
    {
        mask-image: var(--star);
        background-color: var(--toolbarbutton-icon-fill-attention) !important;
    }

    :is(#panelMenu_showAllBookmarks, #BMB_bookmarksShowAllTop, #BMB_bookmarksShowAll)::before
    {
        mask-image: var(--star-line-horizontal);
    }

    /* ----- History Menu ----- */

    #PanelUI-historyMore::before
    {
        mask-image: var(--history);
    }

    /* ----- Library Menu ----- */

    #appMenu-library-bookmarks-button::before
    {
        mask-image: var(--star-line-horizontal);
    }

    #appMenu-library-history-button::before
    {
        mask-image: var(--history);
    }

    #appMenu-library-downloads-button::before
    {
        mask-image: var(--arrow-download);
    }

    /* ----- Downloads Menu ----- */

    #downloadsHistory::before
    {
        mask-image: var(--arrow-download);
    }

    /* ----- Developer Menu ----- */

    #PanelUI-developer-tools-view > toolbarbutton:nth-child(1)::before
    {
        mask-image: var(--window-dev-tools);
    }

    /* ----- Sidebar Menu ----- */

    #sidebar-switcher-bookmarks::before
    {
        mask-image: var(--star-line-horizontal);
    }

    #sidebar-switcher-history::before
    {
        mask-image: var(--history);
    }

    /* ---------- Non-Native Browser Menus ---------- */

    @media (-moz-platform: windows),
           (-moz-platform: linux)
    {

    :is(

        /* ----- Toolbar Menubar Menu ----- */

        menuitem.viewCustomizeToolbar,

        /* ----- TabsToolbar Menu ----- */

        #toolbar-context-openANewTab,
        #toolbar-context-reloadSelectedTab,
        #toolbar-context-bookmarkSelectedTab,

        /* ----- Tab Menu ----- */

        #context_openANewTab,
        #context_reloadTab,
        #context_toggleMuteTab,
        #context_pinTab,
        #context_unpinTab,
        #context_duplicateTab,
        #context_bookmarkTab,
        #context_openTabInWindow,
        #context_closeTab,

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

        #context_reloadSelectedTabs,
        #context_toggleMuteSelectedTabs,
        #context_pinSelectedTabs,
        #context_unpinSelectedTabs,
        #context_duplicateTabs,
        #context_bookmarkSelectedTabs,

        /* ----- Urlbar Menu ----- */

        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(1),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(2),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(4),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(5),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(7),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(8),
        menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(9),

        /* ----- Searchbar Menu ----- */

        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(1),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(2),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(4),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(5),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(6),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(7),
        menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(8),

        /* ----- PersonalToolbar Menu ----- */

        #placesContext_openBookmarkContainer\:tabs,
        #placesContext_new\:bookmark,
        #placesContext_new\:folder,
        #placesContext_paste,
        #placesContext_showAllBookmarks,

        /* ----- Bookmarks Menu ----- */

        #placesContext_open\:newtab,
        #placesContext_open\:newwindow,
        #placesContext_open\:newprivatewindow,
        #placesContext_show_bookmark\:info,
        #placesContext_deleteBookmark,
        #placesContext_cut,
        #placesContext_copy,
        #placesContext_paste_group,

        /* ----- Folder Menu ----- */

        #placesContext_show_folder\:info,
        #placesContext_deleteFolder,

        /* ---------- Web Menu ---------- */

        /* ----- Menu ----- */

        #context-savepage,
        #context-take-screenshot,
        #context-inspect,

        /* ----- Text Menu ----- */

        #context-copy,
        #context-print-selection,
        #context-searchselect,

        /* ----- Image Menu ----- */

        #context-viewimage,
        #context-saveimage,
        #context-copyimage-contents,

        /* ----- Link Menu ----- */

        #context-openlinkintab,
        #context-openlink,
        #context-openlinkprivate,
        #context-bookmarklink,
        #context-savelink,
        #context-copylink,

        /* ----- Input Menu ----- */

        #context-undo,
        #context-redo,
        #context-cut,
        #context-copy,
        #context-paste,
        #context-delete,
        #context-keywordfield,

        /* ----- Video Menu ----- */

        #context-media-play,
        #context-media-pause,
        #context-media-mute,
        #context-media-unmute,
        #context-viewvideo,
        #context-savevideo

    )::before
    {
        content: "" !important;
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        mask-size: 20px 20px;
        mask-repeat: no-repeat;
        mask-position: center center;
        margin-block: -2px;
        margin-inline: var(--align-menu-icons);
    }

    /* ----- Toolbar Menubar Menu ----- */

    menuitem.viewCustomizeToolbar::before
    {
        mask-image: var(--color);
    }

    /* ----- TabsToolbar Menu ----- */

    #toolbar-context-openANewTab::before
    {
        mask-image: var(--tab-new-page);
    }

    #toolbar-context-reloadSelectedTab::before
    {
        mask-image: var(--arrow-clockwise);
    }

    #toolbar-context-bookmarkSelectedTab::before
    {
        mask-image: var(--star-add);
    }

    /* ----- Tab Menu ----- */

    #context_openANewTab::before
    {
        mask-image: var(--tab-new-page);
    }

    #context_reloadTab::before
    {
        mask-image: var(--arrow-clockwise);
    }

    #context_toggleMuteTab::before
    {
        mask-image: var(--speaker-mute);
    }

    #context_toggleMuteTab[muted]::before
    {
        mask-image: var(--speaker-2);
    }

    :is(#context_pinTab, #context_unpinTab)::before
    {
        mask-image: var(--pin);
    }

    #context_duplicateTab::before
    {
        mask-image: var(--tab-desktop-copy);
    }

    #context_bookmarkTab::before
    {
        mask-image: var(--star-add);
    }

    #context_openTabInWindow::before
    {
        mask-image: var(--window);
    }

    #context_closeTab::before
    {
        mask-image: var(--dismiss);
    }

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

    #context_reloadSelectedTabs::before
    {
        mask-image: var(--arrow-clockwise);
    }

    #context_toggleMuteSelectedTabs::before
    {
        mask-image: var(--speaker-mute);
    }

    #context_toggleMuteSelectedTabs[muted]::before
    {
        mask-image: var(--speaker-2);
    }

    :is(#context_pinSelectedTabs, #context_unpinSelectedTabs)::before
    {
        mask-image: var(--pin);
    }

    #context_duplicateTabs::before
    {
        mask-image: var(--tab-desktop-copy);
    }

    #context_bookmarkSelectedTabs::before
    {
        mask-image: var(--star-add);
    }

    /* ----- Urlbar Menu ----- */

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(1)::before
    {
        mask-image: var(--arrow-undo);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(2)::before
    {
        mask-image: var(--arrow-redo);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(4)::before
    {
        mask-image: var(--cut);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(5)::before
    {
        mask-image: var(--copy);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(7)::before
    {
        mask-image: var(--clipboard-paste);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(8)::before
    {
        mask-image: var(--clipboard-search);
    }

    menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(9)::before
    {
        mask-image: var(--delete);
    }

    /* ----- Searchbar Menu ----- */

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(1)::before
    {
        mask-image: var(--arrow-undo);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(2)::before
    {
        mask-image: var(--arrow-redo);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(4)::before
    {
        mask-image: var(--cut);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(5)::before
    {
        mask-image: var(--copy);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(6)::before
    {
        mask-image: var(--clipboard-paste);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(7)::before
    {
        mask-image: var(--clipboard-search);
    }

    menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(8)::before
    {
        mask-image: var(--delete);
    }

    /* ----- PersonalToolbar Menu ----- */

    #placesContext_openBookmarkContainer\:tabs::before
    {
        mask-image: var(--tab-desktop);
    }

    #placesContext_new\:bookmark::before
    {
        mask-image: var(--star-add);
    }

    #placesContext_new\:folder::before
    {
        mask-image: var(--folder-add);
    }

    #placesContext_paste::before
    {
        mask-image: var(--clipboard-paste);
    }

    #placesContext_showAllBookmarks::before
    {
        mask-image: var(--star-line-horizontal);
    }

    /* ----- Bookmarks Menu ----- */

    #placesContext_open\:newtab::before
    {
        mask-image: var(--tab-new-page);
    }

    #placesContext_open\:newwindow::before
    {
        mask-image: var(--window);
    }

    #placesContext_open\:newprivatewindow::before
    {
        mask-image: var(--window-inprivate-account);
    }

    #placesContext_show_bookmark\:info::before
    {
        mask-image: var(--edit);
    }

    #placesContext_deleteBookmark::before
    {
        mask-image: var(--delete);
    }

    #placesContext_cut::before
    {
        mask-image: var(--cut);
    }

    #placesContext_copy::before
    {
        mask-image: var(--copy);
    }

    #placesContext_paste_group::before
    {
        mask-image: var(--clipboard-paste);
    }

    /* ----- Folder Menu ----- */

    #placesContext_show_folder\:info::before
    {
        mask-image: var(--edit);
    }

    #placesContext_deleteFolder::before
    {
        mask-image: var(--delete);
    }

    /* ---------- Web Menu ---------- */

    #context-savepage::before
    {
        mask-image: var(--save-edit);
    }

    #context-take-screenshot::before
    {
        mask-image: var(--camera-edit);
    }

    #context-inspect::before
    {
        mask-image: var(--cursor-hover);
    }

    #context-copy::before
    {
        mask-image: var(--copy);
    }

    #context-print-selection::before
    {
        mask-image: var(--print);
    }

    #context-searchselect::before
    {
        mask-image: var(--search);
    }

    #context-viewimage::before
    {
        mask-image: var(--tab-desktop-image);
    }

    #context-saveimage::before
    {
        mask-image: var(--image-edit);
    }

    #context-copyimage-contents::before
    {
        mask-image: var(--image-copy);
    }

    #context-openlinkintab::before
    {
        mask-image: var(--tab-desktop);
    }

    #context-openlink::before
    {
        mask-image: var(--window);
    }

    #context-openlinkprivate::before
    {
        mask-image: var(--window-inprivate-account);
    }

    #context-bookmarklink::before
    {
        mask-image: var(--star-add);
    }

    #context-savelink::before
    {
        mask-image: var(--save-edit);
    }

    #context-copylink::before
    {
        mask-image: var(--link);
    }

    #context-undo::before
    {
        mask-image: var(--arrow-undo);
    }

    #context-redo::before
    {
        mask-image: var(--arrow-redo);
    }

    #context-cut::before
    {
        mask-image: var(--cut);
    }

    #context-copy::before
    {
        mask-image: var(--copy);
    }

    #context-paste::before
    {
        mask-image: var(--clipboard-paste);
    }

    #context-delete::before
    {
        mask-image: var(--delete);
    }

    #context-keywordfield::before
    {
        mask-image: var(--star-add);
    }

    #context-media-play::before
    {
        mask-image: var(--play);
    }

    #context-media-pause::before
    {
        mask-image: var(--pause);
    }

    #context-media-mute::before
    {
        mask-image: var(--speaker-mute);
    }

    #context-media-unmute::before
    {
        mask-image: var(--speaker-2);
    }

    #context-viewvideo::before
    {
        mask-image: var(--tab-desktop);
    }

    #context-savevideo::before
    {
        mask-image: var(--save-edit);
    }

  }

}

}

}