/*
 * @Author: xuqiaoping
 * @Date: 2023-06-05 09:53:50
 * @LastEditors: xuqiaoping
 * @LastEditTime: 2023-10-16 16:01:58
 * @Description: SCSS 变量配置文件
 */
@use "sass:map";
@use "sass:math";
@use "../mixins/function.scss" as *;

// 配置颜色变量, 这里就简单使用element-ui的颜色配置
/**
 * 定义变量
 */
// types
$types: primary, success, warning, danger, error, info;

$header-padding: 0 20px !default;
$footer-padding: 0 20px !default;
$main-padding: 20px !default;

$colors: () !default;
$colors: map.deep-merge(
  (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #2d8cf0
    ),
    "success": (
      "base": #19be6b
    ),
    "warning": (
      "base": #ff9900
    ),
    "danger": (
      "base": #f56c6c
    ),
    "error": (
      "base": #ed4014
    ),
    "info": (
      "base": #2db7f5
    ),
    "normal": (
      "base": "#e6ebf1"
    )
  ),
  $colors
);

$color-white: map.get($colors, "white") !default;
$color-black: map.get($colors, "black") !default;
$color-primary: map.get($colors, "primary", "base") !default;
$color-success: map.get($colors, "success", "base") !default;
$color-warning: map.get($colors, "warning", "base") !default;
$color-danger: map.get($colors, "danger", "base") !default;
$color-error: map.get($colors, "error", "base") !default;
$color-info: map.get($colors, "info", "base") !default;

// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
  $colors: map.deep-merge(
    (
      $type: (
        "#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
      )
    ),
    $colors
  ) !global;
}

// $colors.primary.light-i
// --el-color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, "light", $color-white);
  }
}

// --el-color-primary-dark-2
@each $type in $types {
  @include set-color-mix-level($type, 2, "dark", $color-black);
}

// text-color
$text-color: () !default;
$text-color: map.merge(
  (
    "primary": #303133,
    "regular": #606266,
    "secondary": #909399,
    "placeholder": #a8abb2,
    "disabled": #c0c4cc
  ),
  $text-color
);

// border-color
$border-color: () !default;
$border-color: map.merge(
  (
    "": #dcdfe6,
    "light": #e4e7ed,
    "lighter": #ebeef5,
    "extra-light": #f2f6fc,
    "dark": #d4d7de,
    "darker": #cdd0d6
  ),
  $border-color
);

$fill-color: () !default;
$fill-color: map.merge(
  (
    "": #f0f2f5,
    "light": #f5f7fa,
    "lighter": #fafafa,
    "extra-light": #fafcff,
    "dark": #ebedf0,
    "darker": #e6e8eb,
    "blank": #ffffff
  ),
  $fill-color
);

// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    "": #ffffff,
    "page": #f2f3f5,
    "overlay": #ffffff
  ),
  $bg-color
);

// Border
$border-width: 1px !default;
$border-style: solid !default;
$border-color-hover: getCssVar("text-color", "disabled") !default;

$border-radius: () !default;
$border-radius: map.merge(
  (
    "base": 4px,
    "small": 2px,
    "round": 20px,
    "circle": 100%
  ),
  $border-radius
);
$font-size: () !default;
$font-size: map.merge(
  (
    "extra-large": 20px,
    "large": 18px,
    "medium": 16px,
    "base": 14px,
    "small": 13px,
    "extra-small": 12px
  ),
  $font-size
);

$icon-font-size: () !default;
$icon-font-size: map.merge(
  (
    "extra-large": 26px,
    "large": 24px,
    "medium": 20px,
    "base": 16px,
    "small": 14px,
    "extra-small": 12px
  ),
  $icon-font-size
);
// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
  (
    "font-weight": getCssVar("font-weight-primary"),
    "border-color": getCssVar("border-color"),
    "bg-color": getCssVar("fill-color", "blank"),
    "text-color": getCssVar("text-color", "regular"),
    "disabled-text-color": getCssVar("disabled-text-color"),
    "disabled-bg-color": getCssVar("fill-color", "blank"),
    "disabled-border-color": getCssVar("border-color-light"),
    "divide-border-color": rgba($color-white, 0.5),
    "hover-text-color": getCssVar("color-primary"),
    "hover-bg-color": getCssVar("color-primary", "light-9"),
    "hover-border-color": getCssVar("color-primary-light-7"),
    "active-text-color": getCssVar("button-hover-text-color"),
    "active-border-color": getCssVar("color-primary"),
    "active-bg-color": getCssVar("button", "hover-bg-color"),
    "outline-color": getCssVar("color-primary", "light-5"),
    "hover-link-text-color": getCssVar("color-info"),
    "active-color": getCssVar("text-color", "primary")
  ),
  $button
);
$button-border-width: $border-width !default;

// need mix, so do not use css var
$button-hover-tint-percent: 20%;
$button-active-shade-percent: 10%;

$button-border-color: () !default;
$button-bg-color: () !default;
$button-text-color: () !default;

@each $type in $types {
  $button-border-color: map.merge(
    (
      $type: map.get($colors, $type, "base")
    ),
    $button-border-color
  ) !global;

  $button-bg-color: map.merge(
    (
      $type: map.get($colors, $type, "base")
    ),
    $button-bg-color
  ) !global;
}

$button-font-size: () !default;
$button-font-size: map.merge(
  (
    "large": getCssVar("font-size", "base"),
    "default": getCssVar("font-size", "base"),
    "small": 12px
  ),
  $button-font-size
);

$button-border-radius: () !default;
$button-border-radius: map.merge(
  (
    "large": getCssVar("border-radius", "base"),
    "default": getCssVar("border-radius", "base"),
    "small": calc(#{getCssVar("border-radius", "base")} - 1px)
  ),
  $button-border-radius
);

$button-padding-vertical: () !default;
$button-padding-vertical: map.merge(
  (
    "large": 13px,
    "default": 9px,
    "small": 6px
  ),
  $button-padding-vertical
);

$button-padding-horizontal: () !default;
$button-padding-horizontal: map.merge(
  (
    "large": 20px,
    "default": 16px,
    "small": 12px
  ),
  $button-padding-horizontal
);

//----------------------