@use 'sass:color';

$td-light: #fff !default;
$td-widget-background: $td-light !default;
$td-font-color: #000 !default;
$td-timepicker-font-size: 1.2em !default;
$td-active-bg: #0d6efd !default;
$td-range-bg: color.scale($td-active-bg, $lightness: -40%) !default;
$td-active-color: $td-light !default;
$td-active-border-color: $td-light !default;
$td-border-radius: 999px !default;
$td-btn-hover-bg: #e9ecef !default;
$td-disabled-color: #6c757d !default;
$td-alternate-color: rgba(0, 0, 0, 0.38) !default;
$td-secondary-border-color: #ccc !default;
$td-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
$td-primary-border-color: $td-light !default;
$td-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
$td-dow-color: rgba(0, 0, 0, 0.5) !default;

$td-dark: #1b1b1b !default;
$td-dark-widget-background: $td-dark !default;
$td-dark-font-color: #e3e3e3 !default;
$td-dark-active-bg: #4db2ff !default;
$td-dark-range-bg: color.scale($td-dark-active-bg, $lightness: -40%) !default;
$td-dark-active-color: #fff !default;
$td-dark-active-border-color: $td-dark !default;
$td-dark-btn-hover-bg: rgb(35, 38, 39) !default;
$td-dark-disabled-color: #6c757d !default;
$td-dark-alternate-color: rgba(232, 230, 227, 0.38) !default;
$td-dark-secondary-border-color: #ccc !default;
$td-dark-secondary-border-color-rgba: rgba(232, 230, 227, 0.2) !default;
$td-dark-primary-border-color: $td-dark !default;
$td-dark-text-shadow: 0 -1px 0 rgba(232, 230, 227, 0.25) !default;
$td-dark-dow-color: rgba(232, 230, 227, 0.5) !default;

$td-widget-z-index: 9999 !default;

:root {
  --td-light: #{$td-light};
  --td-widget-background: #{$td-widget-background};
  --td-font-color: #{$td-font-color};
  --td-timepicker-font-size: #{$td-timepicker-font-size};
  --td-active-bg: #{$td-active-bg};
  --td-range-bg: #{$td-range-bg};
  --td-active-color: #{$td-active-color};
  --td-active-border-color: #{$td-active-border-color};
  --td-border-radius: #{$td-border-radius};
  --td-btn-hover-bg: #{$td-btn-hover-bg};
  --td-disabled-color: #{$td-disabled-color};
  --td-alternate-color: #{$td-alternate-color};
  --td-secondary-border-color: #{$td-secondary-border-color};
  --td-secondary-border-color-rgba: #{$td-secondary-border-color-rgba};
  --td-primary-border-color: #{$td-primary-border-color};
  --td-text-shadow: #{$td-text-shadow};
  --td-dow-color: #{$td-dow-color};

  --td-dark: #{$td-dark};
  --td-dark-widget-background: #{$td-dark-widget-background};
  --td-dark-font-color: #{$td-dark-font-color};
  --td-dark-active-bg: #{$td-dark-active-bg};
  --td-dark-range-bg: #{$td-dark-range-bg};
  --td-dark-active-color: #{$td-dark-active-color};
  --td-dark-active-border-color: #{$td-dark-active-border-color};
  --td-dark-btn-hover-bg: #{$td-dark-btn-hover-bg};
  --td-dark-disabled-color: #{$td-dark-disabled-color};
  --td-dark-alternate-color: #{$td-dark-alternate-color};
  --td-dark-secondary-border-color: #{$td-dark-secondary-border-color};
  --td-dark-secondary-border-color-rgba: #{$td-dark-secondary-border-color-rgba};
  --td-dark-primary-border-color: #{$td-dark-primary-border-color};
  --td-dark-text-shadow: #{$td-dark-text-shadow};
  --td-dark-dow-color: #{$td-dark-dow-color};

  --td-widget-z-index: #{$td-widget-z-index};
}