// 
// Default Theme Mode
//


@if $theme-default ==true {

    // Background Light left-sidebar
    html[data-menu-color="light"] {
        --#{$prefix}sidenav-bg:                       #{$white};
        --#{$prefix}sidenav-border-color:             #{$gray-300};
        --#{$prefix}sidenav-item-color:               #{$gray-700};
        --#{$prefix}sidenav-item-hover-color:         #{$primary};
        --#{$prefix}sidenav-item-hover-bg:          null;
        --#{$prefix}sidenav-item-active-color:        #{$primary};
        --#{$prefix}sidenav-item-active-bg:         null;
    }

    // Dark Left Sidebar
    html[data-menu-color="dark"] {
        --#{$prefix}sidenav-bg:                     #23303c;
        --#{$prefix}sidenav-border-color:           #23303c;
        --#{$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:         #1c262f;
    }

    // Background Gray left-sidebar
    html[data-menu-color="gray"] {
        --#{$prefix}sidenav-bg:                       #e9ebef;
        --#{$prefix}sidenav-border-color:             #e7e9eb;
        --#{$prefix}sidenav-item-color:               #{$gray-700};
        --#{$prefix}sidenav-item-hover-color:         #{$primary};
        --#{$prefix}sidenav-item-hover-bg:          #dbdfe7;
        --#{$prefix}sidenav-item-active-color:        #212b29;
        --#{$prefix}sidenav-item-active-bg:         #dbdfe7;
    }

    // Gradient Menu
    html[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
    html[data-menu-color="image"] {
        --#{$prefix}sidenav-bg:                       #{linear-gradient(to bottom right, rgba(16,16,30,0.85), #2f434e), url('../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:          #253542;
        --#{$prefix}sidenav-item-active-color:      #cfdff1;
        --#{$prefix}sidenav-item-active-bg:         #253542;
    }

    // Dark Mode
    html[data-bs-theme="dark"][data-menu-color="dark"],
    html[data-bs-theme="dark"][data-menu-color="gray"],
    html[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
    html[data-topbar-color="light"] {
        --#{$prefix}topbar-bg:                      #ffffff;
        --#{$prefix}topbar-item-color:                #{$gray-700};
        --#{$prefix}topbar-item-hover-color:          #{$primary};
        --#{$prefix}topbar-search-bg:                 transparent;
        --#{$prefix}topbar-search-border:           #e7e9eb;
    }

    // Gray Topbar
    html[data-topbar-color="gray"] {
        --#{$prefix}topbar-bg:                      #e9ebef;
        --#{$prefix}topbar-item-color:                #{$gray-700};
        --#{$prefix}topbar-item-hover-color:          #{$primary};
        --#{$prefix}topbar-search-bg:               #e0e1e9;
        --#{$prefix}topbar-search-border:           #e0e1e9;
    }

    // Dark Topbar
    html[data-topbar-color="dark"] {
        --#{$prefix}topbar-bg:                      #38414a;
        --#{$prefix}topbar-item-color:              #adb5bf;
        --#{$prefix}topbar-item-hover-color:        #e0eeff;
        --#{$prefix}topbar-search-bg:               #3f4952;
        --#{$prefix}topbar-search-border:           #3f4952;
    }

    // Gradient Topbar
    html[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)
    html[data-bs-theme="dark"][data-topbar-color="light"],
    html[data-bs-theme="dark"][data-topbar-color="dark"],
    html[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;
    }
}

/* Dark Mode */
@if $enable-dark-mode {
    @include color-mode(dark, true) {
        --#{$prefix}light:                     #252630;
        --#{$prefix}light-rgb:                   #{to-rgb(#252630)};
        --#{$prefix}dark:                      #4b4d5c;
        --#{$prefix}dark-rgb:                    #{to-rgb(#4b4d5c)};
        --#{$prefix}box-shadow:                  #{0px 0px 30px rgba(0, 0, 0, 0.3)};
    }
}