// Fallback theme dark

:root {
  --svg-theme-light-primary: #14253A;
  --svg-theme-light-secondary: #E63946;

  --svg-theme-dark-primary: #F7F7F7;
  --svg-theme-dark-secondary: #E63946;
}

$themes: (
        dark: (
                primary: var(--svg-theme-dark-primary),
                secondary: var(--svg-theme-dark-secondary),
        ),
        light: (
                primary: var(--svg-theme-light-primary),
                secondary: var(--svg-theme-light-secondary),
        ),
);

@mixin theme($themes: $themes) {
  @each $theme, $map in $themes {
    .svg-theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}


.svg-fill-primary {
  @include theme($themes) {
    fill: t('primary');
  }
}

.svg-fill-secondary {
  @include theme($themes) {
    fill: t('secondary');
  }
}
