//TODO: Can this be solved with CSS-Variables?
//TODO: Remove all references to Fluid Type if this is not used
//Fluid Type
$min_width: 320px; 
$max_width: 1200px;

:root {
    //////////////
    /////FONT/////
    //////////////


    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI","Roboto", "Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    // --font-family:
    //     // Safari for OS X and iOS (San Francisco)
    //     -apple-system,
    //     // Chrome < 56 for OS X (San Francisco)
    //     BlinkMacSystemFont,
    //     // Windows
    //     "Segoe UI",
    //     // Android
    //     "Roboto",
    //     // Basic web fallback
    //     "Helvetica Neue", Arial, sans-serif,
    //     // Emoji fonts
    //     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    //////////////
    /////PANEL////
    //////////////

    //--panel-color-h: 5;
    //--panel-color-s: 70%;
    //--panel-color-l: 99%;
    --default-bg-color: hsl(
        var(--panel-color-h),
        var(--panel-color-s),
        var(--panel-color-l));

    // FONT ON PANEL
    --contrastThreshold: 60%;
    --switch: calc((var(--panel-color-l) - var(--contrastThreshold)) * -100);
    --font-color: hsl(
        var(--panel-color-h),
        0%, 
        var(--switch));

    --font-color-opacity-60: hsla(
        var(--panel-color-h),
        0%, 
        var(--switch),
        0.6);

    //////////////
    /////MENU/////
    //////////////

    --menu-color-h: 270;
    --menu-color-s: 70%;
    --menu-color-l: 50%;

    --menu-bg-color: hsl(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l));

    --menu-bg-color-lighten-50: hsla(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l),
        0.75);

    --menu-bg-color-lighten-25: hsla(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l),
        0.25);

    --menu-bg-color-lighten-15: hsla(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l),
        0.15);

    --menu-bg-color-lighten-5: hsla(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l),
        0.05);

    --menu-bg-color-lighten-2: hsla(
        var(--menu-color-h),
        var(--menu-color-s),
        var(--menu-color-l),
        0.02);

    --switch-sec-col: calc(
        (var(--menu-color-l) - var(--contrastThreshold)) * -100);

    --menu-sec-color-angle: var(--menu-color-h);
    --menu-sec-color-sat: var(--menu-color-s);
    --menu-sec-color-lig: var(--switch-sec-col);
    --menu-sec-color-a: 0.1;

    --menu-sec-color: hsla(
        var(--menu-sec-color-angle),
        var(--menu-sec-color-sat),
        var(--menu-sec-color-lig),
        var(--menu-sec-color-a)
    );
    --menu-sec-hover-color: hsla(
        var(--menu-sec-color-angle),
        var(--menu-sec-color-sat),
        calc(var(--menu-sec-color-lig) - 0%),
        calc(var(--menu-sec-color-a) / 1.5)
    );

    --menu-sec-color-less-opacity: hsla(
        var(--menu-sec-color-angle),
        var(--menu-sec-color-sat),
        var(--menu-sec-color-lig),
        1
    );
    //FONT ON MENU
    --switch-menu-font: calc((var(--menu-color-l) - var(--contrastThreshold)) * -100);
    --menu-font-color: hsl(211, 50%, var(--switch-menu-font));

    // BRAND
    --sidebar-brand-color: var(--menu-font-color);

    --menu-ul-li-background-color: hsla(
        var(--menu-sec-color-angle),
        var(--menu-sec-color-sat),
        var(--menu-sec-color-lig),
        0.04
    );
    --menu-ul-ul-background-color: var(--menu-ul-li-background-color);

    //Askellastyler
    //--askellastyler-bg-color: hsla(var(--panel-color-h), var(--panel-color-s), calc(var(--panel-color-l) - 10%), 0.3);

    //MISC
    --hamburger-color: var(--font-color);

    //HEADER-HR-COLOR
    --col-side: var(--default-bg-color);
    --col-middle: var(--font-color);

    //WEBKIT-SCROLLBAR-COLORS
    --webkit-scrollbar-track-color: #f1f1f1;
    --webkit-scrollbar-thumb: hsl(0, 0%, 50%);
    --webkit-scrollbar-thumb-hover: hsl(0, 0%, 35%);

    // --link-color-h: 250;
    // --link-color-s: 70%;
    // --link-color-l: 50%;

    --link-color: hsl(
        var(--link-color-h),
        var(--link-color-s),
        var(--link-color-l));
        
    --link-color-hover: hsl(
        var(--link-color-h),
        var(--link-color-s),
        calc(var(--link-color-l) - 15%));
        // TODO: decide if you like to style visited links. 
    --link-color-visited: hsl(
        calc(var(--link-color-h) + 0),
        var(--link-color-s),
        var(--link-color-l)); 
    --menu-width: 320px;
}