@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:
@mixin set-css-var-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}

@mixin set-css-var-type($name, $type, $variables) {
  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}

@mixin set-css-color-type($colors, $type) {
  @include set-css-var-value(
    ('color', $type),
    var(#{joinVarName(map.get($colors, $type, 'base'))})
  );
  @each $token in $tokens {
    @if (map.has-key($colors, $type, $token) and $token != 'base') {
      @include set-css-var-value(
        ('color', $type, $token),
        // 若map.get没值，则不添加
        var(#{joinVarName(map.get($colors, $type, $token))})
      );
    }
  }

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

@mixin set-dynamic-line-height($name, $variables) {
  // @if ($font-size >= 18px and $font-size <= 24px) {
  //   line-height: $font-size + 8px;
  // } @else {
  //   line-height: normal; // 默认行高（或你可以设置其他值）
  // }
  @each $attribute, $value in $variables {
    @if ($value >= 18px and $value <= 24px) {
      #{getCssVarName($name, $attribute)}: #{$value + 8px};
    }
    @if ($value >= 10px and $value <= 16px) {
      @if $attribute == 'base' {
        #{getCssVarName($name)}: #{$value + 6px};
      } @else {
        #{getCssVarName($name, $attribute)}: #{$value + 6px};
      }
    }
  }
}

// set all css var for component by map
@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    #{getCssVarName($name, $attribute)}: #{$value};
  }
}

@mixin set-css-color-rgb($type) {
}

@mixin css-var-from-global($var, $gVar) {
}