@use 'sass:map';

// CSS3 var
@use './var' as *;
@use '../mixins/_var.scss' as *;
@use '../mixins/mixins.scss' as *;

html.dark {
  color-scheme: dark;

  // hex colors
  @each $type in (primary, success, warn, danger, error, info, dark) {
    @include set-colors($type);
  }

  // // vuesax var
  @include set-component-var('', $vsVar);

  // --vs-box-shadow-#{$type}
  @include set-component-var('box-shadow', $box-shadow);

  // color-scheme
  @include set-component-color('', $moreColor);
  // Background --vs-bg-color-#{$type}
  @include set-component-color('bg-color', $bg-color);
  // --vs-text-color-#{$type}
  @include set-component-var('text-color', $text-color);
  // --vs-border-color-#{$type}
  @include set-component-var('border-color', $border-color);
  // Fill --vs-fill-color-#{$type}
  @include set-component-var('fill-color', $fill-color);
  @include set-component-var('mask-color', $mask-color);
}