/* order of these files is important and should not be changed */

@import "icons/extension-icons.css";
@import "window-controls/wc-without-tabline.css";
@import "hide-tabline.css";
@import "userChrome-static.css";

:root {
    --dark-0: #151d28;
    --dark-base: #192330;
    --dark-1: #233143;
    --dark-2: #2a3b51;
    --dark-3: #374e6c;
    --dark-4: #3e5879;
    --light-0: #d7dfea;
    --light-base: #afc0d5;
    --light-1: #a1b5ce;
    --light-2: #94abc7;
    --light-3: #87a0c0;
    --light-4: #7996b9;
    --accent: #63cdcf;
    --yellow: #dbc074;
    --green: #5cb8a7;
    --red: #c94f6d;
    --extension-icon-mask: grayscale(85%) invert(75%) sepia(8%) saturate(862%) hue-rotate(173deg) brightness(88%);

    /* expanded width of the sidebar. 
    used for userChrome-static, and hover */
    --sidebar-width: 250px;
    /* initial width of the sidebar. 
    advised not to change since tst css relies on this value*/
    --sidebar-collapsed-width: 60px;

    --dividers: 2px;

    --tl-animation-duration: 200ms;
    /*--tl-tab-background-gradient: */
    /* uncomment and add gradient value for selected tab gradient*/

    /******WINDOW CONTROL PLACEMENT VARS******/
    --wc-vertical-shift: 18px;
    /* larger value moves window controls down,*/
    /* can be negative(moves controls up) */
    /* Experiemntal: 55px if tabline visible, -25px if tabline hidden */
    --wc-left-space: 15px; /* add space to the left of window controls*/
    --wc-right-space: 18px; /* add space to the right of window controls*/
    /* left-space shifts window-controls */
    /* if you want to shift window controls to the left: positive value */
    /* if you want to shift them to the right: smaller or negative value */
    /* right-space shifts rest of the navbar (forward,backward,urlbar,etc.) to the right */
    /* if you want to increase/decrease space between window-controls and navbars: */
    /* set positive/smaller or negative value for right-space*/
}

:root[privatebrowsingmode="temporary"] {
    --dark-0: #1c0e34;
    --dark-base: #20103c;
    --dark-1: #2f1d4e;
    --dark-2: #38225d;
    --dark-3: #4a2d7b;
    --dark-4: #53338a;
    --light-0: #cc6b9c;
    --light-base: #b9407c;
    --light-1: #ab3b73;
    --light-2: #9c3569;
    --light-3: #8d305e;
    --light-4: #7d2b54;
    --accent: #e9207e;
    --yellow: #c9b336;
    --green: #36c987;
    --red: #c9365d;
    --extension-icon-mask: grayscale(85%) invert(13%) sepia(80%) saturate(3107%) hue-rotate(256deg) brightness(84%)
        contrast(93%);
}
