// :root {
//   --colors-primary-fill: 255, 255, 255;
//   --colors-primary-base-fill: 0, 200, 175;
//   --colors-primary-base: rgb(var(--colors-primary-base-fill));
//   --colors-primary-hover: #4dd8c7;
//   // --colors-primary-hover: #008B7A;
//   --colors-primary-active: #008b7a;
//   --colors-primary-click: #005046;
//   --colors-warn: #fa3f48;
//   --colors-color: #999;
//   --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
//   --colors-content-color: rgb(--colors-primary-fill);

//   --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
//   --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
//   --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
//   --colors-normal-click: var(--colors-primary-click);

//   --colors-normal-fill-back: var(--colors-normal-back);
//   --colors-normal-fill-base: var(--colors-normal-base);
//   --colors-normal-fill-hover: var(--colors-normal-hover);
//   --colors-normal-fill-click: var(--colors-primary-click);

//   --colors-error-fill: 250, 63, 72;

//   --small-size: 12px;
//   --medium-size: 14px;
//   --big-size: 16px;

//   // 正常
//   --color-main-normal: var(--colors-primary-base);
//   // 悬停
//   --color-main-hover: var(--colors-primary-hover);
//   // 点击
//   --color-main-focus: var(--colors-primary-click);

//   --editor-head-filter: blur(0px);
//   --editor-head-height: 50px;

//   --editor-head-back: rgba(20, 20, 20, 0.86);

//   --editor-menu-filter: var(--editor-head-filter);
//   --editor-menu-width: 80px;
//   --editor-menu-left: 0px;
//   --editor-menu-right: 0px;
//   --editer-menu-fill: 27, 27, 28;
//   --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
//   --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
//   --editor-menu-color: #999;
//   --editor-menu-active: rgba(255, 255, 255, 0.06);

//   --editor-toolbox-top: var(--editor-head-height);
//   --editor-toolbox-left: calc(
//     var(--editor-menu-left) + var(--editor-menu-width)
//   );
//   --editor-toolbox-width: 340px;
//   --editor-toolbox-back: var(--editor-menu-back);
//   --editor-toolbox-padding: 20px;
//   --editor-toolbar-height: 60px;
// }

@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 {
  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);

  // get rgb
  @each $type in (primary, success, warning, danger, error, info) {
    @include set-css-color-rgb($type);
  }

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

  @include set-css-var-value('font-weight-primary', 500);
  @include set-css-var-value('font-line-height-primary', 24px);

  // z-index --el-index-#{$type}
  @include set-component-css-var('index', $z-index);

  // --el-border-radius-#{$type}
  @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);

  // common component size
  @include set-component-css-var('component-size', $common-component-size);
}

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

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

  // --el-color-#{$type}
  // --el-color-#{$type}-light-{$i}
  @each $type in (primary, success, warning, danger, error, info) {
    @include set-css-color-type($colors, $type);
  }

  // color-scheme
  // Background --el-bg-color-#{$type}
  @include set-component-css-var('bg-color', $bg-color);
  // --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);
  // Fill --el-fill-color-#{$type}
  @include set-component-css-var('fill-color', $fill-color);

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

  // overlay & mask
  @include set-component-css-var('overlay-color', $overlay-color);
  @include set-component-css-var('mask-color', $mask-color);

  // Border
  @include set-css-var-value('border-width', $border-width);
  @include set-css-var-value('border-style', $border-style);
  @include set-css-var-value('border-color-hover', $border-color-hover);
  @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');
}
