@use 'mixins' as *;
@use 'sass:map' as *;

@use 'themes/weightmans.light' as light;
@use 'themes/weightmans.dark' as dark;
@use 'themes/weightmans.contrastLight' as contrastLight;
@use 'themes/weightmans.contrastDark' as contrastDark;

$light-colors: light.$colors !default;
$dark-colors: dark.$colors !default;
$contrast-light-colors: contrastLight.$colors !default;
$contrast-dark-colors: contrastDark.$colors !default;

:root {
  @include createThemeVars($light-colors, light.$vars);
}

@media (prefers-color-scheme: dark) {
  :root {
    @include createThemeVars($dark-colors, dark.$vars);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    @include createThemeVars($light-colors, light.$vars);
  }
}

:root,
div {
  &.dark {
    color-scheme: dark;
    .weightmans-viewport {
      color-scheme: dark;
    }
    @include createThemeVars($dark-colors, dark.$vars);
  }

  &.light {
    color-scheme: light;
    .weightmans-viewport {
      color-scheme: light;
    }
    @include createThemeVars($light-colors, light.$vars);
  }

  &.contrastLight {
    color-scheme: light;
    .weightmans-viewport {
      color-scheme: light;
    }
    @include createThemeVars($contrast-light-colors, contrastLight.$vars);
  }

  &.contrastDark {
    color-scheme: dark;
    .weightmans-viewport {
      color-scheme: dark;
    }
    @include createThemeVars($contrast-dark-colors, contrastDark.$vars);
  }
}

@media print {
  :root,
  div {
    &.dark,
    &.light,
    &.contrastDark,
    &.contrastLight {
      color-scheme: light;
      .weightmans-viewport {
        color-scheme: light;
      }
      @include createThemeVars(light.$colors, light.$vars);
    }
  }
}