// 
// _theme-mode.scss
// 



/* Root Prefix Variable */
:root {
    --#{$prefix}logo-lg-height:                26px;
    --#{$prefix}logo-sm-height:                24px;

    --#{$prefix}sidebar-width:               250px;
    --#{$prefix}sidebar-width-sm:             75px; 
    --#{$prefix}sidebar-item-icon-size:       18px;
    --#{$prefix}sidebar-item-font-size:       15px;
    --#{$prefix}sidebar-item-padding-x:       15px;
    --#{$prefix}sidebar-item-padding-y:       10px;
    --#{$prefix}sidebar-item-margin-y:       2px;

    --#{$prefix}topbar-height:                 70px;
    --#{$prefix}footer-height:                 60px;
    
    --#{$prefix}input-border-color:             #d8dfe7;
    --#{$prefix}input-focus-border-color:       #b0b0bb;
}


/* Dark Mode only */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] {

    --#{$prefix}border-color: #2f3944;

    --#{$prefix}light: #{$body-tertiary-bg-dark};
    --#{$prefix}dark: #{$body-tertiary-color-dark};

    --#{$prefix}light-rgb: #{to-rgb($body-tertiary-bg-dark)};
    --#{$prefix}dark-rgb: #{to-rgb($body-tertiary-color-dark)};

    // Heading Variable
    --#{$prefix}headings-color: #{$body-color-dark};

    --#{$prefix}input-border-color: #3a4551;
    --#{$prefix}input-focus-border-color: #4a5663;
}


/* Color system - Dark Mode only */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] {

    --#{$prefix}border-color:                   #272f37;

    --#{$prefix}light:                           #{$body-tertiary-bg-dark};
    --#{$prefix}dark:                            #{$body-tertiary-color-dark};
    
    --#{$prefix}light-rgb:                       #{to-rgb($body-tertiary-bg-dark)};
    --#{$prefix}dark-rgb:                        #{to-rgb($body-tertiary-color-dark)};

    // Heading Variable
    --#{$prefix}headings-color:                  #{$body-color-dark};

    --#{$prefix}input-border-color:             #3a4551;
    --#{$prefix}input-focus-border-color:       #4a5663;
}


/* Main sidebar Light */
html[data-sidebar-color="light"]{
    --#{$prefix}sidebar-bg:                               #ffffff;
    --#{$prefix}sidebar-item-color:                       #6e708c;
    --#{$prefix}sidebar-item-hover-bg:                    #f4f3f6;
    --#{$prefix}sidebar-item-hover-color:                 #3d4756;
    --#{$prefix}sidebar-border-color:                     #eaedf1;
}


/* Main sidebar Dark */
html[data-sidebar-color="dark"] {
    --#{$prefix}sidebar-bg:                               #393f4a;
    --#{$prefix}sidebar-item-color:                       #afb9cf;
    --#{$prefix}sidebar-item-hover-bg:                    #4697ce;
    --#{$prefix}sidebar-item-hover-color:                 #{$white};
    --#{$prefix}sidebar-border-color:                     #272f37;
}


/* Main sidebar Dark (Dark Mode Only) */
html[data-bs-theme="dark"][data-sidebar-color="dark"],
html[data-bs-theme="dark"][data-sidebar-color="light"] {
    --#{$prefix}sidebar-bg:                               #1d2329;
    --#{$prefix}sidebar-item-color:                       #afb9cf;
    --#{$prefix}sidebar-item-hover-bg:                    #2a3139;
    --#{$prefix}sidebar-item-hover-color:                 #{$white};
    --#{$prefix}sidebar-border-color:                     #272f37;
}


/* Topbar Light */
html[data-topbar-color="light"] {
    --#{$prefix}topbar-bg:                                 #ffffff;
    --#{$prefix}topbar-item-color:                         #707793;
    --#{$prefix}topbar-search-bg:                          #f8f7fa;
}


/* Topbar Dark */
html[data-topbar-color="dark"] {
    --#{$prefix}topbar-bg:                                 #393f4a;
    --#{$prefix}topbar-item-color:                         #afb9cf;
    --#{$prefix}topbar-search-bg:                          #424957;
}


/* Topbar Dark (Dark Mode Only) */
html[data-bs-theme="dark"][data-topbar-color="dark"], 
html[data-bs-theme="dark"][data-topbar-color="light"] {
    --#{$prefix}topbar-bg:                                 #1d2329;
    --#{$prefix}topbar-item-color:                         #afb9cf;
    --#{$prefix}topbar-search-bg:                          #232a31;
}