@use 'sass:map';
@use 'sass:color';

@use 'config.scss' as *;
@use 'functions.scss' as *;
@use'../common/var.scss' as config ;


@mixin set-css-color-type($type) {
  --hlx-color-#{$type}: #{map.get(config.$colors, $type, 'base')};
}
@mixin set-css-var-type($name, $type, $--variables) {
  --hlx-#{$name}-#{$type}: #{map.get($--variables, $type)};
}
@mixin set-css-text-type($type) {
  --hlx-text-color-#{$type}: #{map.get(config.$text-color, $type)};
}
@mixin set-css-icon-type($type) {
  --hlx-icon-size-#{$type}: #{map.get(config.$icon, $type)};
}
@mixin set-css-border-type($type) {
  @if $type == '' {
    --hlx-border-color: #{map.get(config.$border-color, $type)};
  } @else {
    --hlx-border-color-#{$type}: #{map.get(config.$border-color, $type)};
  }
}
@mixin set-css-line-height-type($type) {
  @if $type == '' {
    --hlx-line-height: #{map.get(config.$line-height, $type)};
  } @else {
    --hlx-line-height-#{$type}: #{map.get(config.$line-height, $type)};
  }
}
@mixin set-css-font-type($type) {
  @if $type == type {
    --hlx-font-#{$type}-content: #{map.get(config.$font, $type, 'content')};
    --hlx-font-#{$type}-title: #{map.get(config.$font, $type, 'title')};
  }
  @if $type == header-size {
    --hlx-font-#{$type}: #{map.get(config.$font, $type, '')};
    --hlx-font-#{$type}-sm: #{map.get(config.$font, $type, 'sm')};
    --hlx-font-#{$type}-lg: #{map.get(config.$font, $type, 'lg')};
    --hlx-font-#{$type}-xl: #{map.get(config.$font, $type, 'xl')};
    --hlx-font-#{$type}-xxl: #{map.get(config.$font, $type, 'xxl')};
  }
  @if $type == content-size {
    --hlx-font-#{$type}: #{map.get(config.$font, $type, '')};
    --hlx-font-#{$type}-sm: #{map.get(config.$font, $type, 'sm')};
    --hlx-font-#{$type}-lg: #{map.get(config.$font, $type, 'lg')};
    --hlx-font-#{$type}-xl: #{map.get(config.$font, $type, 'xl')};
    --hlx-font-#{$type}-xxl: #{map.get(config.$font, $type, 'xs')};
  }
}

@mixin set-css-var-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}
@mixin get-css-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}
@mixin set-css-color-rgb($type) {
  $color: map.get(config.$colors, $type, 'base');
  // @debug 'color #{$color}';
  @include set-css-var-value(
    ('color', $type, 'rgb'),
    // #{red($color),
    // green($color),
    // blue($color)}
    #{color.channel($color, "red", $space: rgb),
color.channel($color, "green", $space: rgb),
color.channel($color, "blue", $space: rgb)}
  );
}
// @mixin set-css-border-color-rgb($type) {
//     $color: map.get($--border-color, $type);
//     // @if $color == null{

//     //   $color:map.get($--border-color, $type,'light');
//     // }
//     @debug "color #{$color}";
//     @include set-css-var-value(
//       ('color', $type, 'rgb'),
//       #{red($color),
//       green($color),
//       blue($color)}
//     );
//   }