// 
// _root.scss
//

// Google fonts
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root {

    // Logo
    --#{$prefix}logo-lg-height:                         26px;
    --#{$prefix}logo-sm-height:                         26px;

    // Sidebar
    --#{$prefix}sidenav-width:                          220px;
    --#{$prefix}sidenav-width-md:                       160px;
    --#{$prefix}sidenav-width-sm:                       75px;

    // Topbar
    --#{$prefix}topbar-height:                           60px;

    // Menu items
    --#{$prefix}sidenav-item-icon-size:                  16px;
    --#{$prefix}sidenav-item-gap:                        8px;
    --#{$prefix}sidenav-item-padding-x:                  20px;
    --#{$prefix}sidenav-item-padding-y:                  8px;
    --#{$prefix}sidenav-item-font-size:                  0.8125rem;
    --#{$prefix}sidenav-item-font-weight:                500;

    // Sub Menu Items
    --#{$prefix}sidenav-sub-item-font-size:              0.8125rem;
    --#{$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:              6px;

    --#{$prefix}theme-card-border-width:                 1px;
    --#{$prefix}theme-card-box-shadow:                   none;
    --#{$prefix}theme-card-border-color:                 var(--#{$prefix}border-color);

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

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

    --#{$prefix}chart-primary:                           #212e3a;
    --#{$prefix}chart-primary-rgb:                       #{to-rgb(#212e3a)};
    --#{$prefix}chart-secondary:                         #424D58;
    --#{$prefix}chart-secondary-rgb:                     #{to-rgb(#424D58)};
    --#{$prefix}chart-gray:                              #e9eaeb;
    --#{$prefix}chart-gray-rgb:                          #{to-rgb(#e9eaeb)};
    --#{$prefix}chart-dark:                              #1A252E;
    --#{$prefix}chart-dark-rgb:                          #{to-rgb(#1A252E)};
    --#{$prefix}chart-border-color:                      #ecf4fc;
    --#{$prefix}chart-title-color:                      #bbcae1;
}

[data-bs-theme="dark"]{
    --#{$prefix}chart-primary:                           #909CA7;
    --#{$prefix}chart-primary-rgb:                       #{to-rgb(#909CA7)};
    --#{$prefix}chart-secondary:                         #B7C3CE;
    --#{$prefix}chart-secondary-rgb:                     #{to-rgb(#B7C3CE)};
    --#{$prefix}chart-gray:                              #40424f;
    --#{$prefix}chart-gray-rgb:                          #{to-rgb(#40424f)};
    --#{$prefix}chart-dark:                              #ffffff;
    --#{$prefix}chart-dark-rgb:                          #{to-rgb(#ffffff)};
    --#{$prefix}chart-border-color:                      #242c31;
}