/** 
 * 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 {
  --white_text_black: var(--light, var(--title-text)) var(--dark, white);
  --white_text_black_reverse: var(--light, #fff) var(--dark, var(--title-text));
  --basic_text_black: var(--light, var(--basic-text)) var(--dark, #fff);
  --secondary_text_black: var(--light, var(--secondary-text)) var(--dark, var(--white-black-opacity-70));
  --light_basic_text_black: var(--light, #666) var(--dark, #ccc);

  --black_bg_black: var(--light, #fff) var(--dark, #1b1b1b);
  --darkerblack_bg_black: var(--light, #f7f8fb) var(--dark, rgba(255,255,255,0.08));
  --stroke_black: var(--light, #e4e8f3) var(--dark, #3a3a3a);
  --stroke_black_hover: var(--light, #fff) var(--dark, #3a3a3a);
  --card_bg_black: var(--light, #fff) var(--dark, #232323);
  --card_bg_hover_black: var(--light, #fff) var(--dark, #2b2b2b);
  --arrows_bg_black: var(--light, #fff) var(--dark, #444);

  --light_bg_black: var(--light, #fafafa) var(--dark, #1b1b1b);
  --light2_bg_black: var(--light, #fafafa) var(--dark, #232323);
  --gray_bg_black: var(--light, #ccc) var(--dark, #3a3a3a);
  --white_bg_ccc: var(--light, #fff) var(--dark, #ccc);

  --fill_dark_light: var(--light, var(--title-text)) var(--dark, #fff);
  --fill_dark_light_ccc: var(--light, var(--title-text)) var(--dark, #ccc);
  --fill_dark_light_hover: var(--light, var(--theme-base-color)) var(--dark, var(--white-opacity-72));
  --fill_dark_light_white_hover: var(--light, var(--theme-base-color)) var(--dark, var(--white-opacity-72));
  --fill_dark_light_white_hover_80: var(--light, var(--theme-base-color)) var(--dark, var(--white-opacity-80));
  --dark_light_white_hover: var(--light, var(--theme-base-color)) var(--dark, #fff);

  --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_light_hover: var(--light, var(--theme-base-opacity-color)) var(--dark, #3a3a3a);

  --dff_dark_light: var(--light, #fff) var(--dark, #121212);

  --white-opacity-72: color-mix(in oklch, #fff 72%, transparent);
  --white-opacity-80: color-mix(in oklch, #fff 80%, transparent);
  --white-black-opacity-70: color-mix(in oklch, var(--white_text_black) 70%, transparent);
}

/* 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*/