/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

#main-window:not([customizing]):has(#sidebar-box:not([hidden="true"])) {
    /* adjust #appcontent margin */
    &:has(#sidebar-box:not([positionend="true"])) {
        --uc-content-margin-left: 0px !important;
    } &:has(#sidebar-box[positionend="true"]) {
        --uc-content-margin-right: 0px !important;
    }
    
    #sidebar-box {
        min-width: var(--uc-sidebar-width) !important;
        margin-bottom: var(--uc-content-margin-bottom) !important;
        margin-top: var(--uc-content-margin-top) !important;
        &[positionend="true"] {
            margin-right: var(--uc-sidebar-margin);
        } &:not([positionend="true"]) {
            margin-left: var(--uc-sidebar-margin);
        }
        
        will-change: margin min-width width max-width;
        transition: 
            min-width var(--uc-transistion), 
            max-width var(--uc-transistion),
            width var(--uc-transistion),
            margin var(--uc-transistion);
    }

    #sidebar {
        clip-path: circle(100%);
        border-radius: var(--uc-content-radius) !important;
        @media (-moz-bool-pref: "uc.tweak.sidebar-header") {
            border-top-left-radius: 0px !important;
            border-top-right-radius: 0px !important;
        }
    }

    #sidebar-splitter {
        width: var(--uc-sidebar-margin) !important;
        border: none !important;
        margin-inline: none !important; 
    }
    
    #sidebar-header {
        @media not (-moz-bool-pref: "uc.tweak.sidebar-header") {
            display: none !important;
        }
        border-top-left-radius: var(--uc-radius) !important;
        border-top-right-radius: var(--uc-radius) !important;
    }
  
    /* sidebar collapse */
    &[titlepreface*="-"] {
        #sidebar-splitter {
            display: none !important;
        }
         
        #sidebar-box { 
            position: relative;
            z-index: 1;
            min-width: var(--uc-sidebar-width) !important;
            width: var(--uc-sidebar-width) !important;
            max-width: var(--uc-sidebar-width) !important;
            
            &[positionend="true"] {
                margin-left: var(--uc-sidebar-margin);
            } &:not([positionend="true"]) {
                margin-right: var(--uc-sidebar-margin);
            }

            &:not(:hover) #sidebar-header {
                overflow: clip !important;
            }
        }
         
        #sidebar, #sidebar-header {
            transition: min-width var(--uc-transition);
            will-change: min-width;
        }
        
        #sidebar-box:hover > #sidebar-header,
        #sidebar-box:hover > #sidebar {
            min-width: var(--uc-sidebar-hover-width) !important;
            background-color: var(--uc-bg) !important;
        }
                
        @media (-moz-bool-pref: "uc.tweak.sidebar-full-collapse") { 
            #sidebar-box {
                min-width: var(--uc-content-margin) !important;
                max-width: var(--uc-content-margin) !important;
                margin-inline: 0px !important;
                
                & #sidebar, & #sidebar-header {
                    will-change: auto !important;
                    transition: margin var(--uc-transition) !important;
                    
                    margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin-left))) !important;
                    margin-block: var(--uc-sidebar-margin) !important;
                    min-width: var(--uc-sidebar-hover-width) !important;
                    max-width: var(--uc-sidebar-hover-width) !important;
                    background-color: var(--uc-bg-opaque) !important;
                }
                
                &:not([positionend="true"]) #sidebar, 
                &:not([positionend="true"]) #sidebar-header {
                    margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important;
                } 
                &[positionend="true"] #sidebar, 
                &[positionend="true"] #sidebar-header {
                    margin-right: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important;
                }
                
                &:not([positionend="true"]):hover #sidebar,
                &:not([positionend="true"]):hover #sidebar-header {
                    margin-left: calc(var(--uc-content-margin) + var(--uc-sidebar-margin)) !important;
                } 
                &[positionend="true"]:hover #sidebar, 
                &[positionend="true"]:hover #sidebar-header {
                    margin-right: calc(var(--uc-content-margin) + var(--uc-sidebar-margin)) !important;
                }
                
                &:hover::after {
                    content: "";
                    position: absolute !important;
                    top: 0 !important;
                    bottom: 0 !important;
                    left: 0 !important;
                    right: calc(-1 * var(--uc-sidebar-margin)*2) !important;
                    width: auto;
                    height: auto;
                    z-index: 90 !important;
                }
                
                &:hover::before {
                    opacity: 0 !important;
                }
                
                &::before {
                    content: "";
                    position: absolute;
                    height: 80%;
                    top: 10%;
                    bottom: auto !important;
                    width: calc(var(--uc-content-margin)*0.5) !important;
                    left: calc(var(--uc-content-margin)*0.25) !important;
                    z-index: 199 !important;
                              
                    visibility: visible;
                    display: unset;
                    opacity: 1 !important;
                    background-color: var(--uc-panel-hint) !important;
                    border-radius: var(--uc-content-radius) !important;
                    transition: all var(--uc-transition) !important;       
                }
            }
        }
        
        #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 }
    }
}
