@use 'sass:map';

// CSS3 var
@use 'common/var' as *;
@use 'mixins/var' as *;
@use 'mixins/mixins' as *;

// for better performance do not dynamically change the root variable if you really
// do not need that, since this could introduce recalculation overhead for rendering.

// common
:root {
  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);

  // get rgb
  @each $type in $types {
    @include set-css-color-rgb($colors, $type);
  }
  @each $color in $inner-color-names {
    @include set-css-color-rgb($inner-colors, $color);
  }

  // Typography
  @include set-component-css-var('font-size', $font-size);

  // padding-margin-size
  @include set-component-css-var('pm-size', $padding-margin-size);

  // radius
  @include set-component-css-var('border-radius', $border-radius);

  // border-width
  @include set-component-css-var('border-width', $border-width);
}

// for light
:root {
  color-scheme: light;

  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);

  // --tn-color-#{$type}
  // --tn-color-#{$type}-light-{$i}
  @each $type in $types {
    @include set-css-color-type($colors, $type);
  }
  @each $color in $inner-color-names {
    @include set-css-color-inner($inner-colors, $color);
  }

  // color-scheme
  // Background --tn-bg-color-#{$type}
  @include set-component-css-var('bg-color', $bg-color);
  // --tn-text-color-#{$type}
  @include set-component-css-var('text-color', $text-color);
}