@media (prefers-color-scheme: light) {
    #root {
        /* Tab and PinnedTab height adjustment */
        --tabs-height: 33px;
        --tabs-pinned-height: var(--tabs-height);
        /* Light Theme base settings */
        --bg: #f1f5f9 !important;
        --warn: #fca5a5 !important;
    }

	#root.root {
			--toolbar-bg: var(--bg) !important;
			--frame-bg: var(--bg) !important;
	}

    /* TABS */

    .Tab .lvl-wrapper:after {
        display: none;
    }

    .Tab {
        margin: auto;
        width: 98%;
        border-radius: 3px;
    }

    .Tab .close>svg:hover {
        /* Styling the tab close button */
        border-radius: 3px;
        background: var(--warn) !important;
        opacity: 80%;
    }

    .Tab .title {
        overflow: hidden !important;
    }

    /* PINNED TABS */

    .PinnedDock {
        background-color: var(--bg) !important;
    }

    .PinnedTab {
        margin: 5px 0px 4px 6px;
        border-radius: 3px;
    }

    /* NAV BAR */

    .NavigationBar {
        height: 35px !important;
        padding: 4.5px 0px 0px 4.5px !important;
        /*background-color: # !important;*/
        margin-bottom: 5px;
    }

    .NavigationBar .panel-btn:hover {
        border-radius: 3px !important;
        background-color: var(--tabs-bg-hover) !important;
    }

    .NavigationBar .panel-btn[data-active="true"] {
        border-radius: 3px !important;
        background-color: var(--bg) !important;
    }

    .NavigationBar .panel-btn[data-active="true"]:hover {
        border-radius: 3px !important;
        background-color: var(--tabs-bg-hover) !important;
    }

    .NavigationBar .panel-btn>svg,
    .NavigationBar .panel-btn>img {
        fill: var(--panel-btn) !important;
    }

    /* SIDEBAR HACK PATCHES */

    @media (max-width: 50px) {

        /* Fix to tab tree identation when minimised */
        #root:not(:hover) .Tab {
            --tabs-indent: -1000px;
        }

        .Tab[data-lvl]>div.lvl-wrapper {
            right: -2px;
        }

        .Tab {
            max-width: 34px;
        }

        .Tab .fav {
            z-index: 1;
        }

        .Tab .audio {
            z-index: 1;
            margin-left: -12px;
            height: 26px;
        }

        .Tab .title {
            display: none;
        }

        .PinnedTab {
            margin-left: 5px;
        }

        .NavigationBar .settings-btn {
            display: none;
        }
    }

    /* OPTIONAL */

    /* Disable these two snippets below to make pinned tabs wrap when minimised */
    /*.PinnedDock {
	flex-wrap: nowrap !important;
}

.PinnedTab {
	overflow: hidden !important;
	min-width: var(--tabs-pinned-width) !important;
}*/

    /* Optional patch for better tab notifications on pinned tabs */

    .PinnedTab[data-audible] .fav>img,
    .PinnedTab[data-muted] .fav>img,
    .PinnedTab[data-loading] .fav>img {
        mask: none;
    }

    .PinnedTab .fav>img {
        mask: none;
    }

    .PinnedTab[data-updated="true"] .fav>img {
        mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), rgba(0, 0, 0, 0.141), rgba(0, 0, 0, 0.141) 4px, #000 5px, #000);
    }

    .PinnedTab .audio-badge {
        top: 5px;
    }

    .PinnedTab .update-badge {
        opacity: 0;
    }

    .PinnedTab[data-updated="true"] .update-badge {
        opacity: 100;
    }

}

@media (prefers-color-scheme: dark) {
    #root {
        /* Tab and PinnedTab height adjustment */
        --tabs-height: 33px;
        --tabs-pinned-height: var(--tabs-height);

        /* Dark Theme base settings */
        --bg: #1a1b26 !important;
        --tabs-fg: #d4d4d4 !important;
        --tabs-bg-hover: #3b3948 !important;
        --tabs-activated-bg: #5b5b66 !important;
        --nav-btn-activated-bg: #1f222f !important;
        --panel-btn: #f2f2f2 !important;
        --warn: #8c4351 !important;
    }

	#root.root {
			--toolbar-bg: var(--bg) !important;
			--frame-bg: var(--bg) !important;
	}

    /* TABS */

    .Tab .lvl-wrapper:after {
        display: none;
    }

    .Tab {
        margin: auto;
        width: 98%;
        border-radius: 3px;
    }

    .Tab .close>svg:hover {
        /* Styling the tab close button */
        border-radius: 3px;
        background: var(--warn) !important;
        opacity: 80%;
    }

    .Tab .title {
        overflow: hidden !important;
    }

    /* PINNED TABS */

    .PinnedDock {
        background-color: var(--bg) !important;
    }

    .PinnedTab {
        margin: 5px 0px 4px 6px;
        border-radius: 3px;
    }

    /* NAV BAR */

    .NavigationBar {
        height: 35px !important;
        padding: 4.5px 0px 0px 4.5px !important;
        /*background-color: # !important;*/
        margin-bottom: 5px;
    }

    .NavigationBar .panel-btn:hover {
        border-radius: 3px !important;
        background-color: var(--tabs-bg-hover) !important;
    }

    .NavigationBar .panel-btn[data-active="true"] {
        border-radius: 3px !important;
        background-color: var(--bg) !important;
    }

    .NavigationBar .panel-btn[data-active="true"]:hover {
        border-radius: 3px !important;
        background-color: var(--tabs-bg-hover) !important;
    }

    .NavigationBar .panel-btn>svg,
    .NavigationBar .panel-btn>img {
        fill: var(--panel-btn) !important;
    }

    /* SIDEBAR HACK PATCHES */

    @media (max-width: 50px) {

        /* Fix to tab tree identation when minimised */
        #root:not(:hover) .Tab {
            --tabs-indent: -1000px;
        }

        .Tab[data-lvl]>div.lvl-wrapper {
            right: -2px;
        }

        .Tab {
            max-width: 34px;
        }

        .Tab .fav {
            z-index: 1;
        }

        .Tab .audio {
            z-index: 1;
            margin-left: -12px;
            height: 26px;
        }

        .Tab .title {
            display: none;
        }

        .PinnedTab {
            margin-left: 5px;
        }

        .NavigationBar .settings-btn {
            display: none;
        }
    }

    /* OPTIONAL */

    /* Disable these two snippets below to make pinned tabs wrap when minimised */
    /*.PinnedDock {
        flex-wrap: nowrap !important;
    }
    
    .PinnedTab {
        overflow: hidden !important;
        min-width: var(--tabs-pinned-width) !important;
    }*/

    /* Optional patch for better tab notifications on pinned tabs */

    .PinnedTab[data-audible] .fav>img,
    .PinnedTab[data-muted] .fav>img,
    .PinnedTab[data-loading] .fav>img {
        mask: none;
    }

    .PinnedTab .fav>img {
        mask: none;
    }

    .PinnedTab[data-updated="true"] .fav>img {
        mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), rgba(0, 0, 0, 0.141), rgba(0, 0, 0, 0.141) 4px, #000 5px, #000);
    }

    .PinnedTab .audio-badge {
        top: 5px;
    }

    .PinnedTab .update-badge {
        opacity: 0;
    }

    .PinnedTab[data-updated="true"] .update-badge {
        opacity: 100;
    }
}

#root:not(:hover) .Tab .audio {
    top: -10px;
    left: 26px;
    transform: scale(0.8);
    transition: top 0.2s ease-in-out;
}

#root:hover .Tab .audio {
    top: 0;
    transition: top 0.2s ease-in-out;
}

#root:not(:hover) .Tab .fav-icon {
    left: 2px;
    transition: top 0.2s ease-in-out;
}

#root:hover .Tab .fav-icon {
    transition: top 0.2s ease-in-out;
}

.ScrollBox > .top-shadow[data-show="true"], .ScrollBox > .bottom-shadow[data-show="true"] {
    opacity: 0.5;
}

.top-horizontal-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.Tab .title {
    transition: margin-left 300ms ease;
}
.Tab:hover {
    --tabs-inner-gap: 8px;
}
.Tab:hover .title {
    margin-left: 8px;
}

.Tab[data-discarded="true"] .title {
    opacity: 80%;
}

#nav_bar .nav-item {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}

#nav_bar .nav-item:first-child {
    opacity: 1;
}

#root:hover #nav_bar .nav-item {
    opacity: 1;
    transition-delay: 0.05s;
}

#root:not(:hover) #nav_bar .nav-item {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.05s;
}

#root:not(:hover) #nav_bar .nav-item[data-active="true"] {
    opacity: 1;
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
    transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#root:not(:hover) .static-btns,
#root:not(:hover) .Notifications,
#root:not(:hover) .BottomBar .tool-btn:not(:first-child) {
    display: none;
}

#root:not(:hover) .BottomBar {
    display: flex;
    justify-content: center;
}

#root:not(:hover) .BottomBar .tool-btn:first-child {
    margin: 0 auto;
}
