/** 
 * start logic dark-light
 * ATTENTION: manually add "--OFF_toggle: ;" to minified
 * file because it considered as error by minifier
 */
:root {
  --ON_toggle: initial;
  --OFF_toggle: ;
}

/* Light theme is on by default */
.theme-default,
.theme-light,
body:is(.theme-default, .theme-light) .theme-root {
  --light: var(--ON_toggle);
  --dark: var(--OFF_toggle);
}

/* Dark theme is off by default */
.theme-dark, 
body.theme-dark .theme-root {
  --light: var(--OFF_toggle);
  --dark: var(--ON_toggle);
}

.theme-default, .theme-root, 
.theme-light, .theme-dark {
  --basic_text_black: var(--light, #555558) var(--dark, #d1d1d7);
  --secondary: var(--light, #8D8D8D) var(--dark, #A1A1A7);
  
  --white_text_black: var(--light, #222228) var(--dark, #fff);
  --white_text_black_reverse: var(--light, #fff) var(--dark, #222228);

  --secondary-black-dark-light-bg: var(--light, #EFF0F2) var(--dark, #38383F);

  --lite_basic_text_black: var(--light, #090808) var(--dark, #d1d1d7);

  --grey_bg: var(--light, #F3F4F7) var(--dark, #313137); /* grey_bg */
  --black_bg_black: var(--light, #fff) var(--dark, #222228);
  --darkerblack_bg_black: var(--light, #F8F8FC) var(--dark, #2A2A31); /* light_grey_bg */
  --darkgrey_bg_black: var(--light, #f4f4f4) var(--dark, #343434);
  --stroke_black: var(--light, #EBECEF) var(--dark, #3F3F45); /* stroke */
  --stroke_black_hover: var(--light, #fff) var(--dark, #3F3F45);
  --card_bg_black: var(--light, #fff) var(--dark, #2A2A31); /* card_bg */ 
  --card_bg_hover: var(--light, #F8F8FC) var(--dark, #313137); /* card_bg_hover */ 
  --card_bg_active: var(--light, #F3F4F7) var(--dark, #38383F); /* card_bg_active */ 
  --card_bg_hover_black: var(--light, #fff) var(--dark, #2b2b2b);
  --card_bg_hover_grey: var(--light, #fff) var(--dark, #F4F4F4);
  --arrows_bg_black: var(--light, #fff) var(--dark, #444);

  --lite_bg_black: var(--light, #F8F8FC) var(--dark, #222228);
  --light2_bg_black: var(--light, #fafafa) var(--dark, #232323);
  --gray_bg_black: var(--light, #B8B8B9) var(--dark, #8D8D8D);
  --white_bg_ccc: var(--light, #fff) var(--dark, #ccc);
  
  --fill_dark_light: var(--light, #222228) var(--dark, #fff);
  --fill_dark_lite_ccc: var(--light, #222228) var(--dark, #ccc);
  --fill_dark_lite_hover: var(--secondary);
  --fill_dark_lite_white_hover: var(--light, #222228) var(--dark, #fff);
  --fill_theme_hover: var(--light, var(--theme-base-color)) var(--dark, rgba(255, 255, 255, 0.7));
  
  --dark_light-wtheme-hue: var(--light, var(--theme-base-color-hue)) var(--dark, 0);
  --dark_light-wtheme-saturation: var(--light, var(--theme-base-color-saturation)) var(--dark, 0%);
  --dark_light-wtheme-lightness: var(--light, var(--theme-base-color-lightness)) var(--dark, 100%);
  --dark_light-hue: var(--light, 0) var(--dark, 0);
  --dark_light-saturation: var(--light, 0%) var(--dark, 0%);
  --dark_light-lightness: var(--light, 97%) var(--dark, 7%);
  
  --checkbox_dark_light: var(--light, #afafaf) var(--dark, #3a3a3a);
  --opacity_dark_lite_hover: var(--light, var(--theme-base-opacity-color)) var(--dark, #3a3a3a);
  
  --dff_dark_light: var(--light, #fff) var(--dark, #121212);
  
  --stroke_input: var(--light, #d7d8da) var(--dark, #505056); /* stroke_input */
  --icon_on_card: var(--light, #B8B8B9) var(--dark, #696B70); /* icon_on_card */
  --tag_hover: var(--light, #E8E9ED) var(--dark, #4B4B51); /* tag_hover */

  --input_color: var(--white_text_black);
  --input_bg_color: var(--black_bg_black);
  --input_bg_color-hover: var(--black_bg_black);
  --input_bg_color-focus: var(--black_bg_black);
  --input_border_color: var(--stroke_input);
  --input_border_color-hover: var(--icon_on_card);
  --input_border_color-focus: var(--secondary);

  --button_color_text: var(--theme-button-color-light, #fff) var(--theme-button-color-dark, #222228);
}

/* If user prefers dark, then that's what they'll get */
@media (prefers-color-scheme: dark) {
  .theme-default,
  body.theme-default .theme-root {
    --light: var(--OFF_toggle);
    --dark: var(--ON_toggle);
  }
}

/* end logic*/