@use "sass:map";

$themes: (
    dark: (
        background: #0e0e0e,
        background-line: #181818,
        background-fore: #1a1a1a,
        hover: #1f1f1f,
        selected: #3a3a3a,
        border-color: #5c5c5c,
        border: #181818,
        text: #d4d4d4,
        container-shadow: #0a0a0a,
        sticky-header-bg: #161616cc,
        frame-glow: #44444455,
    ),
    light: (
        background: #ffffff,
        background-line: #f0f0f0,
        background-fore: #f5f5f5,
        border-color: #e0e0e0,
        border: #f0f0f0,
        hover: #e9e9e9,
        selected: #d4d4d4,
        text: #1e1e1e,
        container-shadow: #5f6774,
        sticky-header-bg: #fff,
        frame-glow: #00000022,
    )
);

$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));
}