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

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

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

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #fff,
    'black': #000,
    '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}':
          color.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);
}

$padding: () !default;
$padding: map.merge(
  (
    '': 16px,
    'left': 16px,
    'right': 16px,
    'top': 16px,
    'bottom': 16px,
  ),
  $padding
);

$text-color: () !default;
$text-color: map.merge(
  (
    '': #303133,
    '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': #fff,
  ),
  $fill-color
);

// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    '': #fff,
    'page': #f5f7f9,
    'overlay': #fff,
  ),
  $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(
  (
    '': (
      0 12px 32px 4px rgb(0 0 0 / 4%),
      0 8px 20px rgb(0 0 0 / 8%),
    ),
    'light': (
      0 0 12px rgb(0 0 0 / 12%),
    ),
    'lighter': (
      0 0 6px rgb(0 0 0 / 12%),
    ),
    'dark': (
      0 16px 48px 16px rgb(0 0 0 / 8%),
      0 12px 32px rgb(0 0 0 / 12%),
      0 8px 16px -8px rgb(0 0 0 / 16%),
    ),
  ),
  $box-shadow
);

// Typography
$font-family: () !default;
$font-family: map.merge(
  (
    // default family
    '':
      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, 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
);

// 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(
  (
    '': rgb(0 0 0 / 80%),
    'light': rgb(0 0 0 / 70%),
    'lighter': rgb(0 0 0 / 50%),
  ),
  $overlay-color
);

// mask
$mask-color: () !default;
$mask-color: map.merge(
  (
    '': rgb(255 255 255 / 90%),
    'extra-light': rgb(255 255 255 / 30%),
  ),
  $mask-color
);

// components

/* skeleton 骨架屏 start */
$skeleton: () !default;
$skeleton: map.merge(
  (
    'bg-color': rgb(190 190 190 / 20%),
    // 骨架屏元素背景颜色
    'transition-color': rgb(129 129 129 / 24%),
    // 骨架屏元素动画效果过渡颜色
  ),
  $skeleton
);

/* skeleton 骨架屏 end */

/* 应用布局 start */
$app-layout: () !default;
$app-layout: map.merge(
  (
    'bg-color': getCssVar('bg-color-page'),
    'text-color': #fff,
    'caption-font-size': 18px,
  ),
  $app-layout
);

$app-layout-nav: () !default;
$app-layout-nav: map.merge(
  (
    'bg-color': #fff,
    'width': 256px,
    'width-collapse': 80px,
    'box-shadow': 2px 0 8px 0 rgb(29 35 41 / 5%),
  ),
  $app-layout-nav
);

$app-layout-header: () !default;
$app-layout-header: map.merge(
  (
    'height': 64px,
    'bg-color': #191a23,
    'text-color': getCssVar('layout', 'text-color'),
    'box-shadow': 0 1px 4px rgb(0 21 41 / 8%),
    'icon-font-size': 20px,
    'back-icon-font-size': 20px,
    'back-icon-margin': 0 0 0 20px,
  ),
  $app-layout-header
);

$app-layout-content: () !default;
$app-layout-content: map.merge(
  (
    'bg-color': getCssVar('layout', 'bg-color'),
  ),
  $app-layout-content
);

/* 应用布局 end */

/* view-toolbar 视图工具栏 start */
$view-toolbar: () !default;
$view-toolbar: map.merge(
  (
    'item-margin': 0 4px,
    'icon-margin': 0 5px 0 0,
    'icon-max-width': 16px,
    'icon-max-height': 16px,
  ),
  $view-toolbar
);

$view-toolbar-embed: () !default;
$view-toolbar-embed: map.merge(
  (
    'item-height': 21px,
    'item-line-height': 21px,
    'bg-color': transparent,
  ),
  $view-toolbar-embed
);

/* view-toolbar 视图工具栏 end */

/* wf-toolbar 工作流工具栏 start */
$wf-toolbar: () !default;
$wf-toolbar: map.merge(
  (
    'item-margin': 0 4px,
  ),
  $wf-toolbar
);

/* wf-toolbar 工作流工具栏 end */

/* app-menu 菜单 start */
$app-menu: () !default;
$app-menu: map.merge(
  (
    'item-selected-color': getCssVar('color', 'primary'),
    'item-selected-bg-color': #f0faff,
    'item-hover-color': getCssVar('color', 'primary'),
    'item-padding': 14px 24px,
    'item-font-size': 14px,
    'item-height': 52px,
    'item-color': #515a6e,
    'collapse-item-hover-color': getCssVar('color', 'primary'),
    'collapse-item-padding': 14px 24px,
    'icon-width': 20px,
    'icon-height': 20px,
    'icon-margin': 0 5px 0 0,
    'scrollbar-width': 4px,
    'scrollbar-bg-color': rgb(0 0 0 / 10%),
  ),
  $app-menu
);

/* app-menu 菜单 end */

/* 表单 start */
$form: () !default;
$form: map.merge(
  (
    'text-color': getCssVar('text-color', 'primary'),
    'font-size': getCssVar('font-size', 'base'),
    'bg-color': transparent,
  ),
  $form
);

$form-page: () !default;
$form-page: map.merge(
  (
    'caption-color': getCssVar('text-color', 'primary'),
    'caption-font-size': getCssVar('font-size', 'medium'),
    'caption-bg-color': #2d8cf0,
    'caption-hover-color': #0879f3,
  ),
  $form-page
);

$form-group: () !default;
$form-group: map.merge(
  (
    'bg-color': getCssVar('bg-color', 'overlay'),
  ),
  $form-group
);

$form-group-header: () !default;
$form-group-header: map.merge(
  (
    'bg-color': getCssVar('bg-color', 'overlay'),
    'padding': getCssVar('padding'),
  ),
  $form-group
);

$form-group-caption: () !default;
$form-group-caption: map.merge(
  (
    'color': getCssVar('text-color', 'primary'),
    'font-size': getCssVar('font-size', 'medium'),
    'font-style': getCssVar('font-family'),
  ),
  $form-group
);

$form-group-content: () !default;
$form-group-content: map.merge(
  (
    'padding': getCssVar('padding'),
  ),
  $form-group
);

$form-item: () !default;
$form-item: map.merge(
  (
    'color': getCssVar('text-color', 'primary'),
    'hover-color': getCssVar('color', 'primary'),
    'border-color': getCssVar('border-color'),
    'font-size': getCssVar('font-size', 'base'),
    'font-family': getCssVar('font-size', 'base'),
    'error-color': getCssVar('color', 'error'),
    'placeholder-color': getCssVar('text-color', 'placeholder'),
    'disable-color': getCssVar('text-color', 'secondary'),
    'disable-bg-color': #f5f5f5,
    'disable-border-color': #e4e4e4,
    'line-height': 32px,
  ),
  $form-item
);

$form-item-caption: () !default;
$form-item-caption: map.merge(
  (
    'color': getCssVar('form-item', 'text-color', 'primary'),
    'font-size': getCssVar('form-item', 'font-size', 'base'),
    'font-family': getCssVar('form-item', 'font-family'),
  ),
  $form-item-caption
);

$form-item-container: () !default;
$form-item-container: map.merge(
  (
    'label-width': '130px',
    'line-height': 32px,
  ),
  $form-item-container
);

$form-druipart: () !default;
$form-druipart: map.merge(
  (
    'mask-width': 100%,
    'mask-height': 100%,
  ),
  $form-druipart
);

/* 表单 end */

/* 视图base start */
$view: () !default;
$view: map.merge(
  (
    'caption-icon-margin': 0 10px 0 0,
  ),
  $view
);

/* 视图base end */

/* 视图布局 start */
$view-layout: () !default;
$view-layout: map.merge(
  (
    'text-color': getCssVar('text-color', 'primary'),
    'bg-color': getCssVar('bg-color', 'page'),
  ),
  $view-layout
);

$view-layout-header: () !default;
$view-layout-header: map.merge(
  (
    'height': 60px,
    'padding': 16px 32px 0,
    'bg-color': #fff,
    'border-bottom': 1px solid #e8eaec,
    'caption-max-width': 300px,
    'caption-font-weight': 500,
    'caption-font-size': getCssVar('font-size', 'extra-large'),
    'caption-color': getCssVar('text-color', 'primary'),
  ),
  $view-layout-header
);

$view-layout-content: () !default;
$view-layout-content: map.merge(
  (
    'text-color': getCssVar('view-layout', 'text-color'),
    'bg-color': getCssVar('view-layout', 'bg-color'),
    'padding': 0 0 0 24px,
    'margin': 16px 0 0,
    'border-radius': 4px,
    'min-height': 300px,
    'body-bg-color': #fff,
  ),
  $view-layout-content
);

// 抽屉
$view-layout-drawer-header: () !default;
$view-layout-drawer-header: map.merge(
  (
    'padding': 16px 32px 0,
  ),
  $view-layout-drawer-header
);

$view-layout-drawer-content: () !default;
$view-layout-drawer-content: map.merge(
  (
    'padding': 0,
    'min-height': 0,
  ),
  $view-layout-drawer-content
);

// 模态
$view-layout-modal-header: () !default;
$view-layout-modal-header: map.merge(
  (
    'padding': 16px 32px 0,
  ),
  $view-layout-modal-header
);

$view-layout-modal-content: () !default;
$view-layout-modal-content: map.merge(
  (
    'padding': 0,
    'min-height': 0,
  ),
  $view-layout-modal-content
);

// 嵌入
$view-layout-embed-header: () !default;
$view-layout-embed-header: map.merge(
  (
    'padding': 8px,
    'height': 48px,
    'line-height': 31px,
    'caption-font-size': getCssVar('font-size', 'base'),
    'caption-color': getCssVar('text-color', 'primary'),
    'content-height': 31px,
  ),
  $view-layout-embed-header
);

$view-layout-embed-content: () !default;
$view-layout-embed-content: map.merge(
  (
    'padding': 0,
    'margin': 0,
  ),
  $view-layout-embed-content
);

/* 视图布局 end */

/* 表格 start */
$grid: () !default;
$grid: map.merge(
  (
    'text-color': getCssVar('text-color', 'primary'),
    'bg-color': #fff,
    'padding': getCssVar('padding'),
  ),
  $grid
);

$grid-header: () !default;
$grid-header: map.merge(
  (
    'text-color': #515a6e,
    'height': 45px,
  ),
  $grid-header
);

$grid-content: () !default;
$grid-content: map.merge(
  (
    'text-color': getCssVar('grid', 'text-color'),
    'item-highlight-bg-color': #ebf7ff,
    'item-hover-bg-color': #ebf7ff,
  ),
  $grid-content
);

$grid-page: () !default;
$grid-page: map.merge(
  (
    'text-color': getCssVar('grid', 'text-color'),
    'height': 50px,
    'padding': 16px 0 0 0,
  ),
  $grid-page
);

$grid-ua-column: () !default;
$grid-ua-column: map.merge(
  (
    'btn-bg-color': transparent,
    'btn-hover-color': getCssVar('color', 'primary', 'light-3'),
    'btn-color': getCssVar('color', 'primary'),
  ),
  $grid-ua-column
);

$grid-field-column: () !default;
$grid-field-column: map.merge(
  (
    'font-color': #2d8cf0,
  ),
  $grid-field-column
);

/* 表格 end */

/* 模态 start */
$modal: () !default;
$modal: map.merge(
  (
    'z-index': 500,
  ),
  $modal
);

/* 模态 end */

/* 抽屉 start */
$drawer: () !default;
$drawer: map.merge(
  (
    'z-index': 500,
  ),
  $drawer
);

/* 抽屉 end */

/* 多项选择视图 start */
$mpickup-view-center: () !default;
$mpickup-view-center: map.merge(
  (
    'width': 50px,
    'bg-color': #f5f7f9,
  ),
  $mpickup-view-center
);

$mpickup-view-right: () !default;
$mpickup-view-right: map.merge(
  (
    'width': 200px,
    'padding': 50px 0 0,
    'bg-color': #fff,
    'item-padding': 10px,
    'item-border-bottom': 1px solid #e8eaec,
    'item-selected-bg-color': getCssVar('color', 'primary'),
    'item-selected-color': #fff,
  ),
  $mpickup-view-right
);

$mpickup-view-footer: () !default;
$mpickup-view-footer: map.merge(
  (
    'padding': 12px 16px,
    'border-top': 1px solid #e8eaec,
    'btn-margin': 0 0 0 10px,
    'confirm-btn-bg-color': getCssVar('color', 'primary'),
    'confirm-btn-color': #fff,
  ),
  $mpickup-view-footer
);

/* 多项选择 end */

/* 选项操作视图 start */
$opt-view-footer: () !default;
$opt-view-footer: map.merge(
  (
    'padding': 12px 16px,
    'border-top': 1px solid #e8eaec,
    'btn-margin': 0 0 0 10px,
    'confirm-btn-bg-color': getCssVar('color', 'primary'),
    'confirm-btn-color': #fff,
  ),
  $opt-view-footer
);

/* 选项操作视图 end */

/* 快速搜索 start */
$quick-search-embed: () !default;
$quick-search-embed: map.merge(
  (
    'height': 21px,
    'line-height': 21px,
  ),
  $quick-search-embed
);

/* 快速搜索 end */

/* 搜索表单 start */
$search-form: () !default;
$search-form: map.merge(
  (
    'bg-color': #fff,
    'margin': 16px 0 0 24px,
  ),
  $search-form
);

$search-form-buttons: () !default;
$search-form-buttons: map.merge(
  (
    'padding': 0 16px 16px,
    'btn-margin': 0 0 0 10px,
    'search-btn-bg-color': getCssVar('color', 'primary'),
    'search-btn-color': #fff,
  ),
  $search-form-buttons
);

/* 搜索表单 end */

/* 工作流动态启动视图 start */
$wf-dyna-start-view-footer: () !default;
$wf-dyna-start-view-footer: map.merge(
  (
    'padding': 12px 16px,
    'border-top': 1px solid #e8eaec,
    'btn-margin': 0 0 0 10px,
    'confirm-btn-bg-color': getCssVar('color', 'primary'),
    'confirm-btn-color': #fff,
  ),
  $wf-dyna-start-view-footer
);

/* 工作流动态启动视图 end */

/* 工作流动态操作视图 start */
$wf-dyna-action-view-footer: () !default;
$wf-dyna-action-view-footer: map.merge(
  (
    'padding': 12px 16px,
    'border-top': 1px solid #e8eaec,
    'btn-margin': 0 0 0 10px,
    'confirm-btn-bg-color': getCssVar('color', 'primary'),
    'confirm-btn-color': #fff,
  ),
  $wf-dyna-action-view-footer
);

/* 工作流动态操作视图 end */

// app-image-upload 图片上传备用
// $app-image-upload: () !default;
// $app-image-upload: map.merge(
//   (
//     'box-width': 120px,
//     'box-height': 120px,
//     'list-item-margin': 5px,
//     'list-item-bg-color': getCssVar('bg-color'),
//     'list-item-border': 1px solid getCssVar('border-color-light'),
//     'list-item-border-radius': getCssVar('border-radius-base'),
//     'list-item-box-shadow': getCssVar('box-shadow'),
//     'list-item-cover-bg-color': rgb(0 0 0 / 60%),
//     'list-item-cover-i-color': getCssVar('color-white'),
//     'list-item-cover-i-size': getCssVar('font-size-extra-large'),
//     'list-item-cover-i-margin': 0 2px,
//   ),
//   $app-image-upload
// );

/* 流程版本选择组件 start */
$wf-version-select: () !default;
$wf-version-select: map.merge(
  (
    'padding': 50px 16px 0,
  ),
  $wf-version-select
);

$wf-version-select-buttons: () !default;
$wf-version-select-buttons: map.merge(
  (
    'padding': 12px 0,
    'border-top': 1px solid #e8eaec,
    'btn-margin': 0 0 0 10px,
    'confirm-btn-bg-color': getCssVar('color', 'primary'),
    'confirm-btn-color': #fff,
  ),
  $wf-version-select-buttons
);

/* 流程版本选择组件 end */
