/*scroll fix */

.simplebar-wrapper{
    max-height: 100% !important;  /*fixes the overscoll bug, sorta*/
    max-width: 100% !important;
}



.scrollbar-content{
    overscroll-behavior: none; 
}


/* ---------------- accent colors and tint----------------- */


.accent_Lime{
    --accent-H: 85deg;
    --UItone-H: var(--accent-H);
    --accent-S: 83%;
    --accent-L: 63%;
    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}



.accent_Strawberry{  
    --accent-H: 10deg;
    --UItone-H: var(--accent-H);
    --accent-S: 70%;
    --accent-L: 53%;
    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}



.accent_Blueberry{
    --accent-H: 197deg;
    --UItone-H: var(--accent-H);
    --accent-S: 96%;
    --accent-L: 40%;

    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}


.accent_Banana{
    --accent-H: 65deg;
    --UItone-H: var(--accent-H);
    --accent-S: 93%;
    --accent-L: 73%;

    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}

:root,
.accent_Grape{

    --accent-H: 257deg;
    --UItone-H: var(--accent-H);
    --accent-S: 66%;
    --accent-L: 65%;
    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}



.accent_Sage{
    --accent-H: 180deg;
    --UItone-H: var(--accent-H);
    --accent-S: 53%;
    --accent-L: 67%;

    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}




.accent_Ruby{
    --accent-H: 357deg;
    --UItone-H: var(--accent-H);
    --accent-S: 82%;
    --accent-L: 43%;
    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
}



.accent_Tangerine{
    --accent-H: 26deg;
    --UItone-H: var(--accent-H);
    --accent-S: 86%;
    --accent-L: 63%;
    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));

}




:root,
.tint_Neutral{
    --UItone-H: 190deg;
    --UItone-S: 35%;
}


/*------------------------THEME LEMONADE --------------------*/


.theme_aqua{
    


    /*UI color shades generated from UI tone colors*/

    --UI-light: hsl(var(--UItone-H), var(--UItone-S), 99%);              /*the bright top-left edges of elements, but used for other purposes too*/
    --UI-lighter: hsl(var(--UItone-H), var(--UItone-S), 93%);
    --UI-background: hsl(var(--UItone-H), var(--UItone-S), 92%, 97%);       
                                             /*most common background color for windows, buttons etc */
    --UI-shadow: hsl(var(--UItone-H), var(--UItone-S), 70%);  /*the shadowy bottom-right edges of elements*/

    --UI-midtone: hsl(var(--UItone-H), var(--UItone-S), 75%);
    --UI-dark: hsl(var(--UItone-H), 40%, 50%);    
    --UI-darkest: hsl(var(--UItone-H), var(--UItone-S), 40%); 

    --UI-text-color: hsl(var(--UItone-H), var(--UItone-S), 20%); 
    --UI-border-color: hsl(var(--UItone-H), var(--UItone-S), 30%); 


     
    --UI-textfields-background-color: white;

    --UI-pale-color: hsl(var(--UItone-H), var(--UItone-S), 40%);  /* disabled text and border color */

    --UI-elements-background: hsl(var(--UItone-H), var(--UItone-S), 92%); /*same as UI-background but elements can directly use it*/

    .windowstate_inactive{

        --UI-text-color: var(--UI-pale-color); 
        --UI-textfields-background-color: hsl(var(--UItone-H), var(--UItone-S), 95%); 

    }

  

    /*---------------------------- calculating accent color shades -----------------------------*/

    --accent-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));

    --accent-color-light: hsl(var(--accent-H), var(--accent-S), max(var(--accent-L), 80%));
    --accent-color-shadow: hsl(var(--accent-H), var(--accent-S), min(var(--accent-L), 40%));

    --highlighter-color: hsl(var(--accent-H) var(--accent-S) var(--accent-L) / 20%);

    --theme-color: hsl(var(--accent-H), var(--accent-S), var(--accent-L));
    --theme-light: hsla(var(--accent-H), var(--accent-S), 70%, 0.6);
    --theme-med: hsla(var(--accent-H), var(--accent-S), 60%, 0.6);
    --theme-mid-dark: hsla(var(--accent-H), calc(var(--accent-S) * 0.8), 40%, 0.8);
    --theme-darkest: hsl(var(--accent-H), calc(var(--accent-S) * 0.5), 20%);
    --theme-shadow: hsl(var(--accent-H), calc(var(--accent-S) * 0.5), 30%);
    

    --theme-link-color: hsl(var(--accent-H), var(--accent-S), min(40%, var(--accent-L))); 

    /*----------------------------calculated values, edit at your own risk :-)-----------------------------*/

    /*soft boxshadow border used at various places*/

    --faux-border:
        inset var(--sysbutton-faux-border-width) var(--sysbutton-faux-border-width) var(--sysbutton-faux-border-blur) var(--window-border-color),
        inset calc(var(--sysbutton-faux-border-width) * -1) calc(var(--sysbutton-faux-border-width) * -1) var(--sysbutton-faux-border-blur) var(--window-border-color);

    /*3D border effects calculation*/

    --3dfx-light-offset: 1.5px;
    --3dfx-light-offset-inverse: calc(var(--3dfx-light-offset) * -1);
    --3dfx-light-blur: 1px;

    --3dfx-shadow-offset: 1px;
    --3dfx-shadow-offset-inverse: calc(var(--3dfx-shadow-offset) * -1);
    --3dfx-shadow-blur: 0.5px;

    /*lights and shadows separately */

    --3D-lighteffect:
        var(--3dfx-light-offset) var(--3dfx-light-offset) var(--3dfx-light-blur) var(--UI-light);

    --3D-shadoweffect:
        var(--3dfx-shadow-offset-inverse) var(--3dfx-shadow-offset-inverse) var(--3dfx-shadow-blur) var(--UI-shadow);
   
    --3D-lighteffect-inverse:
        var(--3dfx-light-offset-inverse) var(--3dfx-light-offset-inverse) var(--3dfx-light-blur) var(--UI-light);

    --3D-shadoweffect-inverse:
        var(--3dfx-shadow-offset) var(--3dfx-shadow-offset) var(--3dfx-shadow-blur) var(--UI-shadow);

    /*combining lights and shadows to full effects*/

    --3D-elements-bevel: 
        inset var(--3D-lighteffect),
        inset var(--3D-shadoweffect);

    --3D-elements-pressed: 
        inset var(--3D-lighteffect-inverse),
        inset var(--3D-shadoweffect-inverse);

    --3D-elements-engraved:
        var(--3D-lighteffect),
        var(--3D-shadoweffect);

    --3D-elements-emboss: 
        var(--3D-lighteffect-inverse),
        var(--3D-shadoweffect-inverse);



 /*the same but with accent color shades*/
    --3D-accent-lighteffect:
        var(--3dfx-light-offset) var(--3dfx-light-offset) var(--3dfx-light-blur) var(--accent-color-light);

    --3D-accent-shadoweffect:
        var(--3dfx-shadow-offset-inverse) var(--3dfx-shadow-offset-inverse) var(--3dfx-shadow-blur) var(--accent-color-shadow);
   
  /*  --3D-accent-lighteffect-inverse:
        var(--3dfx-light-offset-inverse) var(--3dfx-light-offset-inverse) var(--3dfx-light-blur) var(--accent-color-light);

    --3D-accent-shadoweffect-inverse:
        var(--3dfx-shadow-offset) var(--3dfx-shadow-offset) var(--3dfx-shadow-blur) var(--accent-color-shadow);

*/
    --3D-elements-accent-bevel: 
        inset var(--3D-accent-lighteffect),
        inset var(--3D-accent-shadoweffect);

  /*  --3D-elements-accent-pressed: 
        inset var(--3D-accent-lighteffect-inverse),
        inset var(--3D-accent-shadoweffect-inverse);

    --3D-elements-accent-engraved:
        var(--3D-accent-lighteffect),
        var(--3D-accent-shadoweffect);

    --3D-elements-accent-emboss: 
        var(--3D-accent-lighteffect-inverse),
        var(--3D-accent-shadoweffect-inverse);*/

    /*some often used effects*/

    
    --3D-menu: var(--3D-elements-bevel);


    /* buttons */




    --lemonade-primary-button-background: repeating-linear-gradient(0deg, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 0px,
                    rgba(255,255,255, 0.4) 15px, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 30px,
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 40px)
                    ;

    --lemonade-primary-button-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), inset 0px 3px 1px white,

                        inset 0px 3px 6px var(--theme-color),
                        inset 0px 6px 4px var(--theme-mid-dark),
                        inset 0px 0px 20px var(--theme-light)
                        ;

    --lemonade-button-background: repeating-linear-gradient(0deg, 
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 0px,
                    rgba(255,255,255, 0.4) 15px, 
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 30px,
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 40px)
                    ;

    --lemonade-button-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), inset 0px 3px 1px white,

                        inset 0px 3px 6px var(--UI-background),
                        inset 0px 6px 4px var(--UI-midtone),
                        inset 0px 0px 20px var(--UI-light)
                        ;

    --button-background: var(--lemonade-button-background);
    --button-border: none;
    --button-border-radius: 40px;
    --button-boxshadow: var(--lemonade-button-boxshadow);


    --button-text-color: var(--UI-text-color);
    --button-padding: 3px 20px;
    --button-height: var(--UI-elements-height);

    --button-disabled-background: var(--lemonade-button-background);
    --button-disabled-border:  none;
    --button-disabled-boxshadow: var(--lemonade-button-boxshadow);
    --button-disabled-text-color: var(--UI-pale-color);

    --button-pressed-background: var(--lemonade-button-background);
    --button-pressed-border: none;
    --button-pressed-boxshadow: var(--lemonade-button-boxshadow);
    --button-pressed-text-color: var(--UI-text-color);
    --button-pressed-padding: 4px 20px 2px 20px; /*3px 7px 1px 9px;   /* substracting from top and left, adding to bottom and right creates a 3D press effect*/

    /*primary button, only one of these per dialog please*/

    --button-primary-background: var(--lemonade-primary-button-background);

    --button-primary-border: var(--button-border);
    --button-primary-border-radius: var(--button-border-radius);
    --button-primary-boxshadow: var(--lemonade-primary-button-boxshadow);

    --button-primary-text-color: var(--button-text-color);
    --button-primary-padding: var(--button-padding);

    --button-primary-pressed-background: var(--lemonade-primary-button-background);
    --button-primary-pressed-border: none;
    --button-primary-pressed-border-radius: var(--button-pressed-border-radius);
    --button-primary-pressed-boxshadow: var(--lemonade-primary-button-boxshadow);
    --button-primary-pressed-text-color: var(--button-pressed-text-color);
    --button-primary-pressed-padding: var(--button-pressed-padding);

    --button-primary-doubleborder: none;  /* this is Palladium-specific, set to "" to show or to `none` to hide it.*/
    --button-primary-doubleborder-extramargin: 0;




     /*----------------------------window-----------------------------*/

    --window-border-color: var(--UI-border-color);  




    --lemonade-sysbutton-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), inset 0px 3px 1px white,

                        inset 0px 3px 6px var(--theme-color),
                        inset 0px 6px 4px var(--theme-mid-dark),
                        inset 0px 0px 20px var(--theme-light),
                        1px 1px 2px var(--theme-light),
                        1px 1px 2px var(--theme-light)
                        ;




/*---------------------------- button -----------------------------*/


button{

    box-shadow: var(--lemonade-scrollbar-h-boxshadow);
    background: var(--lemonade-fill-h);

   
    border: var(--button-border);
    border-radius: var(--button-border-radius);

    padding: var(--button-padding);
    height: var(--button-height);
    min-height: var(--button-height);

    position: relative;  /*needed for positioning ::before pseudo-element*/

    color: var(--button-text-color);
    font-family: ParagraphFont, Sans-serif;
    font-size: 12px; 
    letter-spacing: 0.7;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;

    transform: translateY(-3px);
    
    flex: none;

    /*backdrop-filter: blur(1px);*/

    &:active:hover{

        border: var(--button-pressed-border);

        padding: var(--button-pressed-padding);
        color: var(--button-pressed-text-color);
    }




}


button[primary]{

    height: var(--scrollbar-thickness);
    font-size: 8px; 
    margin-left: 16px;
    margin-right: 16px;
    transform: scale(150%); /*ugly temp solution*/


    border: var(--button-primary-border);
    border-radius: var(--button-primary-border-radius);

    padding: var(--button-primary-padding);
   



    &:active:hover{

        padding: var(--button-primary-pressed-padding);
        color: var(--button-primary-pressed-text-color);
    }
}


   


    /*----------------------------UI elements-----------------------------*/




    --lemonade-primary-button-background: repeating-linear-gradient(0deg, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 0px,
                    rgba(255,255,255, 0.4) 15px, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 30px,
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.9) 40px)
                    ;

    --lemonade-primary-button-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), inset 0px 3px 1px white,

                        inset 0px 3px 6px var(--theme-color),
                        inset 0px 6px 4px var(--theme-mid-dark),
                        inset 0px 0px 20px var(--theme-light)
                        ;

    --lemonade-button-background: repeating-linear-gradient(0deg, 
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 0px,
                    rgba(255,255,255, 0.4) 15px, 
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 30px,
                    hsl(var(--UItone-H), var(--UItone-S), var(--accent-L), 0.9) 40px)
                    ;

    --lemonade-button-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), inset 0px 3px 1px white,

                        inset 0px 3px 6px var(--UI-background),
                        inset 0px 6px 4px var(--UI-midtone),
                        inset 0px 0px 20px var(--UI-light)
                        ;


    /* scrollbars */


    --lemonade-fill-v:

                    
                    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.6) 0% 40%, transparent 40%) 1px 4px / 4px 4px no-repeat,
                    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.6) 0% 40%, transparent 40%) 1px calc(100% - 4px) / 4px 4px no-repeat,
                    linear-gradient(0deg, rgba(255,255,255,0.6) 0% 100%) 1px 8px / 4px calc(100% - 16px) no-repeat,

                    radial-gradient(circle at 50% 100%, 
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 4px calc(var(--scrollbar-thickness) * -0.5) / var(--scrollbar-thickness) var(--scrollbar-thickness) no-repeat,

                    radial-gradient(circle at 50% 0% ,
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 4px calc(100% + (var(--scrollbar-thickness) * 0.5)) / var(--scrollbar-thickness) var(--scrollbar-thickness) no-repeat,

                    linear-gradient(90deg,  
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 
                        calc((var(--scrollbar-thickness) * 0.5) + 4px) calc(var(--scrollbar-thickness) * 0.5) / 100% calc(100% - var(--scrollbar-thickness)) no-repeat,

                    linear-gradient(-90deg, 
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 
                        calc((var(--scrollbar-thickness) * -0.5) + 4px) calc(var(--scrollbar-thickness) * 0.5) / 100% calc(100% - var(--scrollbar-thickness)) no-repeat,
 

                    repeating-linear-gradient(0deg, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.4) 0px,
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.1) 12px, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.4) 24px 30px),
                
                    rgba(220, 220, 220, 0.5)
                    ;




    --lemonade-fill-h:

                    
                    radial-gradient(circle at 100% 50%, rgba(255,255,255,0.6) 0% 40%, transparent 40%) 4px 1px / 4px 4px no-repeat,
                    radial-gradient(circle at 0% 50%, rgba(255,255,255,0.6) 0% 40%, transparent 40%) calc(100% - 4px) 1px / 4px 4px no-repeat,
                    linear-gradient(0deg, rgba(255,255,255,0.6) 0% 100%) 8px 1px / calc(100% - 16px) 4px no-repeat,

                    radial-gradient(circle at 100% 50%, 
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) calc(var(--scrollbar-thickness) * -0.5) 4px / var(--scrollbar-thickness) var(--scrollbar-thickness) no-repeat,

                    radial-gradient(circle at 0% 50% ,
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) calc(100% + (var(--scrollbar-thickness) * 0.5)) 4px / var(--scrollbar-thickness) var(--scrollbar-thickness) no-repeat,

                    linear-gradient(180deg,  
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 
                        calc(var(--scrollbar-thickness) * 0.5) calc((var(--scrollbar-thickness) * 0.5) + 4px)  / calc(100% - var(--scrollbar-thickness)) 100% no-repeat,

                    linear-gradient(0deg,  
                        transparent 0% 10%, 
                        var(--theme-light) 20%, 
                        var(--theme-mid-dark) 42%, 
                        var(--theme-color) 45%, 
                        black 100%
                        ) 
                        calc(var(--scrollbar-thickness) * 0.5) calc((var(--scrollbar-thickness) * -0.5) + 4px) / calc(100% - var(--scrollbar-thickness)) 100% no-repeat,


                    repeating-linear-gradient(90deg, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.4) 0px,
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.1) 12px, 
                    hsl(var(--accent-H), var(--accent-S), var(--accent-L), 0.4) 24px 30px),
                
                    rgba(220, 220, 220, 0.5)
                    ;


    --scrollbar-thickness: 16px;


    
    --scrollbar-h-background: var(--lemonade-fill-h);

    --scrollbar-v-background: var(--lemonade-fill-v);

    --scrollbar-v-pressed-background: var(--scrollbar-v-background);
    --scrollbar-h-pressed-background: var(--scrollbar-h-background);



    --lemonade-scrollbar-v-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), 

                        inset 0px 3px 3px var(--theme-color),   
                        0px 0px 2px black;


                        

    --lemonade-scrollbar-h-boxshadow: inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1.5px var(--window-border-color), inset 0px 0px 1px var(--window-border-color), 

                        inset 0px 3px 3px var(--theme-color),   
                        0px 0px 2px black;


    --scrollbar-border: none;
    --scrollbar-double-borders: none; /*for certain looks eg Palladium, some borders are hidden (eg right border
                                  of vertical scrollbar) to avoid double borders. for that, this should be
                                set to 'none', otherwise you can copy scrollbar-border-here; */
    --scrollbar-overshoot-depth: 0px; /*needed for the same reason, to hide scrollbar double 
                                borders. but this one is for the narrow ends of the scrollbars.
                                set it to scrollbar border width to enable or 0px to disable */
    --scrollbar-border-radius: 16px;

    --scrollbar-h-boxshadow: var(--lemonade-scrollbar-h-boxshadow);
    --scrollbar-v-boxshadow: var(--lemonade-scrollbar-v-boxshadow);

    --scrollbar-h-pressed-boxshadow: var(--scrollbar-h-boxshadow);
    --scrollbar-v-pressed-boxshadow: var(--scrollbar-v-boxshadow);


    --scrollbar-track-border-radius: 8px;

    --lemonade-track-bg: none;


    --lemonade-track-boxshadow:  inset 2px 2px 8px var(--UI-darkest);

    --scrollbar-track-h-background: none;
    --scrollbar-track-h-boxshadow: none;
    --scrollbar-track-h-border: none;

    --scrollbar-track-v-background: none;
    --scrollbar-track-v-boxshadow: none;
    --scrollbar-track-v-border: none;

    
    --scrollbar-cornerbutton-boxshadow: none;
    --scrollbar-cornerbutton-topleftborder: none;
    --scrollbar-cornerbutton-background: none;






    --scrollbutton-height: 0px !important;
    --scrollbutton-divider-width: 0px;
    --scrollbutton-divider-color: transparent;


    



    --scrollbutton-height: var(--scrollbar-thickness);

    --scrollbutton-background: none;
    --scrollbutton-border: none;
    --scrollbutton-border-radius: 8px;
    --scrollbutton-boxshadow: none;

    --scrollbutton-icon-color: var(--UI-text-color);
    --scrollbutton-icon: polygon(50% 31%, 29% 67%, 70% 67%);


    --scrollbutton-pressed-background: none;
    --scrollbutton-pressed-boxshadow: none;
    --scrollbutton-pressed-icon-color: var(--accent-color);

    


    --stripes-light: hsla(var(--UItone-H), var(--UItone-S), 100%, 86%);
    --stripes-mid: hsla(var(--UItone-H), var(--UItone-S), 93%, 80%);
    --stripes-dark: hsl(var(--UItone-H), var(--UItone-S), 86%);


    --UI-striped-background: repeating-linear-gradient(180deg, 
            var(--stripes-light) 0px, var(--stripes-light) 1px,
            var(--stripes-mid) 1px, var(--stripes-mid) 2px, 
            var(--stripes-dark) 2px, var(--stripes-dark) 4px);

    /*----------------------------overriding styles for alternative states-----------------------------*/

    /* selected text color */

    ::selection {

        background: var(--accent-color);
        
    }


}










/*----------------------------------- APPLYING THEME TO INTERFACE ------------------------*/




/*----------------------------scrollbars-----------------------------*/



.simplebar-scrollable-y::after,
.simplebar-scrollable-x::after{   
                                        /*corner button where scrollbars meet*/
                                        /*not the same as the resizer corner which usually blocks this one*/
                                        /*btw resizer corner is part of the system, not the app */
    content: "";
    position: absolute;
    font-size: 1px;
    bottom: 0px;
    right: 0px;
    width: var(--scrollbar-thickness);
    height: var(--scrollbar-thickness);
    background: var(--scrollbar-cornerbutton-background);
    box-shadow: var(--scrollbar-cornerbutton-boxshadow);
    border-top: var(--scrollbar-cornerbutton-topleftborder);
    border-left: var(--scrollbar-cornerbutton-topleftborder);
    box-sizing: border-box;
}




.simplebar-wrapper{
    max-height: 100% !important;  /*fixes the overscoll bug, sorta*/
    max-width: 100% !important;
}



.scrollbar-content{
    overscroll-behavior: none; 
}


.simplebar-scrollbar::before {
    border: var(--scrollbar-border);
    border-radius: var(--scrollbar-border-radius);
    cursor: default;
    opacity: 100% !important;
    box-sizing: border-box;
    visibility: var(--scrollbar-visibility);
}

.simplebar-vertical .simplebar-scrollbar::before {
    background: var(--scrollbar-v-background);
    box-shadow: var(--scrollbar-v-boxshadow);
    border-right: var(--scrollbar-double-borders);
}

.simplebar-horizontal .simplebar-scrollbar::before {
    background: var(--scrollbar-h-background);
    box-shadow: var(--scrollbar-h-boxshadow);
    border-bottom: var(--scrollbar-double-borders);
}

.simplebar-vertical .simplebar-scrollbar:active::before {
    background: var(--scrollbar-v-pressed-background);
    box-shadow: var(--scrollbar-v-pressed-boxshadow);
}

.simplebar-horizontal .simplebar-scrollbar:active::before {
    background: var(--scrollbar-h-pressed-background);
    box-shadow: var(--scrollbar-v-pressed-boxshadow);
}

.simplebar-track{

    border-radius: var(--scrollbar-track-border-radius);
    pointer-events: all;
    box-sizing: border-box;


    &.simplebar-vertical {
        background: var(--scrollbar-track-v-background);
        box-shadow: var(--scrollbar-track-v-boxshadow);
        border: var(--scrollbar-track-v-border);
        top: calc(var(--scrollbar-overshoot-depth) * -1);
        width: var(--scrollbar-thickness);
        bottom: calc( ((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) + (var(--scrollbar-thickness) - var(--scrollbar-overshoot-depth) ));
    }

    &.simplebar-horizontal {
        left: calc(var(--scrollbar-overshoot-depth) * -1);
        background: var(--scrollbar-track-h-background);
        box-shadow: var(--scrollbar-track-h-boxshadow);
        border: var(--scrollbar-track-h-border);
        height: var(--scrollbar-thickness);
        right: calc( ((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) + (var(--scrollbar-thickness) - var(--scrollbar-overshoot-depth) ));
    }
    
}


 /*generally for vertical only scrollbar can go top to bottom*/
.verticalscroll > .simplebar-track.simplebar-vertical {
    bottom: calc( (((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) - var(--scrollbar-overshoot-depth) ));
}

 /*windowsroll class ensures that scrollbar doesnt go behind the corner button*/
.verticalscroll.cornerscroll > .simplebar-track.simplebar-vertical {
    bottom: calc( ((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) + (var(--scrollbar-thickness) - var(--scrollbar-overshoot-depth) ));
}

 /* horizontal only scrollbar can go top to bottom*/
.horizontalscroll > .simplebar-track.simplebar-horizontal {
    right: calc( (((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) - var(--scrollbar-overshoot-depth) ));
}

 /*windowsroll class ensures that scrollbar doesnt go behind the corner button*/
.horizontalscroll.cornerscroll > .simplebar-track.simplebar-horizontal {
     right: calc( ((var(--scrollbutton-divider-width) + var(--scrollbutton-height)) * 2) + (var(--scrollbar-thickness) - var(--scrollbar-overshoot-depth) ));
}


.simplebar-vertical .simplebar-scrollbar:before {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}


.simplebar-horizontal .simplebar-scrollbar:before {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

/*-------scroll buttons, not part of simplebar----------*/



.scrollbuttoncontainer{  /* scrollbutton container */
    display: flex;
    position: absolute;
    background: var(--scrollbutton-divider-color);
    overflow: hidden;  /* fixes overscroll bug */


    &.h{ 
        
        width: var(--scrollbar-thickness);
        bottom: var(--scrollbar-thickness);
        right: 0;
        z-index: 1000;
        flex-direction: column;

    }

    &.v{ 
        
        height: var(--scrollbar-thickness);
        right: var(--scrollbar-thickness);
        bottom: 0;
        z-index: 1001;
        flex-direction: row;
    }

}

.verticalscroll > .scrollbuttoncontainer.h{ 
        bottom: 0;
}

.verticalscroll.cornerscroll > .scrollbuttoncontainer.h{ 
        bottom: var(--scrollbar-thickness);
}


.horizontalscroll > .scrollbuttoncontainer.v{ 
        right: 0;
}

.horizontalscroll.cornerscroll > .scrollbuttoncontainer.v{ 
        right: var(--scrollbar-thickness);
}



.scrollbutton::after{   /* scrollbutton icon */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--scrollbutton-icon-color);
    clip-path: var(--scrollbutton-icon);

    width: min(var(--scrollbar-thickness), var(--scrollbutton-height));
    height: min(var(--scrollbar-thickness), var(--scrollbutton-height));

    /* centering over parent */

    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 

    top: 0; 
    bottom: 0; 
    margin-top: auto; 
    margin-bottom: auto; 
}



.scrollbutton{    /* scroll buttons */
    position: relative;
    background: var(--scrollbutton-background);
    box-shadow: var(--scrollbutton-boxshadow);
    border: var(--scrollbutton-border);
    border-radius: var(--scrollbutton-border-radius);
    box-sizing: border-box;

    margin-left: var(--scrollbutton-divider-width);  /* these margins create the scrollbutton borders */
    margin-top: var(--scrollbutton-divider-width);
    
    &.h{ 
 
        height: var(--scrollbutton-height); 
        
        &.up::after{
            
        }
        &.dn::after{
            transform: rotate(180deg);

        }
    }

    &.v{ 
 
        width: var(--scrollbutton-height); 
        
        &.lef::after{
            transform: rotate(-90deg);

        }
        &.rig::after{
            transform: rotate(90deg);
        }
    }
}


.scrollbutton:hover:active{
    background: var(--scrollbutton-pressed-background);
    box-shadow: var(--scrollbutton-pressed-boxshadow);

    &::after{
        background-color: var(--scrollbutton-pressed-icon-color);
    }
}