@use "sass:map";

$themes: (
    dark: (
        background: #141414,
        background-light: #202020,
        background-line: #202324,
        background-fore: #10141f,
        background-soft: #20202077,

        window-handle-background: #191919,
        window-background: #141414,
        window-border: #202324,
        window-shadow: #00000077,

        button-background: #20202077,
        button-hover: #202020aa,
        button-active: #202020cc,

        toast-background: #202020,
        tooltip-background: #2a2a2a,

        note-border: #202324,

        hover: #21262d,
        selected: #4a4a4b,
        border-color: #819796,
        border: #202324,
        text: #ebede9,
        container-shadow: #151d28,
        sticky-header-bg: #20202077,

        red: #e06c75,
        green: #98c379,
        gray: #cccccc,

        icon-invert: 100%,

        search-background: #20202077,
        search-background-container: #202020ee,
        search-hover: #2a2a2a,
    ),
    light: (
        background: #ffffff,
        background-light: #f9f9f9,
        background-line: #f0f0f0,
        background-fore: #ffffff,

        window-handle-background: #f0f0f0,
        window-background: #ffffff,
        window-border: #e0e0e0,
        window-shadow: #d4d4d4,

        button-background: #f0f0f0,
        button-hover: #e9e9e9,
        button-active: #d4d4d4,

        toast-background: #f0f0f0,
        tooltip-background: #f5f5f5,

        note-border: #e0e0e0,

        border-color: #e0e0e0,
        border: #f0f0f0,
        hover: #e9e9e9,
        selected: #d4d4d4,
        text: #1e1e1e,
        container-shadow: #5f6774,
        sticky-header-bg: #fff,

        red: #e06c75,
        green: #98c379,
        gray: #cccccc,

        icon-invert: 0%,

        search-background: #f0f0f0aa,
        search-background-container: #ffffffee,
        search-hover: #e8e8e8,
    )
);

$accents: (
  katlum: (
    link: #a4dddb,
  ),
  solus: (
    link: #e6a556,
  ),
  silang: (
    link: #c65197,
  )
);

@mixin theme-vars($theme-map) {
  @each $name, $value in $theme-map {
    --color-#{$name}: #{$value};
  }
}

@mixin accent-vars($accent-map) {
  @each $name, $value in $accent-map {
    --color-#{$name}: #{$value};
  }
}

:root {
  @include theme-vars(map.get($themes, dark));
  @include accent-vars(map.get($accents, katlum));
}

[data-theme="light"] {
  @include theme-vars(map.get($themes, light));
}

[data-accent="katlum"] {
  @include accent-vars(map.get($accents, katlum));
}

[data-accent="solus"] {
  @include accent-vars(map.get($accents, solus));
}

[data-accent="silang"] {
  @include accent-vars(map.get($accents, silang));
}