
:root {
  --sidebar-bg-color: #{$dark-blue};
  --main-bg-color: #{$white};
  --breadcrumbs-color: #{$dark-blue};
  --default-text-color: #{$black};
  --tile-title-color: #{$dark-blue};
  --tile-footer-bg-color: #{$x-light-grey};
  --table-head-bg-color: #{$x-light-grey};
  --table-head-text-color: #{$dark-grey};
  --table-border-color: #{$light-grey};
  --table-sortable-color: #{$primary};
  --pagination-active-bg-color: #{$primary};
  --validation-feedback-bg-color: #{$x-light-grey};
  --validation-feedback-color: #{$dark-grey};
  --caption-bg-color: #{$x-light-grey};
  --pagination-disabled-text-color: #{$light-grey};
  --switch-inactive-color: #{$light-grey};
  --checkbox-border-color: #{$dark-grey};
  --scrollbar-color: rgba(75, 75, 75, 0.30);
  --loader-color: #{$dark-blue};
  --popup-content-bg-color: #{$white};
  --input-icon-color: #{$dark-grey};
  --selection-choise-remove-color: #{$dark-grey};
  --selection-choise-bg-color: #{$x-light-grey};
  --disabled-selection-bg-color: #{$gray-200};
  --disabled-selection-color: #{$black};
  --label-color: #{$dark-grey};
  --pill-badge-bg-color: #{$x-light-grey};
  --pill-badge-color: #{$dark-grey};
  --input-disabled-bg-color: #{$x-light-grey};
  --input-disabled-color: #{$dark-grey};
  --calendar-other-month-color: #{$gray-400};
  --calendar-selected-border-color: #{$dark-blue};
  --calendar-selectable-cell-bg-color: #D9D9D9;
  --calendar-other-month-selectable-bg-color: var(--calendar-selectable-cell-bg-color);
  --calendar-other-month-selectable-border-color: transparent;
  --calendar-other-month-selectable-color: #{$dark-grey};
  --navbar-color: #{$dark-grey};
  --select-dropdown-bg-color: var(--main-bg-color);
  --slider-disabled-active-bg-color: #{$dark-grey};
  --slider-disabled-inactive-bg-color: #{$gray-100};
  --manual-title-color: #{$black};
  --text-gray-color: #{$gray-600};
  --text-dark-gray-color: #{$dark-grey};
  --tile-highlighted-header-bg-color: #{$gray-100};

  --chart-blue-color: #{$stat-or-badge-blue};
  --chart-light-blue-color: #{$stat-light-blue};
  --chart-dark-blue-color: #{$stat-or-badge-dark-blue};
  --chart-very-dark-blue-color: #{$stat-very-dark-blue};
  --chart-cyan-color: #{$stat-cyan};
  --chart-label-color: var(--label-color);
  --chart-font-family: 'Poppins', sans-serif;
  --chart-font-size: 14px; // note: rem not works!
  --chart-half-doughnut-label-color: #{$dark-blue};
  --chart-light-grey-color: #{$stat-or-badge-light-grey};
  --chart-black-color: #{$stat-or-badge-black};
}

.dark-theme {
  --sidebar-bg-color: #{$grey-blue};
  --main-bg-color: #{$main-bg-color-dark};
  --breadcrumbs-color: #{$light-blue};
  --default-text-color: #{$white};
  --table-head-bg-color: #{$grey-blue};
  --validation-feedback-bg-color: #{$main-bg-color-dark};
  --validation-feedback-color: #{$gray-400};
  --caption-bg-color: #{$main-bg-color-dark};
  --table-head-text-color: #{$gray-400};
  --pagination-disabled-text-color: #{$gray-600};
  --label-color: #{$gray-400};
  --selection-choise-bg-color: #{$gray-600};
  --input-icon-color: #{$gray-400};
  --switch-inactive-color: #{$grey-blue};
  --table-border-color: #{$gray-400};
  --table-sortable-color: #{$light-blue};
  --pagination-active-bg-color: #5897fb;
  --checkbox-border-color: #{$gray-400};
  --scrollbar-color: #{$gray-600};
  --tile-title-color: #{$light-blue};
  --tile-footer-bg-color: #{$grey-blue};
  --calendar-other-month-color: #{$gray-600};
  --calendar-selected-border-color: #{$light-blue};
  --calendar-selectable-cell-bg-color: #{$light-blue};
  --calendar-other-month-selectable-bg-color: transparent;
  --calendar-other-month-selectable-border-color: #{$light-blue};
  --calendar-other-month-selectable-color: #{$gray-600};
  --input-disabled-bg-color: #{$gray-600};
  --input-disabled-color: #{$gray-100};
  --pill-badge-bg-color: #{$gray-600};
  --pill-badge-color: #{$gray-100};
  --loader-color: #{$light-blue};
  --popup-content-bg-color: #{$grey-blue};
  --selection-choise-remove-color: #{$white};
  --select-dropdown-bg-color: var(--main-bg-color);
  --disabled-selection-bg-color: #{$gray-600};
  --disabled-selection-color: #{$gray-400};
  --navbar-color: #{$gray-400};
  --slider-disabled-active-bg-color: #{$dark-grey};
  --slider-disabled-inactive-bg-color: #{$gray-400};
  --manual-title-color: #{$light-blue};
  --text-gray-color: #{$gray-400};
  --text-dark-gray-color: #{$gray-400};
  --bs-dark-rgb: var(--text-dark-gray-color);
  --tile-highlighted-header-bg-color: #{$grey-blue};
  --chart-label-color: var(--label-color);
  --chart-half-doughnut-label-color: #{$light-blue};
}
