@use "sass:map";

@use "config";
@use "function" as *;
@use "../common/var" as *;

// 给变量 设置变量值
// set css var value, because we need translate value to string
// for example:
// @include set-css-var-value(('color', 'primary'), red);
// --el-color-primary: red;
@mixin set-css-var-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}
// 给变量 设置变量值： 包含type的变量，值是map数组值
// @include set-css-var-type('color', 'primary', $map);
// --el-color-primary: #{map.get($map, 'primary')};
@mixin set-css-var-type($name, $type, $variables) {
  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}
//给 颜色 type设置变量值
// @include set-css-color-type($colors, 'primary');
// --el-color-primary: #{map.get($colors, 'primary')}
//--el-color-primary-light-3: #{map.get($colors, 'primary','light-3')}
//--el-color-primary-light-5: #{map.get($colors, 'primary','light-5')}
//--el-color-primary-light-7: #{map.get($colors, 'primary','light-7')}
//--el-color-primary-light-8: #{map.get($colors, 'primary','light-8')}
//--el-color-primary-light-9: #{map.get($colors, 'primary','light-9')}
//--el-color-primary-dark-2: #{map.get($colors, 'primary','dark-2')}
@mixin set-css-color-type($colors, $type) {
  @include set-css-var-value(("color", $type), map.get($colors, $type, "base"));

  @each $i in (3, 5, 7, 8, 9) {
    @include set-css-var-value(("color", $type, "light", $i), map.get($colors, $type, "light-#{$i}"));
  }

  @include set-css-var-value(("color", $type, "dark-2"), map.get($colors, $type, "dark-2"));
}

// 设置组件中的变量$map包含变量名和值， 进行变量的声明赋值赋值
// set all css var for component by map
@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    @if $attribute == "default" {
      #{getCssVarName($name)}: #{$value};
    } @else {
      #{getCssVarName($name, $attribute)}: #{$value};
    }
  }
}

//把$colors中某一类型的样式 转换成rgb
// @include set-css-color-rgb('primary')
// -el-color-primary-rgb:  #{red($color),green($color),blue($color)}
@mixin set-css-color-rgb($type) {
  $color: map.get($colors, $type, "base");
  @include set-css-var-value(("color", $type, "rgb"), #{red($color), green($color), blue($color)});
}

// 生成新的变量 通过已存在的变量的值进行赋值
// generate css var from existing css var
// for example:
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
// --el-button-text-color: var(--el-color-#{$type});
@mixin css-var-from-global($var, $gVar) {
  $varName: joinVarName($var);
  $gVarName: joinVarName($gVar);
  #{$varName}: var(#{$gVarName});
}