:root {
    --note-bg-color: rgb(255, 250, 234);
    --muted-color: #{$muted-color};
    --bs-bg-opacity: 1;
    --bs-border-color: #{$border-color};
    --border-color: #{$border-color};
    --white: #{$white};
    --warning: #{$warning};
    --indigo: #{$indigo};
    --primary: #{$primary};
    --secondary: #{$secondary};
    --success: #{$success};
    --info: #{$info};
    --danger: #{$danger};
    --light: #{$light};
    --dark: #{$dark};
    --round-default: 10px;
    --round-10: 10px;
    --transition-duration: 0.25s;
    --jumbotron: #dae3ef;
    --base-color: #{$base-color};
    --navbar-bg: #{$white};
    --sidebar-bg: #{$white};
    --font-color: #323232;
    --font-hover-color: darken(#323232, 5%);
    --menubar-font-color: #505050;
    --input-search-box-border: #{$light-color};
    --dropdown-menu-bg: #{$white};
    --dropdown-item-hover-bg: var(--base-color);
    --card-color: #{$white};
    --box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
    --navbar-box-shadow: 9px 2px 10px rgba(0, 0, 0, 0.05);
    --navbar-primary-bg: #{$white};
    --sidebar-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
    --vertical-tab-header-bg: #fbfcff;
    --vertical-tab-icon-shadow: none;
    --vertical-tab-icon-bg: #{$white};
    --form-control-bg: #{$base-color};
    --select-items-hover-bg: #{darken($base-color, 5%)};
    --accordion-header-bg: #{$base-color};
    --default-custom-control-bg: #{$white};
    --btn-light-bg: #{$white};
    --btn-secondary-bg: #{$secondary-color};
    --btn-secondary-hover-bg: #{darken($secondary-color, 10%)};
    --icon-hover-bg: #{lighten($brand-color, 35%)};
    --authentication-form-bg: #{$white};
    --btn-filter-bg: #{$white};
    --range-slider-baseline-bg: #{$secondary-color};
    --calendar-bg: #{$white};
    --bg-x-icon: #{lighten($brand-color, 35%)};
    --shadow-x-icon: none;
    --search-box-bg: #{$white};
    --bg-input-readonly: #e9ecef;
    --chips-bg: #{darken($base-color, 7%)};
    --tab-step-before-bg: #{$white};
    --time-picker-bg: #{$white};
    --modal-header-footer-bg: #{$white};
    --modal-body-bg: #{$white};
    --avaters-border-color: #{$white};
    --avatars-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.2);
    --success-toast-bg: #{$sidebar-dark-bg};
    --scrollbar-thumb-color: #{lighten($primary, 30)};
    --scrollbar-thumb-hover-color: #{lighten($primary, 20)};
    --menu-title-shadow: none;
    --submenu-shadow: none;
    --select-arrow: url(/public/assets/images/chevron-down.svg);
    --select-arrow-btn-secondary: url(/public/assets/images/chevron-down.svg);
    --close-cursore: url(/public/assets/images/close-cursor-light.png);
    --modal-close-icon: url(/public/assets/images/x-light.svg);
    --not-found-opacity: 1;
    --search-result-dropdown-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
    --kanban-scrollbar-track: #{lighten($sidebar-scrollbar-thumb-color, 55%)};
    --kanban-scrollbar-thumb: #{lighten($sidebar-scrollbar-thumb-color, 45%)};
    --vue-toaster-bg: rgba(0, 0, 0, 0.8);
    --table-striped-bg: #{lighten($base-color, 1%)};
    --secondary-button-color: #{lighten($secondary, 35%)};
    --secondary-button-font-color: var(--black);
    --product-search-bg: #fcfcfc;
    --product-search-control-bg: var(--white);
    --notification-color: var(--dark);
    --date-time: var(--btn-secondary-bg);
    --template-variables: #f5f7fe;
    --import-board: #f5f7fe;
    --sidebar-open-overlay-color: linear-gradient(
        70deg,
        rgb(22 28 36 / 45%),
        #161c24c9
    );
    --table-th-font-color: rgb(99, 115, 129);
    --table-thead-bg-color: rgb(244, 246, 248);
    --top-bar: rgba(255, 255, 255, 0.8);
    --dropzone-bg-color: #f1faff;
    --icon-shadow: rgba(0, 0, 0, 0.1);
}

[theme="dark"] {
    --note-bg-color: #333740;
    --muted-color: #39424e !important;
    --base-color: #{darken($sidebar-dark-bg, 7%)};
    --navbar-bg: #{darken($sidebar-dark-bg, 3%)};
    --sidebar-bg: #{darken($sidebar-dark-bg, 3%)};
    --font-color: #{darken($white, 20%)};
    --font-hover-color: darken($white, 25%);
    --menubar-font-color: #bfc4d4;
    --border-color: #{lighten($sidebar-dark-bg, 5%)};
    --bs-border-color: #{lighten($sidebar-dark-bg, 5%)};
    --input-search-box-border: transparent;
    --dropdown-menu-bg: #{darken($sidebar-dark-bg, 3%)};
    --dropdown-item-hover-bg: var(--base-color);
    --card-color: #{darken($sidebar-dark-bg, 2%)};
    --box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    --navbar-box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.09);
    --navbar-primary-bg: #{$sidebar-dark-bg};
    --sidebar-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    --vertical-tab-header-bg: #{lighten($sidebar-dark-bg, 0.2%)};
    --vertical-tab-icon-shadow: none;
    --vertical-tab-icon-bg: #{darken($sidebar-dark-bg, 2%)};
    --form-control-bg: #{darken($sidebar-dark-bg, 5%)};
    --select-items-hover-bg: var(--base-color);
    --accordion-header-bg: #{darken($sidebar-dark-bg, 5%)};
    --default-custom-control-bg: #{darken($sidebar-dark-bg, 2%)};
    --btn-light-bg: #{darken($sidebar-dark-bg, 2%)};
    --btn-secondary-bg: #414244;
    --btn-secondary-hover-bg: #{darken(#414244, 10%)};
    --icon-hover-bg: var(--base-color);
    --authentication-form-bg: #{darken($sidebar-dark-bg, 2%)};
    --btn-filter-bg: #{darken($sidebar-dark-bg, 2%)};
    --range-slider-baseline-bg: var(--base-color);
    --calendar-bg: #{darken($sidebar-dark-bg, 2%)};
    --bg-x-icon: #{darken($sidebar-dark-bg, 2%)};
    --shadow-x-icon: 0px 0px 10px rgba(0, 0, 0, 0.5);
    --search-box-bg: #{darken($sidebar-dark-bg, 5%)};
    --bg-input-readonly: #{darken($sidebar-dark-bg, 1%)};
    --chips-bg: #{darken($sidebar-dark-bg, 2%)};
    --tab-step-before-bg: #{darken($sidebar-dark-bg, 2%)};
    --time-picker-bg: #{darken($sidebar-dark-bg, 2%)};
    --modal-header-footer-bg: #{darken($sidebar-dark-bg, 1%)};
    --modal-body-bg: #{darken($sidebar-dark-bg, 2%)};
    --avaters-border-color: var(--sidebar-bg);
    --avatars-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.2);
    --success-toast-bg: #{$sidebar-dark-bg};
    --scrollbar-thumb-color: #{$sidebar-scrollbar-thumb-color};
    --scrollbar-thumb-hover-color: #{$sidebar-scrollbar-thumb-color};
    --menu-title-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.3);
    --submenu-shadow: 2px 1px 1px 0px rgba(0, 0, 0, 0.3);
    --select-arrow: url(/public/assets/images/chevron-down-dark.svg);
    --select-arrow-btn-secondary: url(/public/assets/images/chevron-down-btn-secondary.svg);
    --close-cursore: url(/public/assets/images/close-cursor-dark.png);
    --modal-close-icon: url(/public/assets/images/x-dark.svg);
    --not-found-opacity: 0.7;
    --search-result-dropdown-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
    --kanban-scrollbar-track: #{lighten($sidebar-scrollbar-thumb-color, 10%)};
    --kanban-scrollbar-thumb: #{darken($sidebar-scrollbar-thumb-color, 5%)};
    --vue-toaster-bg: rgba(39, 43, 53, 0.9);
    --table-striped-bg: #{darken($sidebar-dark-bg, 3%)};
    --secondary-button-color: #{$secondary};
    --secondary-button-font-color: var(--white);
    --product-search-bg: #{darken($sidebar-dark-bg, 3%)};
    --product-search-control-bg: #{darken($sidebar-dark-bg, 5%)};
    --notification-color: var(--white);
    --date-time: #8d8d8d;
    --template-variables: var(--form-control-bg);
    --jumbotron: var(--card-color);
    --import-board: var(--card-color);
    --sidebar-open-overlay-color: #00000075;
    --table-th-font-color: rgb(149 149 149);
    --table-thead-bg-color: rgb(46 50 62);
    --top-bar: rgb(39 43 53 / 85%);
    --dropzone-bg-color: #162036;
    --icon-shadow: rgba(61, 61, 61, 0.638);
}
