@use 'sass:map';
@use "var" as var;

// 本页面通过获取var.scss中的颜色变量，生成各种类样式和css变量

:root {
  // 生成var变量
  @each $name, $color in var.$colors-vars {
    --yk-color-#{$name}: #{$color};
  }
}

// 生成字体颜色和背景颜色
@each $name, $color in var.$colors-vars {
  .color-#{$name} {
    color: $color !important;
  };
  .bg-color-#{$name} {
    background-color: $color !important;
  };
}

@each $name, $color in var.$text-color {
  // 生成字体颜色
  .text-color-#{$name} {
    color: $color !important;
  };
}

// 生成边框颜色
$directions: ('': '', '-t': '-top', '-r': '-right', '-b': '-bottom', '-l': '-left');
$direction-extend: ('y': ('t', 'b'), 'x': ('l', 'r'));

//@each $name, $color in map.deep-merge(global.$border-color, $colors-base) {
@each $name, $color in map.deep-merge(var.$border-color, var.$colors-vars) {
  // 如果$name是''，如'': #FFFFFF，生成样式时以base作为name名称
  @if $name == '' {
    $name: 'base'
  }
  @each $suffix, $attr-suffix in $directions {
    .bor-#{$name}#{$suffix} {
      border#{$attr-suffix}: 1px solid $color !important;
    }
  }
  @each $suffix, $item in $direction-extend {
    .bor-#{$name}-#{$suffix} {
      @each $suffix-2 in $item {
        @extend .bor-#{$name}-#{$suffix-2}
      }
    }
  }
}