// config/_sx_themes.scss
// steuert das Umschalten zwischen sx-default- und Customer-Design 

@use "sass:map";
@use "sx_variables";
@use "cust_variables";

$use-customer-theme: false;

// ==================
// -- Light-Theme --
// ==================

$light-theme: sx_variables.$defaults-light;

@if $use-customer-theme {
  $light-theme: map.merge(
    $light-theme,
    cust_variables.$customer-light
  );
}

// =================
// -- Dark-Theme --
// =================

$dark-theme: sx_variables.$defaults-dark;

@if $use-customer-theme {
  $dark-theme: map.merge(
    $dark-theme,
    cust_variables.$customer-dark
  );
}

// ============================
// -- CSS-Custom-Properties --
// ============================

@mixin css-variables($theme) {
  @each $key, $value in $theme {
    --sx-#{$key}: #{$value};
  }
}

// =================
// -- Light-Mode --
// =================

:root {
  color-scheme: light;

  @include css-variables($light-theme);
}

// =================
// -- Dark-Mode --
// =================

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    @include css-variables($dark-theme);
  }
}

// ===============================
// -- Zugriff auf Theme-Werte --
// ===============================

@function theme($key) {
  @return var(--sx-#{$key});
}