@use 'sass:map';

// CSS3 var
@use 'common/var' as *;
@use 'mixins/var' 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/

:root {
  --el-color-white: #{$color-white};
  --el-color-black: #{$color-black};
  
  --el-color-white-rgb: #{$color-white-rgb};
  --el-color-black-rgb: #{$color-black-rgb};
  
  @each $type in $types {
    --el-color-#{$type}: #{map.get($colors, $type, 'base')};
    @each $i in $color-depths {
      @include set-css-color-type-light($type, $i);
    }
    @include set-css-color-type-dark($type, 1);
  }
  
  @each $i in $gray-depths {
    @include set-css-color-gray($i);
  }

  // Background
  --el-bg-color: #{$bg-color};

  // Border
  --el-border-width-base: #{$border-width-base};
  --el-border-style-base: #{$border-style-base};
  --el-border-color-hover: #{$border-color-hover};
  --el-border-base: var(--el-border-width-base) var(--el-border-style-base)
    var(--el-border-color-base);

  // Svg
  --el-svg-monochrome-grey: var(--el-color-gray-1); //#dcdde0;

  // Fill
  --el-fill-base: var(--el-color-white);

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

  --el-font-weight-primary: 500;
  --el-font-line-height-primary: 24px;
  --el-text-color-disabled-base: #bbb;

  // z-index
  --el-index-normal: 1;
  --el-index-top: 1000;
  --el-index-popper: 2000;

  // --el-text-color-#{$type}
  @include set-component-css-var('text-color', $text-color);
  // --el-border-color-#{$type}
  @include set-component-css-var('border-color', $border-color);
  // --el-border-radius-#{$type}
  @include set-component-css-var('border-radius', $border-radius);
  // Box-shadow
  // --el-box-shadow-#{$type}
  @include set-component-css-var('box-shadow', $box-shadow);
  // Disable base
  @include set-component-css-var('disabled', $disabled);

  /* 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)
  --el-transition-duration: #{map.get($transition-duration, 'default')};
  --el-transition-duration-fast: #{map.get($transition-duration, 'fast')};

  @include set-component-css-var('transition-function', $transition-function);
  @include set-component-css-var('transition', $transition);
}