@use 'sass:map';

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

html.dark {
  color-scheme: dark;

  color: $color-neutral-9;

  @each $type
    in (
      'neutral',
      'primary',
      'blue',
      'teal',
      'green',
      'yellow',
      'orange',
      'red'
    )
  {
    @include set-css-color-type($colors, $type);
  }

  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);
  @include set-css-var-value('color-overlay', $color-overlay);
  @include set-css-var-value('color-mask', $color-mask);
  @include set-css-var-value('color-shadow-lv1', $color-shadow-lv1);
  @include set-css-var-value('color-shadow-lv2', $color-shadow-lv2);
  @include set-css-var-value('color-shadow-lv3', $color-shadow-lv3);

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

  // Border
  @include set-css-var-value('border-color', $border-color);
  @include set-css-var-value(
    'border',
    getCssVar('border-width') getCssVar('border-style')
      getCssVar('border-color')
  );

  // Svg
  @include css-var-from-global('svg-monochrome-grey', 'border-color');

  // Canvas
  canvas {
    filter: invert(1) hue-rotate(180deg);
  }
}