@use "sass:map";
@use 'sass:color';

.CSS_START_partials_variables {
  display: none;
}

// GLOBAL COLORS

$color-white: #fff;
$color-white-2: #d9d9d9;
$color-black: #2D2D2D;
$color-black-2: #1E1E1E;
$color-grey-1: #61646B;
$color-grey-2: #7c7d86;

// THORIUM SET OF COLORS 

$thorium-theme-neutral-light: $color-white;
$thorium-theme-neutral-dark: #1D1D1E;
$thorium-theme-primary-light: #1053C8;
$thorium-theme-primary-dark: #99A9E3;
$thorium-theme-secondary-light: #ECF2FD;
$thorium-theme-secondary-dark: $color-black;
$thorium-theme-border-light: #afb1b6;
$thorium-theme-border-dark: #48484b;
$thorium-theme-background-light: #f5f5f5;
$thorium-theme-background-dark: #27272a;
$thorium-theme-appName-light: $thorium-theme-border-light;
$thorium-theme-appName-dark: #EAEAEA;
$thorium-theme-scrollbar-thumb: $color-grey-2;
$thorium-theme-button-hover-light: $color-white;
$thorium-theme-button-hover-dark: #48484b;
$thorium-theme-buttons-border-light: #1053C8;
$thorium-theme-buttons-border-dark: #99A9E3;


// CUSTOM SET OF COLORS (DEFAULT TO THORIUM)

$theme-neutral-light: var(--theme-neutral_light, $thorium-theme-neutral-light);
$theme-neutral-dark: var(--theme-neutral_dark, $thorium-theme-neutral-dark);
$theme-main-primary-light: var(--theme-primary_light, $thorium-theme-primary-light);
$theme-main-primary-dark: var(--theme-primary_dark, $thorium-theme-primary-dark);
$theme-main-secondary-light: var(--theme-secondary_light, $thorium-theme-secondary-light);
$theme-main-secondary-dark: var(--theme-secondary_dark, $thorium-theme-secondary-dark);
$theme-border-light: var(--theme-border_light, $thorium-theme-border-light);
$theme-border-dark: var(--theme-border_dark, $thorium-theme-border-dark);
$theme-background-light: var(--theme-background_light, $thorium-theme-background-light);
$theme-background-dark: var(--theme-background_dark, $thorium-theme-background-dark);
$theme-appName-light: var(--theme-appName_light, $thorium-theme-appName-light);
$theme-appName-dark: var(--theme-appName_dark, $thorium-theme-appName-dark);
$theme-scrollbar-thumb-light: var(--theme-scrollbarThumb_light, $thorium-theme-scrollbar-thumb);
$theme-scrollbar-thumb-dark: var(--theme-scrollbarThumb_dark, $thorium-theme-scrollbar-thumb);
$theme-button-hover-light: var(--theme-neutral_light, $thorium-theme-button-hover-light);
$theme-button-hover-dark: var(--theme-neutral_dark, $thorium-theme-button-hover-dark);
$theme-buttons-border-light: var(--theme-buttonsBorder_light, $thorium-theme-buttons-border-light);
$theme-buttons-border-dark: var(--theme-buttonsBorder_dark, $thorium-theme-buttons-border-dark);

// FINAL VARIABLES PALETTE

$color-palette: (
  light: (
    --color-primary: #4d4d4d,
    --color-secondary: $theme-neutral-light,
    --color-blue: $theme-main-primary-light,
    --color-blue-alt: $theme-main-primary-light,
    --color-light-blue: $theme-main-secondary-light,
    --color-extralight-grey: $theme-background-light,
    --color-extralight-grey-alt: color.adjust($thorium-theme-background-light, $lightness: -5%),
    --color-verylight-grey: $color-white-2,
    --color-verylight-grey-alt: $color-white-2,
    --color-verylight-grey-alt2: $color-white-2,
    --color-light-grey: $theme-border-light,
    --color-medium-grey: $color-grey-1,
    --color-mediumdark-grey: $color-black,
    --color-mediumdark-grey-alt: $color-black,
    --color-dark-grey: $color-black-2,
    --color-dark-grey-alt: $color-black-2,
    --color-accent: #00BCD4,
    --color-accent-contrast: $color-white,
    --reader-fontColor: #000,
    --scrollbar-thumb: $theme-scrollbar_thumb_light,
    --color-disabled: $color-grey-1,
    --color-error: #FCEEF1,
    --color-error-dark: #D52A54,
    --color-success: #0B8454,
    --color-success-light: #ECFEF7,
    --color-appName: $theme-appName-light,
    --color-annotations-txt: #f5f5f5,
    --color-annotations-txt-area: $color-white,
    --color-annotations-bg: $color-white,
    --color-button-hover: $theme-button-hover-light,
    --color-docked-header: #f5f5f5,
    --color-buttons-border: $theme-buttons-border-light,
  ),
  dark: (
    --color-primary: #e7eaf8,
    --color-secondary: $theme-neutral-dark,
    --color-blue: $theme-main-primary-dark,
    --color-blue-alt: $color-white,
    --color-light-blue: $theme-main-secondary-dark,
    --color-extralight-grey: $theme-background-dark,
    --color-extralight-grey-alt: color.adjust($thorium-theme-background-dark, $lightness: 5%),
    --color-verylight-grey: color.adjust($color-grey-1, $lightness: 25%),
    --color-verylight-grey-alt: $color-grey-2,
    --color-verylight-grey-alt2: #454547,
    --color-light-grey: $theme-border-dark,
    --color-medium-grey: $color-grey-2,
    --color-mediumdark-grey: $color-black,
    --color-mediumdark-grey-alt: $color-white-2,
    --color-dark-grey: $color-black-2,
    --color-dark-grey-alt: $color-grey-2,
    --color-accent: #00BCD4,
    --color-accent-contrast: $color-white,
    --reader-fontColor: #000,
    --scrollbar-thumb: $theme-scrollbar_thumb_dark,
    --color-disabled: #a7a9b3,
    --color-error: #4f1d1d,
    --color-error-dark: #F590A9,
    --color-success: #303936,
    --color-success-light: #121d19,
    --color-appName: $theme-appName-dark,
    --color-annotations-txt: #3b3c3f,
    --color-annotations-txt-area: #3b3c3f,
    --color-annotations-bg: $color-black,
    --color-button-hover: $theme-button-hover-dark,
    --color-docked-header: #121212,
     --color-buttons-border: $theme-buttons-border-dark,

  /*
    --color-primary: #fff,
    --color-secondary: #4d4d4d,
    --color-tertiary: #67a3e0,
    --color-disabled: #b7b7b7,
    --color-light-grey: #f1f1f1,
    --color-medium-grey: #e5e5e5,
    --color-accent: rgb(0, 188, 212),
    --color-accent-contrast: #fff,
    --reader-fontColor: #fff,
    --color-blue: rgba(16, 83, 200, 1),
    --color-light-blue: rgba(236, 242, 253, 1),
    --color-bg-tab: rgba(16, 18, 22, 0.6),
    --setting-btn-primary: #fff,
    --setting-btn-secondary: var(--color-secondary),
        */
  ),
);

@function color($color, $value) {
  @return map.get(map.get($color-palette, $color), $value);
}

@media (prefers-color-scheme: light) {
  :root {
    // color-scheme: light;
    /* Colors */
    @each $key, $value in map.get($color-palette, light) {
      #{$key}: color(light, #{$key});
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    // color-scheme: dark;
    /* Colors */
    @each $key, $value in map.get($color-palette, dark) {
      #{$key}: color(dark, #{$key});
    }
  }
}

[data-theme="light"] {
  // :root {
    // color-scheme: light;
  // }

  /* Colors */
  @each $key, $value in map.get($color-palette, light) {
    #{$key}: color(light, #{$key});
  }
}

[data-theme="dark"] {
  // :root {
    // color-scheme: dark;
  // }

  /* Colors */
  @each $key, $value in map.get($color-palette, dark) {
    #{$key}: color(dark, #{$key});
  }
}

.CSS_END_partials_variables {
  display: none;
}