@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.
// https://lisilinhart.info/posts/css-variables-performance/

// common
:root {
  // Typography
  @include set-component-css-var('font-size', $font-size);
  @include set-css-var-value('font-family', $font-family);

  // z-index
  @include set-component-css-var('index', $z-index);

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

  // Transition
  // refer to this website to get the bezier motion function detail
  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
  @include set-component-css-var('transition-duration', $transition-duration);
  @include set-component-css-var('transition-function', $transition-function);
  @include set-component-css-var('transition', $transition);
}

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

  // --b-color-#{$type}
  // --b-color-#{$type}-light-{$i}
  @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');
}