/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar
 * Dimensions on non-Win10 OS probably needs to be adjusted.
 */

:root{
    --uc-autohide-toolbox-delay: 0ms; /* Wait 0.1s before hiding toolbars */
    --uc-toolbox-rotation: 107deg;  /* This may need to be lower on mac - like 75 or so */

    --base00: #1D252C;
    --base01: #171D23;
    --base02: #5EC4FF;
    --base03: #566C7D;
    --base04: #5EC4FF;
    --base05: #A0B3C5;
    --base06: #C06ECE;
    --base07: #A0B3C5;
    --base08: #D95468;
    --base09: #FFA880;
    --base0A: #5EC4FF;
    --base0B: #8BD49C;
    --base0C: #008B94;
    --base0D: #5EC4FF;
    --base0E: #C06ECE;
    --base0F: #5EC4FF;

}

:root[sizemode="maximized"]{
    --uc-toolbox-rotation: 88.5deg;
}

@media  (-moz-platform: windows){
    :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; }
}

:root[sizemode="fullscreen"],
:root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important; }

#navigator-toolbox{
    --browser-area-z-index-toolbox: 3;
    position: fixed !important;
    background-color: var(--lwt-accent-color,black) !important;
    transition: transform 0ms linear, opacity 0ms linear !important;
    transition-delay: var(--uc-autohide-toolbox-delay) !important;
    transform-origin: top;
    transform: rotateX(var(--uc-toolbox-rotation));
    opacity: 0;
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}
:root[sessionrestored] #urlbar[popover]{
    pointer-events: none;
    opacity: 0;
    transition: transform 0ms linear var(--uc-autohide-toolbox-delay), opacity 0ms calc(var(--uc-autohide-toolbox-delay) + 0ms);
    transform-origin: 0px calc(0px - var(--tab-min-height) - var(--tab-block-margin) * 2);
    transform: rotateX(89.9deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0ms;
    transform: rotateX(0deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox,
#navigator-toolbox:has(#urlbar:is([open],[focus-within])),
#navigator-toolbox:hover,
#navigator-toolbox:focus-within{
    transition-delay: 0ms !important;
    transform: rotateX(0);
    opacity: 1;
}
/* This makes things like OS menubar/taskbar show the toolbox when hovered in maximized windows.
 * Unfortunately it also means that other OS native surfaces (such as context menu on macos)
 * and other always-on-top applications will trigger toolbox to show up. */
@media (-moz-bool-pref: "userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){
    :root[sizemode="maximized"]:not(:hover){
        #navigator-toolbox:not(:-moz-window-inactive),
    #urlbar[popover]:not(:-moz-window-inactive){
        transition-delay: 0ms !important;
        transform: rotateX(0);
        opacity: 1;
    }
    }
}

#navigator-toolbox > *{ line-height: normal; pointer-events: auto }

#navigator-toolbox,
#navigator-toolbox > *{
    width: 100vw;
    -moz-appearance: none !important;
}

/* These two exist for oneliner compatibility */
#nav-bar{ width: var(--uc-navigationbar-width,100vw) }
#TabsToolbar
{
    visibility: collapse;
}
/* Don't apply transform before window has been fully created */
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }

:root[customizing] #navigator-toolbox{
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
}

#navigator-toolbox[inFullscreen] > #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{ display: none }

/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
 /*#titlebar{ margin-bottom: -9px }*/

/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
/*
#navigator-toolbox{ flex-direction: column; display: flex; }
#titlebar{ order: 2 }
*/
#sidebar-header {
    display: none;
}
#sidebar-header {
    /* display: none; */
    visibility: collapse !important;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box{
    --uc-sidebar-width: 30px;
    --uc-sidebar-hover-width: 210px;
    --uc-autohide-sidebar-delay: 0ms; /* Wait 0.6s before hiding sidebar */
    --uc-autohide-transition-duration: 0ms;
    --uc-autohide-transition-type: linear;
    --browser-area-z-index-sidebar: 3;
    position: relative;
    min-width: var(--uc-sidebar-width) !important;
    width: var(--uc-sidebar-width) !important;
    max-width: var(--uc-sidebar-width) !important;
    z-index: var(--browser-area-z-index-sidebar,3);
}
#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
    overflow: hidden;
    color: var(--chrome-color, inherit) !important;
    padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
    content: "";
    display: flex;
    padding-left: 8px;
}

#sidebar-header,
#sidebar{
    transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
    min-width: var(--uc-sidebar-width) !important;
    will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar{
    min-width: var(--uc-sidebar-hover-width) !important;
    transition-delay: 0ms !important;
}

.sidebar-panel{
    background-color: transparent !important;
    color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
    -moz-appearance: none !important;
    background-color: rgba(249,249,250,0.1) !important;
    color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
    background-color: inherit !important;
    border-inline: 1px solid rgb(80,80,80);
    border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
    border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
    inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
    margin-inline: 0px !important;
    border-left-style: solid !important;
}