//
// Material Theme Mode
//

$theme-material-colors: (
    "primary":   #3475db, // slightly deeper blue
    "secondary": #6c63ff, // toned-down purple
    "success":   #15b092, // richer green-teal
    "info":      #20bfc0, // softer aqua
    "warning":   #f7a34b, // warmer orange
    "danger":    #d25555, // more vivid red
    "purple":    #7e5fc7, // richer purple
);

@if $theme-material ==true {

    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

    html[data-skin='material'] {
        --#{$prefix}font-sans-serif: "Roboto", sans-serif;
        --#{$prefix}font-family-secondary: "Roboto", sans-serif;

        --#{$prefix}body-font-size: 14px;
        --#{$prefix}body-bg: #f5f6f8;
        --#{$prefix}secondary-bg: #ffffff;

        --#{$prefix}theme-card-border-width: 1px;
        --#{$prefix}theme-card-border-color: transparent;
        --#{$prefix}theme-card-box-shadow: 1px 0.15rem 0.5rem 0 rgba(48, 45, 59, 0.07);
        --#{$prefix}box-shadow: 1px 0.1rem 0.5rem 0 rgba(48, 45, 59, 0.15);
        --#{$prefix}border-radius: 3px;

        --#{$prefix}font-weight-medium: 400;
        --#{$prefix}font-weight-semibold: 500;
        --#{$prefix}font-weight-bold: 600;

        --#{$prefix}font-size-xxs: 11px;
        --#{$prefix}font-size-xs: 12px;
        --#{$prefix}font-size-base: 13px;
        --#{$prefix}font-size-md: 14px;
        --#{$prefix}font-size-lg: 16px;
        --#{$prefix}font-size-xl: 18px;
        --#{$prefix}font-size-xxl: 20px;

        // Menu items
        --#{$prefix}sidenav-item-icon-size:                  1.125rem;
        --#{$prefix}sidenav-item-gap:                        12px;
        --#{$prefix}sidenav-item-padding-x:                  10px;
        --#{$prefix}sidenav-item-padding-y:                  10px;
        --#{$prefix}sidenav-item-font-size:                  0.875rem;
        --#{$prefix}sidenav-item-font-weight:                400;

        // Sub Menu Items
        --#{$prefix}sidenav-sub-item-font-size:              0.85rem;
        --#{$prefix}sidenav-sub-item-font-weight:            400;
        --#{$prefix}sidenav-sub-item-gap:                    4px;
        --#{$prefix}sidenav-sub-item-padding-x:              10px;
        --#{$prefix}sidenav-sub-item-padding-y:              7px;

        // Background Light left-sidebar
        &[data-menu-color='light'] {
            --#{$prefix}sidenav-bg: #{$white};
            --#{$prefix}sidenav-border-color: #{$white};
            --#{$prefix}sidenav-item-color: #{$gray-700};
            --#{$prefix}sidenav-item-hover-color: #3475db;
            --#{$prefix}sidenav-item-hover-bg: #eaf2ff;
            --#{$prefix}sidenav-item-active-color: #3475db;
            --#{$prefix}sidenav-item-active-bg: #eaf2ff;
        }

        // Background Gray left-sidebar
        &[data-menu-color='gray'] {
            --#{$prefix}sidenav-bg:                       #e9ebef;
            --#{$prefix}sidenav-border-color:             #e7e9eb;
            --#{$prefix}sidenav-item-color:               #{$gray-700};
            --#{$prefix}sidenav-item-hover-color:         #3475db;
            --#{$prefix}sidenav-item-hover-bg:          #e8f7f4;
            --#{$prefix}sidenav-item-active-color:        #212b29;
            --#{$prefix}sidenav-item-active-bg:         #e8e8ed;
        }

        // Dark Left Sidebar
        &[data-menu-color='dark'] {
            --#{$prefix}sidenav-bg:                     #28293c;
            --#{$prefix}sidenav-border-color:           #28293c;
            --#{$prefix}sidenav-item-color:             #8495ab;
            --#{$prefix}sidenav-item-hover-color:       #bccee4;
            --#{$prefix}sidenav-item-hover-bg:          #2f3742;
            --#{$prefix}sidenav-item-active-color:      #ced6df;
            --#{$prefix}sidenav-item-active-bg:         #242534;
        }

        // Gradient Menu
        &[data-menu-color='gradient'] {
            --#{$prefix}sidenav-bg:                       #{linear-gradient(135deg, #1e4258, #313144)};
            --#{$prefix}sidenav-border-color:             null;
            --#{$prefix}sidenav-item-color:             #799cb7;
            --#{$prefix}sidenav-item-hover-color:       #bccee4;
            --#{$prefix}sidenav-item-hover-bg:          #2f3742;
            --#{$prefix}sidenav-item-active-color:      #cfdff1;
            --#{$prefix}sidenav-item-active-bg:         #2f4358;
        }

        // Image Menu
        &[data-menu-color='image'] {
            --#{$prefix}sidenav-bg:                       #{linear-gradient(to bottom right, rgba(16,16,30,0.85), #2f434e), url('/public/images/sidenav-bg.jpg') center/cover no-repeat};
            --#{$prefix}sidenav-border-color:             null;
            --#{$prefix}sidenav-item-color:             #799cb7;
            --#{$prefix}sidenav-item-hover-color:       #bccee4;
            --#{$prefix}sidenav-item-hover-bg:          #2f3742;
            --#{$prefix}sidenav-item-active-color:      #cfdff1;
            --#{$prefix}sidenav-item-active-bg:         #1e3447;
        }

        // Dark Mode
        &[data-bs-theme='dark'][data-menu-color='dark'],
        &[data-bs-theme='dark'][data-menu-color='gray'],
        &[data-bs-theme='dark'][data-menu-color='light'] {
            --#{$prefix}sidenav-bg:                     #1e1f27;
            --#{$prefix}sidenav-border-color:           #2c2d38;
            --#{$prefix}sidenav-item-color:             #8495ab;
            --#{$prefix}sidenav-item-hover-color:       #bccee4;
            --#{$prefix}sidenav-item-hover-bg:          #2f3742;
            --#{$prefix}sidenav-item-active-color:      #ced6df;
            --#{$prefix}sidenav-item-active-bg:         #22232c;
        }

        // Light Topbar
        &[data-topbar-color='light'] {
            --#{$prefix}topbar-bg:                      #ffffff;
            --#{$prefix}topbar-item-color:                #{$gray-700};
            --#{$prefix}topbar-item-hover-color:          #3475db;
            --#{$prefix}topbar-search-bg:                 transparent;
            --#{$prefix}topbar-search-border:           #e7e9eb;
        }

        // Gray Topbar
        &[data-topbar-color='gray'] {
            --#{$prefix}topbar-bg:                      #e9ebef;
            --#{$prefix}topbar-item-color:                #{$gray-700};
            --#{$prefix}topbar-item-hover-color:          #3475db;
            --#{$prefix}topbar-search-bg:               #e8e9ef;
            --#{$prefix}topbar-search-border:           #e8e9ef;
        }

        // Dark Topbar
        &[data-topbar-color='dark'] {
            --#{$prefix}topbar-bg:                      #3c4752;
            --#{$prefix}topbar-item-color:              #e9ecf1;
            --#{$prefix}topbar-item-hover-color:        #e0eeff;
            --#{$prefix}topbar-search-bg:               #475460;
            --#{$prefix}topbar-search-border:           #475460;
        }

        // Gradient Topbar
        &[data-topbar-color='gradient'] {
            --#{$prefix}topbar-bg:                        #{linear-gradient(to bottom, #1e4258, #313144)};
            --#{$prefix}topbar-item-color:              rgba(255, 255, 255, 0.7);
            --#{$prefix}topbar-item-hover-color:        #ffffff;
            --#{$prefix}topbar-search-bg:               rgba(255, 255, 255, 0.1);
            --#{$prefix}topbar-search-border:           rgba(255, 255, 255, 0.1);
        }

        // Topbar (Dark Mode)
        &[data-bs-theme='dark'][data-topbar-color='dark'],
        &[data-bs-theme='dark'][data-topbar-color='light'],
        &[data-bs-theme='dark'][data-topbar-color='gray'] {
            --#{$prefix}topbar-bg:                      #252630;
            --#{$prefix}topbar-item-color:              #adb5bf;
            --#{$prefix}topbar-item-hover-color:        #e0eeff;
            --#{$prefix}topbar-search-bg:               #2d2e3c;
            --#{$prefix}topbar-search-border:           #2d2e3c;
        }

        @each $name, $value in $theme-material-colors {
            --#{$prefix}#{$name}: #{$value};
        }

        @each $name, $value in $theme-material-colors {
            --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
        }

        @each $name, $value in $theme-material-colors {
            --#{$prefix}#{$name}-bg-subtle: #{rgba($value, 0.15)};
        }

        @each $name, $value in $theme-material-colors {
            --#{$prefix}#{$name}-border-subtle: #{rgba($value, 0.3)};
        }

        @each $name, $value in $theme-material-colors {
            --#{$prefix}#{$name}-text-emphasis: #{shade-color($value, 25%)};
        }

        // Chart Colors
        --#{$prefix}chart-primary: #3475db; // Main Color
        --#{$prefix}chart-primary-rgb: #{to-rgb(#3475db)};
        --#{$prefix}chart-secondary: #6c63ff; // Secondary Color
        --#{$prefix}chart-secondary-rgb: #{to-rgb(#6c63ff)};
        --#{$prefix}chart-alpha: #15b092; // Success Color
        --#{$prefix}chart-alpha-rgb: #{to-rgb(#15b092)};
        --#{$prefix}chart-beta: #d25555; // Danger Color
        --#{$prefix}chart-beta-rgb: #{to-rgb(#d25555)};
        --#{$prefix}chart-gamma: #f7a34b; // Warning Color
        --#{$prefix}chart-gamma-rgb: #{to-rgb(#f7a34b)};
        --#{$prefix}chart-delta: #20bfc0; // Info Color
        --#{$prefix}chart-delta-rgb: #{to-rgb(#20bfc0)};
        --#{$prefix}chart-zeta: #7e5fc7; // Purple or custom Color
        --#{$prefix}chart-zeta-rgb: #{to-rgb(#7e5fc7)};
        --#{$prefix}chart-gray: #edeff3; // Gray Color
        --#{$prefix}chart-gray-rgb: #{to-rgb(#edeff3)};
        --#{$prefix}chart-dark: #396699; // Primary Dark Color
        --#{$prefix}chart-dark-rgb: #{to-rgb(#396699)};
        --#{$prefix}chart-border-color: #ecf4fc; // Border Color
        --#{$prefix}chart-title-color: #bbcae1; // Title Color
    }

    @if $enable-dark-mode {
        @include color-mode(dark, true) {
            &[data-skin='material'] {
                --#{$prefix}body-bg: #{#17181e};
                --#{$prefix}body-bg-rgb: #{to-rgb(#17181e)};

                --#{$prefix}light: #252630;
                --#{$prefix}light-rgb: #{to-rgb(#252630)};

                --#{$prefix}secondary-bg: #{#1b1c22};
                --#{$prefix}secondary-bg-rgb: #{to-rgb(#1b1c22)};

                --#{$prefix}box-shadow: #{0px 0px 30px rgba(0, 0, 0, 0.3)};

                --#{$prefix}theme-card-border-color: #293036;

                --#{$prefix}tertiary-bg: #252630;

                --#{$prefix}secondary-color: #8391a2;

                --#{$prefix}border-color: #293036;

                --#{$prefix}chart-gray: #40424f;
                --#{$prefix}chart-gray-rgb: #{to-rgb(#40424f)};

                --#{$prefix}chart-border-color: #242c31;
                --#{$prefix}chart-gray: #40424f;
                --#{$prefix}chart-gray-rgb: #{to-rgb(#40424f)};
            }
        }
    }
}