/* Element Chalk Variables */
@use 'sass:math';
@use 'sass:map';

@use '../mixins/function.scss' as *;

// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1

// types
$types: primary, success, warning, danger, error, info;

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #262626,
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $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
// --yz-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);
  }
}

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

$text-color: () !default;
$text-color: map.merge(
  (
    'primary': #303133,
    'regular': #606266,
    'secondary': #909399,
    'placeholder': #a8abb2,
    'disabled': #c0c4cc,
  ),
  $text-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
);

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
  (
    '': (
      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
      0px 8px 20px rgba(0, 0, 0, 0.08),
    ),
    'light': (
      0px 0px 12px rgba(0, 0, 0, 0.12),
    ),
    'lighter': (
      0px 0px 6px rgba(0, 0, 0, 0.12),
    ),
    'dark': (
      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
      0px 12px 32px rgba(0, 0, 0, 0.12),
      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
    ),
  ),
  $box-shadow
);

// Typography
$font-family: () !default;
$font-family: map.merge(
  (
    // default family
    '':
      "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', STHeiti, SimSun, sans-serif"
  ),
  $font-family
);

$font-size: () !default;
$font-size: map.merge(
  (
    'extra-large': 20px,
    'large': 18px,
    'medium': 16px,
    'base': 14px,
    'small': 13px,
    'extra-small': 12px,
  ),
  $font-size
);

$font-weight: () !default;
$font-weight: map.merge(
  (
    // 超细体
    'extra-lighter': 200,
    // 细体
    'lighter': 300,
    // 正常
    'normal': normal,
    // 中等的
    'medium': 500,
    // 半粗体
    'semi-bold': 600,
    // 粗体
    'bold': 700
  ),
  $font-weight
);

// zIndex
$z-index: () !default;
$z-index: map.merge(
  (
    'normal': 1,
    'top': 1000,
    'popper': 2000,
  ),
  $z-index
);

// Disable default
$disabled: () !default;
$disabled: map.merge(
  (
    'bg-color': getCssVar('fill-color', 'light'),
    'text-color': getCssVar('text-color', 'placeholder'),
    'border-color': getCssVar('border-color', 'light'),
  ),
  $disabled
);

$common-component-size: () !default;
$common-component-size: map.merge(
  (
    'large': 40px,
    'default': 32px,
    'small': 24px,
  ),
  $common-component-size
);

// overlay
$overlay-color: () !default;
$overlay-color: map.merge(
  (
    '': rgba(0, 0, 0, 0.8),
    'light': rgba(0, 0, 0, 0.7),
    'lighter': rgba(0, 0, 0, 0.5),
  ),
  $overlay-color
);

// mask
$mask-color: () !default;
$mask-color: map.merge(
  (
    '': rgba(255, 255, 255, 0.9),
    'extra-light': rgba(255, 255, 255, 0.3),
  ),
  $mask-color
);

// transition
$transition: () !default;
$transition: map.merge(
  (
    'all': all getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
    'fade': opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
    'md-fade': (
      transform getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
      opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
    ),
    'fade-linear': opacity getCssVar('transition-duration-fast') linear,
    'border': border-color getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
    'box-shadow': box-shadow getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
    'color': color getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
  ),
  $transition
);

$transition-duration: () !default;
$transition-duration: map.merge(
  (
    '': 0.3s,
    'fast': 0.2s,
  ),
  $transition-duration
);

$transition-function: () !default;
$transition-function: map.merge(
  (
    'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
    'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
  ),
  $transition-function
);

// Components
// ---
// Contacts 通讯录
// css3 var in packages/theme-chalk/src/contacts.scss
$contacts: () !default;
$contacts: map.merge(
  (
    padding: 16px,
    divider: getCssVar('border-width') getCssVar('border-style') getCssVar('border-color'),
    height: min(550px, 80vh),
  ),
  $contacts
);
// ContactsSelect 通讯录 选择器
// css3 var in packages/theme-chalk/src/contacts-select.scss
$contacts-select: () !default;
$contacts-select: map.merge(
  (
    divider: getCssVar('contacts', 'divider'),
  ),
  $contacts-select
);