@use 'sass:map';
@use '../settings/variables' as theme-variables;
@use '../../styles/settings' as settings;
@use '../../styles/tools' as tools;
@use '../settings/system' as system;

@if (theme-variables.$system-styles) {
  @each $system-pack-name, $system-pack-themes in system.$system-packs {
    @each $system-pack-theme, $system-pack-tokens in $system-pack-themes {
      @if ($system-pack-theme == light) {
        :root ion-#{$system-pack-name} {
          @each $token-value, $token-color in $system-pack-tokens {
            --sd-sys-color-#{$token-value}: #{$token-color};
          }
        }
      }
      @else if (settings.$dark-mode == true) {
        @media (prefers-color-scheme: dark) {
          .md body ion-#{$system-pack-name},
          .ios body ion-#{$system-pack-name},
          body ion-#{$system-pack-name} {
            @each $token-value, $token-color in $system-pack-tokens {
              --sd-sys-color-#{$token-value}: #{$token-color};
            }
          }
        }
      }
    }
  }
}