@use "sass:map";

@mixin is-dark-mode() {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

// Light and dark must be maps
@mixin set-color-mode-variables($light, $dark) {
  @each $name, $value in $light {
    --#{$name}: #{map.get($light, $name)};
  }
  
  @include is-dark-mode() {
    @each $name, $value in $dark {
      --#{$name}: #{map.get($dark, $name)};
    }
  }
}

@mixin should-animate() {
  @media (prefers-reduced-motion: no-preference) {
    @content 
  }
}