:root {
    --tab-background-colour: linear-gradient(180deg, rgba(254,254,254,.62) 0%, rgba(110,110,110,.5) 100%);
    --tab-background-colour_hover: linear-gradient(180deg, rgba(254,254,254,.88) 0%, rgba(213,213,213,.7) 100%);
    --tab-background-colour_active: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(254,254,254,.62) 100%);
    --tab-border-colour: rgba(96, 96, 96, .78);
    --tab-inset-border-colour: var(--tab-background-colour);
    --tab-border-radius: 0 !important;
    --tab-height: 23px;

    --newtab-button-width: 29px;

    @media (-moz-platform: windows) {
        @supports not -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
            @supports not -moz-bool-pref("BeautyFox.appearance.IE10") {
                @media not (-moz-windows-classic) {
                    @media not (-moz-windows-compositor) {
                        --tab-background-colour: linear-gradient(180deg, rgb(188,211,235) 0%, rgb(234,241,250) 100%);
                        --tab-background-colour_hover: linear-gradient(180deg, rgb(253,253,254) 0%, rgb(234,241,250) 100%);
                        --tab-background-colour_active: linear-gradient(180deg, rgb(238,244,249) 0%, rgb(255,255,255) 100%);
                        --tab-border-colour: rgb(115, 131, 147);
                        --tab-inset-border-colour: linear-gradient(180deg, rgb(255,255,255) 0%, rgb(234,241,250) 100%);
                    }
                }

                @media (-moz-windows-classic) {
                    --tab-background-colour: color-mix(in srgb, -moz-Dialog 85%, black);
                    --tab-background-colour_hover: color-mix(in srgb, -moz-Dialog 100%, black);
                    --tab-background-colour_active: -moz-Dialog;
                }
            }
        }
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        --tab-border-radius: 4px 4px 0 0 !important;
        --tab-background-colour: rgba(255, 255, 255, .3);
        --tab-background-colour_hover: rgba(255, 255, 255, .5);
        --tab-background-colour_active: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255,.6) 100%);
        --tab-inset-border-colour: rgba(254, 254, 254, 0.3);
        --newtab-button-width: 27px;

        &[tabsOnNavRow] {
            --tab-height: 28px !important;
        }
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
        --tab-background-colour: rgba(200, 200, 200, 0.58);
        --tab-background-colour_hover: rgba(242, 242, 242, 0.9);
        --tab-border-colour: rgba(75, 75, 75, .7);

        @supports -moz-bool-pref("BeautyFox.appearance.IE11") {
            @supports -moz-bool-pref("BeautyFox.appearance.IE11Win10") {
                --newtab-button-width: 22px;
            }
        }
    }

    &[tabsOnNavRow] {
        --tab-height: 27px;

        &:is([privatebrowsingmode='temporary']) {
            #urlbar-container {
                width: calc(var(--urlbar-inprivatebadge-width) + var(--urlbar-width-calc)) !important;
                min-width: calc(var(--urlbar-inprivatebadge-width) + var(--urlbar-min-width)) !important;
            }
        }
    }
}

#customization-container {
    background-image: linear-gradient(180deg, #02a1e2 0%, #FFFFFF 100%) !important;
    background-size: 100% 84px;
    background-repeat: no-repeat;
    background-color: #FEFEFE !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
        background-image: none !important;
        background-color: rgb(232, 238, 245) !important;
    }
}

#TabsToolbar {
    padding: 0 !important;
	padding-left: 3px !important;
    max-height: var(--tab-height);
    background-image: url(images/shine.png) !important;
    background-size: 100% var(--tab-height);
    background-position: bottom;
    -moz-window-dragging: drag !important;
}

:root {
    &[tabsOnNavRow] {
        #TabsToolbar {
            background-image: none !important;

            @media not (-moz-windows-classic) {
                @media (-moz-windows-compositor: 0) {
                    border-bottom: 1px solid rgb(115, 131, 147) !important;
                }
            }
    
            @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                margin-left: 5px !important;
            }
        }
    }

    &:not([tabsOnNavRow]) {
        #TabsToolbar {
            @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                margin-bottom: 3px !important;
                position: relative !important;
    
                &::before {
                    content: '';
                    position: absolute;
                    bottom: -3px;
                    height: 3px;
                    background-color: white;
                    border-radius: 4px 4px 0 0;
                    margin-left: -2px;
                    width: 100%;
                    border-top: 1px solid var(--browser-inner-border-color) !important;
    
                    @supports not -moz-bool-pref("BeautyFox.option.bHideFakeInnerBorders") {
                        border-left: 1px solid var(--browser-inner-border-color) !important;
                        border-right: 1px solid var(--browser-inner-border-color) !important;
                        margin-left: -1px;
                        width: calc(100% - 4px);
                    }
                }
            }
        }
    }
}

#TabsToolbar-customization-target {
    height: var(--tab-height);
}

#tabbrowser-tabs {
    --tab-min-height: var(--tab-height) !important;

    &[overflow='true'] {
        margin-right: -1px !important;

        #TabsMSEdgeNewTabButton {
            display: none !important;
        }
    }

    &:not([overflow='true']) {
        ~ #MSEdgeNewTabButton{
            display: none;
        }
    }
}

#scrollbutton-up,
#scrollbutton-down {
    border-bottom: none !important;
    width: 20px !important;
    border: 1px solid var(--tab-border-colour) !important;
    border-bottom: 0px !important;
    padding: 0 !important;
    border-radius: var(--tab-border-radius) !important;
    z-index: 1 !important;
    position: relative;
    overflow: hidden !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
        background-color: transparent !important;
        border: 1px solid var(--tab-border-colour) !important;
        border-bottom: 0px !important;
    }
    
    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-image-slice: 1;
        border-image-source: var(--tab-inset-border-colour);
        border-bottom: none !important;
        background: var(--tab-background-colour);

        @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
            border: 1px solid var(--tab-inset-border-colour) !important;
            border-bottom: 0 !important;
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE10")  {
            border: unset !important;
        }
    }

    &:hover {
        &::before {
            border-image-slice: 1;
            border-image-source: var(--tab-inset-border-colour);
            background: var(--tab-background-colour_hover);
        }
    }

    .toolbarbutton-icon {
        list-style-image: url("images/left.svg") !important;
    }
}

#scrollbutton-up {
    margin-right: -1px !important;
}

#scrollbutton-down {
    margin-left: -1px !important;
}

.tabbrowser-tab {
    padding: 0 !important;
    border-radius: var(--tab-border-radius) !important;
    color: black !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        &:only-of-type {
            .tab-close-button {
                display: none !important;
            }
        }
    }
    
    .tab-background {
        box-shadow: none !important;

        @media not (-moz-windows-classic) {
            border: 1px solid var(--tab-border-colour) !important;
            border-bottom: none !important;
            margin-left: -1px !important;
        }

        @media (-moz-windows-classic) {
            border-top: 1px solid -moz-Dialog;
            border-left: 1px solid -moz-Dialog;
            border-bottom: 1px solid ThreeDDarkShadow;
            border-right: 1px solid ThreeDDarkShadow;
        }
        background: transparent !important;
        position: relative;
        overflow: hidden;

        @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
            &:hover {
                background: var(--tab-background-colour_hover) !important;
            }
        }
    
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            @media not (-moz-windows-classic) {
                border-width: 1px;
                border-style: solid;
                border-image-slice: 1;
                border-image-source: var(--tab-inset-border-colour);
                border-bottom: none !important;
            }

            @media (-moz-windows-classic) {
                border-top: 1px solid ThreeDHighlight;
                border-left: 1px solid ThreeDHighlight;
                border-bottom: 1px solid ThreeDShadow;
                border-right: 1px solid ThreeDShadow;
            }

            background: var(--tab-background-colour);
            box-sizing: border-box;

            @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                outline: 0 !important;
                border: 1px solid var(--tab-inset-border-colour) !important;
                border-bottom: 0 !important;
                background-repeat: no-repeat !important;
            }

            @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
                border: unset !important;
            }
        }
    }

    &:hover {
        .tab-background {
            background: transparent !important;

            &::before {
                border-image-slice: 1;
                border-image-source: var(--tab-inset-border-colour);
                background: var(--tab-background-colour_hover);

                @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
                    background: var(--tab-background-colour_hover);
                    border: unset !important;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    &[selected='true'] {
        @media (-moz-windows-classic) {
            .tab-label {
                margin-bottom: -2px !important;
            } 

            .tab-background {
                border-bottom: 0 !important;

                &::before {
                    border-bottom: 0 !important;
                }
            }
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
            .tab-label {
                margin-bottom: -2px !important;
            } 

            &[class*='identity-color'] {
                .tab-background {
                    &::before {
                        mask-image: linear-gradient(rgba(0, 0, 0, 0.6), black);
                    }
                }
            }
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
            &[class*='identity-color'] {
                .tab-background {
                    &::before {
                        background: color-mix(in srgb, var(--identity-icon-color) 60%, white) !important;
                        opacity: 1;
                        mask: unset !important;
                    }
                }
            }
        }

        .tab-background {
            background: transparent !important;

            &::before {
                border-image-slice: 1;
                border-image-source: var(--tab-inset-border-colour);
                background: var(--tab-background-colour_active);

                @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                    border: 0 !important;
                }

                @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
                    background: white !important;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .tab-close-button {
            display: block;
        }
    }

    &:first-child {
        .tab-background {
            @media not (-moz-windows-classic) {
                border-left: 1px solid var(--tab-border-colour) !important;
            }

            margin-left: 0px !important;
        }
    }

    &:not([busy='true']) {
        .tab-icon-image {
            &:not(&[src*='data']) {
                content: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/190.ico") !important;
            }
            &:-moz-broken {
                display: block !important;
            }
        }
    }

    .tab-close-button {
        height: 16px !important;
        width: 16px !important;
        padding: 0 !important;
        list-style-image: none !important;
        mask: url("chrome://userchrome/content/images/close-mask.svg");
        mask-position: center;
        mask-repeat: no-repeat;
        display: none;
        background-color: #8c9198;

        @media (-moz-windows-classic) {
            background-color: black;
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
            background-color: #A7A5A5;
        }
        
        &:hover {
            background-color: #E73C3C !important;
        }
    
        &:active {
            background-color: #E10C0C !important;
        }
            
    }

    &[class*='identity-color'] {
        .tab-background {
            &::before {
                background: color-mix(in srgb, var(--identity-icon-color) 60%, white);
                mask-image: linear-gradient(black, rgba(0,0,0,.2));

                @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                    mask-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
                }

                @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
                    background: color-mix(in srgb, var(--identity-icon-color) 60%, white) !important;
                    opacity: .5;
                    mask: unset !important;
                }
            }

            @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
                &:hover {
                    &::before {
                        background: color-mix(in srgb, var(--identity-icon-color) 60%, white) !important;
                        mask: unset !important;
                        opacity: .8;
                    }
                }
            }
        }

        .tab-context-line {
            display: none;
        }
    }

    &:not([selected='true']):hover {
        &[class*='identity-color'] {
            .tab-background {
                background: rgba(255,255,255,.5) !important;
            }
        }
    }
}

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

.tabbrowser-tab {
    pointer-events: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
    #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]),
    .tabbrowser-tab[tab-grouping],
    .tabbrowser-tab[tabdrop-samewindow] {
        transition: transform 150ms ease-in-out !important;
    }
}

.tabbrowser-tab:not([pinned]) {
    &:hover {
        .tab-close-button {
            display: block !important;
        }
    }
}

.tabbrowser-tab[fadein]:not([pinned]):not([style*='max-width']) {
    max-width: 200px !important;
    min-width: 45px !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 4px !important;
    border-left: 1px solid var(--tab-border-colour) !important;
}

.tab-context-line {
    position: absolute !important;
    top: 3px;
    left: -2px;
    height: 100% !important;
    width: 100% !important;
    background-color: var(--identity-icon-color);
    opacity: 0.3;
}

.tab-content {
    padding: 0 7px 0 6px !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        padding: 0 7px 0 7px !important;
    }
}

.tab-icon-stack {
    margin-inline-end: 4px !important;
}

.tab-throbber,
.tab-icon-pending,
.tab-icon-image,
.tab-sharing-icon-overlay,
.tab-icon-overlay {
    margin-inline-end: 0 !important;
}

toolbarbutton#tabs-newtab-button,
toolbarbutton#TabsMSEdgeNewTabButton,
#TabsToolbar #new-tab-button,
#TabsToolbar #MSEdgeNewTabButton {
    width: var(--newtab-button-width) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    height: var(--tab-height) !important;
    position: relative;
    overflow: hidden;

    @media (-moz-windows-classic) {
        border-top: 1px solid -moz-Dialog;
        border-left: 1px solid -moz-Dialog;
        border-bottom: 1px solid ThreeDDarkShadow;
        border-right: 1px solid ThreeDDarkShadow;
    }

    @media not (-moz-windows-classic) {
        border: 1px solid var(--tab-border-colour) !important;
        border-bottom: 0px !important;
        border-radius: var(--tab-border-radius) !important;
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        width: 27px;
        height: calc(100% - 1px);
    }

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--tab-background-colour);
        box-sizing: border-box;

        @media not (-moz-windows-classic) {
            border-width: 1px;
            border-style: solid;
            border-image-slice: 1;
            border-image-source: var(--tab-inset-border-colour);
            border-bottom: none !important;
        }

        @media (-moz-windows-classic) {
            border-top: 1px solid ThreeDHighlight;
            border-left: 1px solid ThreeDHighlight;
            border-bottom: 1px solid ThreeDShadow;
            border-right: 1px solid ThreeDShadow;
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
            outline: 0 !important;
            border: 1px solid var(--tab-inset-border-colour) !important;
            border-bottom: 0 !important;
            border-radius: 3px 3px 0 0 !important;
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
            border: unset !important;
        }
    }

    &:hover {
        .toolbarbutton-icon {
            background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31062.ico");
        }

        @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
            &::before {
                background-color: var(--tab-background-colour_hover) !important;
            }
        }
    }

    .toolbarbutton-icon {
        padding: 0 !important;
        height: 16px !important;
        width: 16px !important;
        list-style-image: none !important;
        z-index: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px;

        @supports -moz-bool-pref("BeautyFox.appearance.IE11Win10") {
            background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31062.ico"); 
        }
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE11Win10") {
        &:hover {
            &::before {
                background: var(--tab-background-colour_hover) !important;
            }
        }
    }
}

toolbarbutton#tabs-newtab-button,
toolbarbutton#TabsMSEdgeNewTabButton {
    margin-left: -1px !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        &::before {
            border: 1px solid var(--tab-inset-border-colour) !important;
            border-bottom: 0 !important;
            width: 100%;
            height: 100%;
            border-radius: 3px 3px 0 0 !important;
        }
    }
}

.tab-label-container[textoverflow][labeldirection='ltr']:not([pinned]) {
    mask-image: none !important;
}

.tab-text {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tab-icon-sound-label {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    :root[sessionrestored] .tab-throbber[busy]::before {
        content: unset !important;
    }
}


.tab-throbber {
    background-image: url("chrome://userchrome/content/resources/ieframe.dll/Bitmap/624.png") !important;
    background-repeat: no-repeat !important;
    width: 16px !important;
    height: 16px !important;
    background-position-y: -16px !important;
    animation: tab-throbber .7s steps(12) infinite !important;
    opacity: 1 !important;

    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
        background-position-y: 0px !important;
    }
}

#main-window {
    &[sizemode='fullscreen'] {
        #TabsToolbar {
            background-image: none !important;
        }

        #TabsToolbar,
        #newToolbar {
            margin: 0 !important;

            &::before,
            &::after {
                content: unset;
            }
        }
    }
}

:root {
    &[tabsOnNavRow] {
        #main-window {
            &[sizemode='maximized'],
            &[sizemode='fullscreen'] {
                #newToolbar {
                    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                        &::after {
                            @supports not -moz-bool-pref("BeautyFox.option.bHideFakeInnerBorders") {
                                border-left: 0 !important;
                                border-right: 0 !important;
                                width: 100% !important;
                            }
                        }
                    }
                }

                #TabsToolbar {
                    padding: 0 !important;
                }
            }
        }
    }

    &:not([tabsOnNavRow]) {
        #main-window {
            &[sizemode='maximized'],
            &[sizemode='fullscreen'] {
                #TabsToolbar {
                    @supports -moz-bool-pref("BeautyFox.appearance.IE9PreRelease") {
                        &::before {
                            @supports not -moz-bool-pref("BeautyFox.option.bHideFakeInnerBorders") {
                                border-left: 0 !important;
                                border-right: 0 !important;
                                width: 100% !important;
                            }
    
                            @supports -moz-bool-pref("BeautyFox.option.bHideFakeInnerBorders") {
                                margin-left: 0 !important;
                            }
                        }
                    }
                }
            }
        }
    }
}



@supports -moz-bool-pref("BeautyFox.appearance.IE10") {
    @supports -moz-bool-pref("BeautyFox.appearance.IE11") {
        @supports -moz-bool-pref("BeautyFox.appearance.IE11Win10") {
			#TabsToolbar {
				toolbarbutton#TabsMSEdgeNewTabButton,
				#MSEdgeNewTabButton {
					&:hover {
						.toolbarbutton-icon {
							background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31065.ico") !important;
						}
					}

					.toolbarbutton-icon {
						background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31065.ico") !important;
					}
				}
			}
            

			#TabsToolbar {
				&[edgebutton='new'] {
					#MSEdgeNewTabButton,
					toolbarbutton#TabsMSEdgeNewTabButton {
						&:hover {
							.toolbarbutton-icon {
								background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31087.ico") !important;
							}
						}
	
						.toolbarbutton-icon {
							background-image: url("chrome://userchrome/content/resources/ieframe.dll/Icon Group/31087.ico") !important;
						}
					}
				}
			}

            toolbarbutton#TabsMSEdgeNewTabButton {
                display: flex !important;
            }

            :root[tabsOnNavRow] {
                --newtab-button-width: 26px;
            }
        }
    }
}

@supports not -moz-bool-pref("BeautyFox.appearance.IE11Win10") {
    #TabsToolbar {
		#MSEdgeNewTabButton,
		toolbarbutton#TabsMSEdgeNewTabButton {
			display: none !important;
		}
	}
}

#TabsToolbar {
	&[edgebutton='hide'] {
		#MSEdgeNewTabButton,
		toolbarbutton#TabsMSEdgeNewTabButton {
			display: none !important;
		}
	}
}