@import 'variables';

$lightBackground: hsl(255, 0%, 100%);
$lightHighlight: hsl(255, 0%, 95%);
$lightDivider: hsl(255, 0%, 88%);
$lightShadow: #00000029;
$lightTextColor: $text-color;

$light: (
    background: $lightBackground,
    highlight: $lightHighlight,

    divider: $lightDivider,
    navShadow: $lightShadow,
    linkUnderlineInactive: $lightDivider,
    tableHoverBackground: $lightHighlight,
    textColor: $lightTextColor,

    // accordion
    accordionBackground: hsl(255, 0%, 98%),
    accordionHeaderBackground: $lightHighlight,

    // cards
    cardShadow: $lightShadow,
    cardBorder: $lightDivider,
    cardBackground: $lightBackground,

    // file input
    fileInputIcon: $lightDivider,
    fileInputBorder: $lightDivider,
    fileInputHoverText: $blue-light-1,
    fileInputHoverIcon: $blue-light-4,
    fileInputBackground: $lightHighlight,

    // modal
    modalBackground: $lightBackground,
    modalFooterBorder: $lightDivider,

    // sidenav
    sidenavHover: #00000029,
    sidenavTrigger: $lightTextColor,
    sidenavActiveBackground: #00000055,
    sidenavTriggerBackground: transparent,

    scrollbarBackground: $lightShadow,

    // text input
    textInputColor: $lightTextColor,
    textInputBorder: $lightDivider,
    textInputBackground: $lightHighlight,
);

$darkBackground: hsl(0, 0%, 9%);
$darkHighlight: hsl(0, 0%, 13%);
$darkDivider: hsl(0, 0%, 28%);
$darkShadow: #ffffff29;
$darkTextColor: $text-color-dark;

$dark: (
    background: $darkBackground,
    highlight: $darkHighlight,

    divider: $darkDivider,
    navShadow: $darkShadow,
    linkUnderlineInactive: $darkDivider,
    tableHoverBackground: $darkHighlight,
    textColor: $darkTextColor,

    // accordion
    accordionBackground: hsl(0, 0%, 11%),
    accordionHeaderBackground: $darkHighlight,

    // cards
    cardShadow: $darkShadow,
    cardBorder: $darkDivider,
    cardBackground: $darkBackground,

    // file input
    fileInputIcon: $darkDivider,
    fileInputBorder: $darkDivider,
    fileInputHoverText: $blue-dark-1,
    fileInputHoverIcon: $blue-dark-4,
    fileInputBackground: $darkHighlight,

    // modal
    modalBackground: $darkBackground,
    modalFooterBorder: $darkDivider,

    // sidenav
    sidenavHover: #00000020,
    sidenavTrigger: $darkTextColor,
    sidenavActiveBackground: #00000035,
    sidenavTriggerBackground: transparent,
    
    // scrollbar
    scrollbarBackground: $darkShadow,

    // text input
    textInputColor: white,
    textInputBorder: $darkDivider,
    textInputBackground: $darkHighlight,
);

$darkBlueBackground: hsl(208, 58%, 9%);
$darkBlueHighlight: hsl(208, 58%, 14%);
$darkBlueDivider: hsl(208, 30%, 38%);
$darkBlueShadow: #2196F340;

$darkBlue: (
    background: $darkBlueBackground,
    highlight: $darkBlueHighlight,

    divider: $darkBlueDivider,
    navShadow: $darkBlueShadow,
    linkUnderlineInactive: $darkBlueDivider,
    tableHoverBackground: #2196f329,
    textColor: $text-color-dark,

    // accordion
    accordionBackground: hsl(208, 58%, 11%),
    accordionHeaderBackground: $darkBlueHighlight,

    // cards
    cardShadow: $darkBlueShadow,
    cardBorder: $darkBlueDivider,
    cardBackground: $darkBlueBackground,

    // file input
    fileInputIcon: $darkBlueDivider,
    fileInputBorder: $darkBlueDivider,
    fileInputHoverText: $blue-dark-1,
    fileInputHoverIcon: $blue-dark-4,
    fileInputBackground: $darkBlueHighlight,

    // modal
    modalBackground: $darkBlueBackground,
    modalFooterBorder: $darkBlueDivider,

    // sidenav
    sidenavHover: #2196F320,
    sidenavTrigger: $blue,
    sidenavActiveBackground: #2196F335,
    sidenavTriggerBackground: transparent,
    
    // scrollbar
    scrollbarBackground: #2196F340,

    // text input
    textInputColor: white,
    textInputBorder: $darkBlueDivider,
    textInputBackground: $darkBlueHighlight,
);

$darkGreenBackground: hsl(122, 39%, 9%);
$darkGreenHighlight: hsl(122, 39%, 13%);
$darkGreenDivider: hsl(122, 30%, 30%);
$darkGreenShadow: #4CAF5030;

$darkGreen: (
    background: $darkGreenBackground,
    highlight: $darkGreenHighlight,

    divider: $darkGreenDivider,
    navShadow: $darkGreenShadow,
    linkUnderlineInactive: $darkGreenDivider,
    tableHoverBackground: #4caf5029,
    textColor: $text-color-dark,

    // accordion
    accordionBackground: hsl(122, 39%, 11%),
    accordionHeaderBackground: $darkGreenHighlight,

    // cards
    cardShadow: $darkGreenShadow,
    cardBorder: $darkGreenDivider,
    cardBackground: $darkGreenBackground,

    // file input
    fileInputIcon: $darkGreenDivider,
    fileInputBorder: $darkGreenDivider,
    fileInputHoverText: $green-dark-1,
    fileInputHoverIcon: $green-dark-4,
    fileInputBackground: $darkGreenHighlight,

    // modal
    modalBackground: $darkGreenBackground,
    modalFooterBorder: $darkGreenDivider,

    // sidenav
    sidenavHover: #4CAF5020,
    sidenavTrigger: $green,
    sidenavActiveBackground: #4CAF5035,
    sidenavTriggerBackground: transparent,
    
    // scrollbar
    scrollbarBackground: $darkGreenShadow,

    // text input
    textInputColor: white,
    textInputBorder: $darkGreenDivider,
    textInputBackground: $darkGreenHighlight,
);


$themes: (
    light: (
        textColor: map-get($light, textColor),
        backgroundColor: map-get($light, 'background'),
        
        divider: map-get($light, divider),
        navShadow: map-get($light, navShadow),
        linkUnderlineInactive: map-get($light, fileInput),
        tableHoverBackground: map-get($light, tableHoverBackground),
        
        accordionBackground: map-get($light, accordionBackground),
        accordionHeaderBackground: map-get($light, accordionHeaderBackground),
        
        cardBorder: map-get($light, cardBorder),
        cardBackground: map-get($light, cardBackground),
        cardLoadingBackground: #ffffff89,
        cardShadow: map-get($light, cardShadow),

        // file input
        fileInputIcon: map-get($light, fileInputIcon),
        fileInputBorder: map-get($light, fileInputBorder),
        fileInputHoverText: map-get($light, fileInputHoverText),
        fileInputHoverIcon: map-get($light, fileInputHoverIcon),
        fileInputBackground: map-get($light, fileInputBackground),

        modalBackground: map-get($light, modalBackground),
        modalFooterBorder: map-get($light, modalFooterBorder),
        
        sidenavHover: map-get($light, sidenavHover),
        sidenavBackground: map-get($light, 'highlight'),
        sidenavTrigger: map-get($light, sidenavTrigger),
        sidenavActiveBackground: map-get($light, sidenavActiveBackground),
        sidenavTriggerBackground: map-get($light, sidenavTriggerBackground),

        scrollbarBackground: map-get($light, scrollbarBackground),
        
        // text input
        textInputColor: map-get($light, textInputColor),
        textInputBorder: map-get($light, textInputBorder),
        textInputBackground: map-get($light, textInputBackground),
    ),
    dark: (
        textColor: map-get($dark, textColor),
        backgroundColor: map-get($dark, 'background'),
        
        divider: map-get($dark, divider),
        navShadow: map-get($dark, navShadow),
        linkUnderlineInactive: map-get($dark, fileInput),
        tableHoverBackground: map-get($dark, tableHoverBackground),
        
        accordionBackground: map-get($dark, accordionBackground),
        accordionHeaderBackground: map-get($dark, accordionHeaderBackground),
        
        cardBorder: map-get($dark, cardBorder),
        cardBackground: map-get($dark, cardBackground),
        cardLoadingBackground: #ffffff69,
        cardShadow: map-get($dark, cardShadow),

        // file input
        fileInputIcon: map-get($dark, fileInputIcon),
        fileInputBorder: map-get($dark, fileInputBorder),
        fileInputHoverText: map-get($dark, fileInputHoverText),
        fileInputHoverIcon: map-get($dark, fileInputHoverIcon),
        fileInputBackground: map-get($dark, fileInputBackground),

        modalBackground: map-get($dark, modalBackground),
        modalFooterBorder: map-get($dark, modalFooterBorder),
        
        sidenavHover: map-get($dark, sidenavHover),
        sidenavBackground: map-get($dark, 'highlight'),
        sidenavTrigger: map-get($dark, sidenavTrigger),
        sidenavActiveBackground: map-get($dark, sidenavActiveBackground),
        sidenavTriggerBackground: map-get($dark, sidenavTriggerBackground),

        scrollbarBackground: map-get($dark, scrollbarBackground),
        
        // text input
        textInputColor: map-get($dark, textInputColor),
        textInputBorder: map-get($dark, textInputBorder),
        textInputBackground: map-get($dark, textInputBackground),
    ),
    dark-blue: (
        textColor: map-get($darkBlue, textColor),
        backgroundColor: map-get($darkBlue, 'background'),
        
        divider: map-get($darkBlue, divider),
        navShadow: map-get($darkBlue, navShadow),
        linkUnderlineInactive: map-get($darkBlue, fileInput),
        tableHoverBackground: map-get($darkBlue, tableHoverBackground),
        
        
        accordionBackground: map-get($darkBlue, accordionBackground),
        accordionHeaderBackground: map-get($darkBlue, accordionHeaderBackground),
        
        
        cardBorder: map-get($darkBlue, cardBorder),
        cardBackground: map-get($darkBlue, cardBackground),
        cardLoadingBackground: #ffffff69,
        cardShadow: map-get($darkBlue, cardShadow),

        // file input
        fileInputIcon: map-get($darkBlue, fileInputIcon),
        fileInputBorder: map-get($darkBlue, fileInputBorder),
        fileInputHoverText: map-get($darkBlue, fileInputHoverText),
        fileInputHoverIcon: map-get($darkBlue, fileInputHoverIcon),
        fileInputBackground: map-get($darkBlue, fileInputBackground),

        

        
        modalBackground: map-get($darkBlue, modalBackground),
        modalFooterBorder: map-get($darkBlue, modalFooterBorder),
        
        
        sidenavHover: map-get($darkBlue, sidenavHover),
        sidenavBackground: map-get($darkBlue, 'highlight'),
        sidenavTrigger: map-get($darkBlue, sidenavTrigger),
        sidenavActiveBackground: map-get($darkBlue, sidenavActiveBackground),
        sidenavTriggerBackground: map-get($darkBlue, sidenavTriggerBackground),

        scrollbarBackground: map-get($darkBlue, scrollbarBackground),
        
        // text input
        textInputColor: map-get($darkBlue, textInputColor),
        textInputBorder: map-get($darkBlue, textInputBorder),
        textInputBackground: map-get($darkBlue, textInputBackground),
    ),
    dark-green: (
        textColor: map-get($darkGreen, textColor),
        backgroundColor: map-get($darkGreen, 'background'),
        
        divider: map-get($darkGreen, divider),
        navShadow: map-get($darkGreen, navShadow),
        linkUnderlineInactive: map-get($darkGreen, fileInput),
        tableHoverBackground: map-get($darkGreen, tableHoverBackground),
        
        accordionBackground: map-get($darkGreen, accordionBackground),
        accordionHeaderBackground: map-get($darkGreen, accordionHeaderBackground),
        
        cardBorder: map-get($darkGreen, cardBorder),
        cardBackground: map-get($darkGreen, cardBackground),
        cardLoadingBackground: #ffffff69,
        cardShadow: map-get($darkGreen, cardShadow),

        // file input
        fileInputIcon: map-get($darkGreen, fileInputIcon),
        fileInputBorder: map-get($darkGreen, fileInputBorder),
        fileInputHoverText: map-get($darkGreen, fileInputHoverText),
        fileInputHoverIcon: map-get($darkGreen, fileInputHoverIcon),
        fileInputBackground: map-get($darkGreen, fileInputBackground),

        modalBackground: map-get($darkGreen, modalBackground),
        modalFooterBorder: map-get($darkGreen, modalFooterBorder),
        
        sidenavHover: map-get($darkGreen, sidenavHover),
        sidenavBackground: map-get($darkGreen, 'highlight'),
        sidenavTrigger: map-get($darkGreen, sidenavTrigger),
        sidenavActiveBackground: map-get($darkGreen, sidenavActiveBackground),
        sidenavTriggerBackground: map-get($darkGreen, sidenavTriggerBackground),

        scrollbarBackground: map-get($darkGreen, scrollbarBackground),
        
        // text input
        textInputColor: map-get($darkGreen, textInputColor),
        textInputBorder: map-get($darkGreen, textInputBorder),
        textInputBackground: map-get($darkGreen, textInputBackground),
    )
);