@use 'sass:math';
@use 'sass:map';
@use './mixins/function.scss' as *;
@use './element.scss';
@use './reset.scss';
@use './common.scss';
$--colors: (
  'white': #ffffff,
  'black': #000000,
  'primary': (
    'base': #169bfa
  ),
  'success': (
    'base': #31cf9a
  ),
  'warning': (
    'base': #ffb95b
  ),
  'danger': (
    'base': #ff5f5f
  ),
  'error': (
    'base': #ff5f5f
  ),
  'info': (
    'base': #2d3e53
  )
);
// 字体颜色
$--text-color: (
  'primary': #2d3e53,
  'regular': #455a74,
  'secondary': #7b93a7,
  'placeholder': #a8abb2,
  'disabled': #c0c4cc
);

// 字体大小
$--font-size: (
  'extra-large': 20px,
  'large': 18px,
  'medium': 16px,
  'base': 12px,
  'small': 13px,
  'extra-small': 12px
);

// 按钮
$--button: ();
// 按钮字体大小
$--button-font-size: (
  'large': getCssVar('font-size', 'base'),
  'default': getCssVar('font-size', 'extra-small'),
  'small': getCssVar('font-size', 'extra-small')
);

// 表单
$--table: (
  'header-text-color': #7b93a7,
  'header-bg-color': #f9f9f9,
  'fixed-left-column': inset 10px 0 8px -8px rgb(0 0 0 / 15%),
  'fixed-right-column': inset -10px 0 8px -8px rgb(0 0 0 / 15%)
);

$--table-font-size: (
  'large': getCssVar('font-size', 'extra-small'),
  'default': 14px,
  'small': 12px
);

// 单选框
$--radio: (
  'font-size': 12px,
  'input-height': 12px,
  'input-width': 12px
);
$--radio-button: ();

// 滑块
$--slider: (
  'height': 4px,
  'button-size': 12px,
  'disabled-color': #ebebeb
);
$--common-component-size: (
  'large': 42px,
  'default': 34px,
  'small': 30px
);
// 输入框
$--input: (
  'hover-border-color': getCssVar('color-primary'),
  'large': 42px,
  'default': 34px,
  'small': 30px
);

$--input-height: () !default;
$--input-height: map.merge($--common-component-size, $--input-height);
// 选择框
$--select: (
  'close-hover-color': getCssVar('color-primary'),
  'border-color-hover': getCssVar('color-primary')
);
$--select-option: (
  'height': 32px,
  'hover-background': getCssVar('color-primary', 'light-9')
);

// 复选框
$--checkbox: (
  'font-size': 12px,
  'input-height': 12px,
  'input-width': 12px
);
// 分页
$--pagination: (
  'font-size': 12px,
  'border-radius': 4px,
  'button-bg-color': transparent
);

// 导航
$--menu: (
  'active-color': #ffffff,
  'text-color': #aaaab1,
  'hover-text-color': #ffffff,
  'bg-color': #2a2b3c,
  'hover-bg-color': #169bfa,
  'border-color': transparent,

  'item-font-size': 14px,
  'item-height': 40px,
  'horizontal-sub-item-height': 40px
);

// 穿梭框
$--transfer: (
  'border-color': #ebebeb,
  'border-radius': 4px,
  'panel-width': 240px,
  'panel-header-height': 32px,
  'panel-header-bg-color': #ffffff,
  'item-height': 32px
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors,
  $font-size: $--font-size,
  $button: $--button,
  $button-font-size: $--button-font-size,
  $table: $--table,
  $table-font-size: $--table-font-size,
  $radio: $--radio,
  $radio-button: $--radio-button,
  $slider: $--slider,
  $input: $--input,
  $input-height: $--input-height,
  $common-component-size: $--common-component-size,
  $select: $--select,
  $checkbox: $--checkbox,
  $select-option: $--select-option,
  $pagination: $--pagination,
  $menu: $--menu,
  $transfer: $--transfer
);

:root {
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary-light-3: #45affb;
  --el-color-primary-light-5: #73c3fc;
  --el-color-success-light-3: #5ad9ae;
  --el-color-success-light-5: #83e2c2;
  --el-color-warning-light-3: #ffc77c;
  --el-color-warning-light-5: #ffd59d;
  --el-color-danger-light-3: #ff7f7f;
  --el-color-danger-light-5: #ff9f9f;
  --el-color-error-light-3: #ff7f7f;
  --el-color-error-light-5: #ff9f9f;
}