/* start logic dark-light*/
:root {
  --ON_toggle: initial;
  --OFF_toggle: ;
}

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

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

body {
  --white_text_black: var(--light, #333) var(--dark, white);
  --white_text_black_reverse: var(--light, #fff) var(--dark, #333);
  --basic_text_black: var(--light, #555) var(--dark, #ccc);
  --light_basic_text_black: var(--light, #666) var(--dark, #ccc);

  --black_bg_black: var(--light, #fff) var(--dark, #1b1b1b);
  --darkerblack_bg_black: var(--light, #f8f8f8) var(--dark, #121212);
  --stroke_black: var(--light, #e5e5e5) 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, #333) var(--dark, #fff);
  --fill_dark_light_ccc: var(--light, #333) var(--dark, #ccc);
  --fill_dark_light_hover: var(--light, var(--theme-base-color)) var(--dark, #ccc);
  --fill_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);
  

}

.theme-dark::-webkit-scrollbar, .theme-dark .submenu::-webkit-scrollbar {
	width: 14px; /* ширина для вертикального скролла */
	height: 8px; /* высота для горизонтального скролла */
	background-color: var(--card_bg_black);
}
/* ползунок скроллбара */
.theme-dark::-webkit-scrollbar-thumb, .theme-dark .submenu::-webkit-scrollbar-thumb {
	background-color: #fff;
	border-radius: 9em;
	box-shadow: inset 1px 1px 10px #f3faf7;
}
.theme-dark::-webkit-scrollbar-thumb:hover, .theme-dark .submenu::-webkit-scrollbar-thumb:hover {
	background-color: #eee;
}
.submenu
/* If user prefers dark, then that's what they'll get */
@media (prefers-color-scheme: dark) {
  .theme-default {
    --light: var(--OFF_toggle);
    --dark: var(--ON_toggle);
	
  }
}
/* end logic*/