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

@import '../mixins/config';

// 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': #000000,
    '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
@mixin set-color-type-light($type, $number) {
  $--colors: map.deep-merge(
    (
      $type: (
        'light-#{$number}':
          mix(
            $--color-white,
            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
@for $i from 1 through 9 {
  @each $type in $--types {
    @include set-color-type-light($type, $i);
  }
}

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

$--border-color: () !default;
$--border-color: map.merge(
  (
    'base': #dcdfe6,
    'light': #e4e7ed,
    'lighter': #ebeef5,
    'extra-light': #f2f6fc,
  ),
  $--border-color
);

// Background
/// color|1|Background Color|4
$--background-color-base: #f5f7fa !default;

/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: var(--el-text-color-placeholder) !default;
$--border-base: $--border-width-base $--border-style-base
  map.get($--border-color, 'base') !default;
/// borderRadius|1|Radius|0

$--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(
  (
    'base': (
      0 2px 4px rgba(0, 0, 0, 0.12),
      0 0 6px rgba(0, 0, 0, 0.04),
    ),
    'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
  ),
  $--box-shadow
);

/* Typography
-------------------------- */
$--font-path: 'fonts' !default;
$--font-display: 'auto' !default;

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

/* Disable base
-------------------------- */
$--disabled-fill-base: var(--el-background-color-base) !default;
$--disabled-color-base: var(--el-text-color-placeholder) !default;
$--disabled-border-base: var(--el-border-color-light) !default;

/* Checkbox
-------------------------- */
// css3 var in packages/theme-chalk/src/checkbox.scss
$--checkbox: () !default;
$--checkbox: map.merge(
  (
    'font-size': 14px,
    'font-weight': var(--el-font-weight-primary),
    'font-color': var(--el-text-color-regular),
    'input-height': 14px,
    'input-width': 14px,
    'border-radius': var(--el-border-radius-small),
    'background-color': var(--el-color-white),
    'input-border': var(--el-border-base),
    'disabled-border-color': var(--el-border-color-base),
    'disabled-input-fill': #edf2fc,
    'disabled-icon-color': var(--el-text-color-placeholder),
    'disabled-checked-input-fill': var(--el-border-color-extra-light),
    'disabled-checked-input-border-color': var(--el-border-color-base),
    'disabled-checked-icon-color': var(--el-text-color-placeholder),
    'checked-font-color': var(--el-color-primary),
    'checked-input-border-color': var(--el-color-primary),
    'checked-background-color': var(--el-color-primary),
    'checked-icon-color': var(--el-fill-base),
    'input-border-color-hover': var(--el-color-primary),
  ),
  $--checkbox
);

$--checkbox-button: () !default;
$--checkbox-button: map.merge(
  (
    'checked-background-color': var(--el-color-primary),
    'checked-font-color': var(--el-color-white),
    'checked-border-color': var(--el-color-primary),
  ),
  $--checkbox-button
);

/* Radio
-------------------------- */
/// fontSize||Font|1
$--radio: () !default;
$--radio: map.merge(
  (
    'font-size': var(--el-font-size-base),
    'font-color': var(--el-text-color-regular),
    'font-weight': var(--el-font-weight-primary),
    'input-height': 14px,
    'input-width': 14px,
    'input-border-radius': var(--el-border-radius-circle),
    'input-background-color': var(--el-color-white),
    'input-border': var(--el-border-base),
    'input-border-color': var(--el-border-color-base),
  ),
  $--radio
);

$--radio-button: () !default;
$--radio-button: map.merge(
  (
    'checked-background-color': var(--el-color-primary),
    'checked-font-color': var(--el-color-white),
    'checked-border-color': var(--el-color-primary),
    'disabled-checked-fill': var(--el-border-color-extra-light),
  ),
  $--radio-button
);

$--radio-disabled: () !default;
$--radio-disabled: map.merge(
  (
    'input-border-color': var(--el-disabled-border-base),
    'input-fill': var(--el-disabled-fill-base),
    'icon-color': var(--el-disabled-fill-base),
    'checked-input-border-color': var(--el-disabled-border-base),
    'checked-input-fill': var(--el-disabled-fill-base),
    'checked-icon-color': var(--el-text-color-placeholder),
  ),
  $--radio-disabled
);

$--radio-checked: () !default;
$--radio-checked: map.merge(
  (
    'font-color': var(--el-color-primary),
    'input-border-color': var(--el-color-primary),
    'icon-color': var(--el-color-primary),
  ),
  $--radio-checked
);

$--radio-input-border-color-hover: var(--el-color-primary) !default;

$--radio-bordered-padding: () !default;
$--radio-bordered-padding: map.merge(
  (
    'default': 12px 20px 0 10px,
    'medium': 10px 20px 0 10px,
    'small': 8px 15px 0 10px,
    'mini': 6px 15px 0 10px,
  ),
  $--radio-bordered-padding
);

$--radio-bordered-input-height: () !default;
$--radio-bordered-input-height: map.merge(
  (
    'medium': 14px,
    'small': 12px,
    'mini': 12px,
  ),
  $--radio-bordered-input-height
);

$--radio-bordered-input-width: () !default;
$--radio-bordered-input-width: map.merge(
  (
    'medium': 14px,
    'small': 12px,
    'mini': 12px,
  ),
  $--radio-bordered-input-width
);

$--radio-bordered-height: () !default;
$--radio-bordered-height: map.merge(
  (
    'default': 40px,
    'medium': 36px,
    'small': 32px,
    'mini': 28px,
  ),
  $--radio-bordered-height
);

/* Select
-------------------------- */
$--select: () !default;
$--select: map.merge(
  (
    'border-color-hover': var(--el-border-color-hover),
    'disabled-border': var(--el-disabled-border-base),
    'font-size': var(--el-font-size-base),
    'close-hover-color': var(--el-text-color-secondary),
    'input-color': var(--el-text-color-placeholder),
    'multiple-input-color': #666,
    'input-focus-border-color': var(--el-color-primary),
    'input-font-size': 14px,
  ),
  $--select
);

$--select-option: () !default;
$--select-option: map.merge(
  (
    'color': var(--el-text-color-regular),
    'disabled-color': var(--el-text-color-placeholder),
    'height': 34px,
    'hover-background': var(--el-background-color-base),
    'selected-font-color': var(--el-color-primary),
  ),
  $--select-option
);

$--select-group: () !default;
$--select-group: map.merge(
  (
    'color': var(--el-color-info),
    'height': 30px,
    'font-size': 12px,
  ),
  $--select-group
);

$--select-dropdown: () !default;
$--select-dropdown: map.merge(
  (
    'background': var(--el-color-white),
    'shadow': var(--el-box-shadow-light),
    'empty-color': #999,
    'max-height': 274px,
    'padding': 6px 0,
    'empty-padding': 10px 0,
    'border': 1px solid var(--el-border-color-light),
  ),
  $--select-dropdown
);

/* Alert
-------------------------- */
// css3 var in packages/theme-chalk/src/alert.scss
$--alert: () !default;
$--alert: map.merge(
  (
    'padding': 8px 16px,
    'border-radius-base': var(--el-border-radius-base),
    'title-font-size': 13px,
    'description-font-size': 12px,
    'close-font-size': 12px,
    'close-customed-font-size': 13px,
    'icon-size': 16px,
    'icon-large-size': 28px,
  ),
  $--alert
);

/* MessageBox
-------------------------- */
// css3 var in packages/theme-chalk/src/message-box.scss
$--messagebox: () !default;
$--messagebox: map.merge(
  (
    'title-color': var(--el-text-color-primary),
    'width': 420px,
    'border-radius': 4px,
    'font-size': var(--el-font-size-large),
    'content-font-size': var(--el-font-size-base),
    'content-color': var(--el-text-color-regular),
    'error-font-size': 12px,
    'padding-primary': 15px,
  ),
  $--messagebox
);

/* Message
-------------------------- */
// css3 var in packages/theme-chalk/src/message.scss
$--message: () !default;
$--message: map.merge(
  (
    'min-width': 380px,
    'background-color': #edf2fc,
    'padding': 15px 15px 15px 20px,
    'close-size': 16px,
    'close-icon-color': var(--el-text-color-placeholder),
    'close-hover-color': var(--el-text-color-secondary),
  ),
  $--message
);

/* Notification
-------------------------- */
// css3 var in packages/theme-chalk/src/notification.scss
$--notification: () !default;
$--notification: map.merge(
  (
    'width': 330px,
    'padding': 14px 26px 14px 13px,
    'radius': 8px,
    'shadow': var(--el-box-shadow-light),
    'border-color': var(--el-border-color-lighter),
    'icon-size': 24px,
    'close-font-size':
      var(--el-message-close-size, map.get($--message, 'close-size')),
    'group-margin-left': 13px,
    'group-margin-right': 8px,
    'content-font-size': var(--el-font-size-base),
    'content-color': var(--el-text-color-regular),
    'title-font-size': 16px,
    'title-color': var(--el-text-color-primary),
    'close-color': var(--el-text-color-secondary),
    'close-hover-color': var(--el-text-color-regular),
  ),
  $--notification
);

/* Input
-------------------------- */
// css3 var in packages/theme-chalk/src/input.scss
$--input: () !default;
$--input: map.merge(
  (
    'font-color': var(--el-text-color-regular),
    'border': var(--el-border-base),
    'border-color': var(--el-border-color-base),
    'border-radius': var(--el-border-radius-base),
    'background-color': var(--el-color-white),
    'icon-color': var(--el-text-color-placeholder),
    'placeholder-color': var(--el-text-color-placeholder),
    'hover-border': var(--el-border-color-hover),
    'clear-hover-color': var(--el-text-color-secondary),
    'focus-border': var(--el-color-primary),
  ),
  $--input
);

$--input-disabled: () !default;
$--input-disabled: map.merge(
  (
    'fill': var(--el-disabled-fill-base),
    'border': var(--el-disabled-border-base),
    'color': var(--el-disabled-color-base),
    'placeholder-color': var(--el-text-color-placeholder),
  ),
  $--input-disabled
);

$--input-font-size: () !default;
$--input-font-size: map.merge(
  (
    'default': var(--el-font-size-base, map.get($--font-size, 'base')),
    'medium': 14px,
    'small': 13px,
    'mini': 12px,
  ),
  $--input-font-size
);

$--input-height: () !default;
$--input-height: map.merge(
  (
    'default': 40px,
    'medium': 36px,
    'small': 32px,
    'mini': 28px,
  ),
  $--input-height
);

$--input-line-height: () !default;
$--input-line-height: map.merge(
  (
    'medium': 28px,
    'small': 24px,
    'mini': 20px,
  ),
  $--input-line-height
);

$--input-number-width: () !default;
$--input-number-width: map.merge(
  (
    'medium': 200px,
    'small': 130px,
    'mini': 130px,
  ),
  $--input-number-width
);

/* Cascader
-------------------------- */
// css3 var in packages/theme-chalk/src/cascader.scss
$--cascader: () !default;
$--cascader: map.merge(
  (
    'menu-font-color': var(--el-text-color-regular),
    'menu-selected-font-color': var(--el-color-primary),
    'menu-fill': var(--el-fill-base),
    'menu-font-size': var(--el-font-size-base),
    'menu-radius': var(--el-border-radius-base),
    'menu-border': solid 1px var(--el-border-color-light),
    'menu-shadow': var(--el-box-shadow-light),
    'node-background-hover': var(--el-background-color-base),
    'node-color-disabled': var(--el-text-color-placeholder),
    'color-empty': var(--el-text-color-placeholder),
    'tag-background': #f0f2f5,
  ),
  $--cascader
);

/* Button
-------------------------- */
// css3 var in packages/theme-chalk/src/button.scss
$--button: () !default;
$--button: map.merge(
  (
    'font-weight': var(--el-font-weight-primary),
    'border-color': var(--el-border-color-base),
    'background-color': var(--el-color-white),
    'font-color': var(--el-text-color-regular),
    'disabled-font-color': var(--el-text-color-placeholder),
    'disabled-background-color': var(--el-color-white),
    'disabled-border-color': var(--el-border-color-light),
    'divide-border-color': rgba($--color-white, 0.5),
  ),
  $--button
);

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

$--button-border-color: () !default;
$--button-background-color: () !default;
$--button-font-color: () !default;

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

  $--button-background-color: map.merge(
    (
      $type: map.get($--colors, $type, 'base'),
    ),
    $--button-background-color
  ) !global;

  $--button-font-color: map.merge(
    (
      $type: map.get($--colors, 'white'),
    ),
    $--button-font-color
  ) !global;
}

$--button-font-size: () !default;
$--button-font-size: map.merge(
  (
    'default': var(--el-font-size-base, map.get($--font-size, 'base')),
    'medium': var(--el-font-size-base, map.get($--font-size, 'base')),
    'small': 12px,
    'mini': 12px,
  ),
  $--button-font-size
);

$--button-border-radius: () !default;
$--button-border-radius: map.merge(
  (
    'default': var(--el-border-radius-base),
    'medium': var(--el-border-radius-base),
    'small': calc(var(--el-border-radius-base) - 1px),
    'mini': calc(var(--el-border-radius-base) - 1px),
  ),
  $--button-border-radius
);

$--button-padding-vertical: () !default;
$--button-padding-vertical: map.merge(
  (
    'default': 12px,
    'medium': 10px,
    'small': 9px,
    'mini': 7px,
  ),
  $--button-padding-vertical
);

$--button-padding-horizontal: () !default;
$--button-padding-horizontal: map.merge(
  (
    'default': 20px,
    'medium': 20px,
    'small': 15px,
    'mini': 15px,
  ),
  $--button-padding-horizontal
);

/* Switch
-------------------------- */
// css3 var in packages/theme-chalk/src/switch.scss
$--switch: () !default;
$--switch: map.merge(
  (
    'on-color': var(--el-color-primary),
    'off-color': var(--el-border-color-base),
    'font-size': var(--el-font-size-base),
    'core-border-radius': 10px,
    'width': 40px,
    'height': 20px,
    'button-size': 16px,
  ),
  $--switch
);

/* Dialog
-------------------------- */
// css3 var in packages/theme-chalk/src/dialog.scss
$--dialog: () !default;
$--dialog: map.merge(
  (
    'background-color': var(--el-color-white),
    'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
    'title-font-size': var(--el-font-size-large),
    'content-font-size': 14px,
    'font-line-height': var(--el-font-line-height-primary),
    'padding-primary': 20px,
  ),
  $--dialog
);

/* Table
-------------------------- */
// css3 var in packages/theme-chalk/src/table.scss
$--table: () !default;
$--table: map.merge(
  (
    'border-color': var(--el-border-color-lighter),
    'border': 1px solid var(--el-table-border-color),
    'font-color': var(--el-text-color-regular),
    'header-font-color': var(--el-text-color-secondary),
    'row-hover-background-color': var(--el-background-color-base),
    'current-row-background-color': var(--el-color-primary-light-9),
    'header-background-color': var(--el-color-white),
    'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
    'background-color': var(--el-color-white),
    'expanded-cell-background-color': var(--el-color-white),
  ),
  $--table
);

/* Pagination
-------------------------- */
// css3 var in packages/theme-chalk/src/pagination.scss
$--pagination: () !default;
$--pagination: map.merge(
  (
    'font-size': 13px,
    'background-color': var(--el-color-white),
    'font-color': var(--el-text-color-primary),
    'border-radius': 3px,
    'button-color': var(--el-text-color-primary),
    'button-width': 35.5px,
    'button-height': 28px,
    'button-disabled-color': var(--el-text-color-placeholder),
    'button-disabled-background-color': var(--el-color-white),
    'hover-color': var(--el-color-primary),
    'height-extra-small': 22px,
    'line-height-extra-small': var(--el-pagination-height-extra-small),
  ),
  $--pagination
);

/* Popup
-------------------------- */
// css3 var in packages/theme-chalk/src/popup.scss
$--popup: () !default;
$--popup: map.merge(
  (
    'modal-background-color': var(--el-color-black),
    'modal-opacity': 0.5,
  ),
  $--popup
);

/* Popover
-------------------------- */
// css3 var in packages/theme-chalk/src/popover.scss
$--popover: () !default;
$--popover: map.merge(
  (
    'background-color': var(--el-color-white),
    'font-size': var(--el-font-size-base),
    'border-color': var(--el-border-color-lighter),
    'padding': 12px,
    'padding-large': 18px 20px,
    'title-font-size': 16px,
    'title-font-color': var(--el-text-color-primary),
    'border-radius': 4px,
  ),
  $--popover
);

// popper
$--popper: () !default;
$--popper: map.merge(
  (
    'border-radius': var(--el-popover-border-radius, 4px),
  ),
  $--popper
);

// skeleton
$--skeleton: () !default;
$--skeleton: map.merge(
  (
    'color': #f2f2f2,
    'to-color': #e6e6e6,
  ),
  $--skeleton
);

/* Tooltip
-------------------------- */
// css3 var in packages/theme-chalk/src/tooltip.scss
$--tooltip: () !default;
$--tooltip: map.merge(
  (
    'fill': var(--el-text-color-primary),
    'color': var(--el-color-white),
    'font-size': 12px,
    'border-color': var(--el-text-color-primary),
    'arrow-size': 6px,
    'padding': 10px,
  ),
  $--tooltip
);

/* Tag
-------------------------- */
// css3 var in packages/theme-chalk/src/tag.scss
$--tag: () !default;
$--tag: map.merge(
  (
    'font-size': 12px,
    'border-radius': 4px,
    'padding': 0 10px,
  ),
  $--tag
);

$--tag-color: () !default;

@each $type in $--types {
  $--tag-color: map.merge(
    (
      $type: map.get($--colors, $type, 'base'),
    ),
    $--tag-color
  ) !global;
}

/* Tree
-------------------------- */
// css3 var in packages/theme-chalk/src/tree.scss
$--tree: () !default;
$--tree: map.merge(
  (
    'node-hover-background-color': var(--el-background-color-base),
    'font-color': var(--el-text-color-regular),
    'expand-icon-color': var(--el-text-color-placeholder),
  ),
  $--tree
);

/* Dropdown
-------------------------- */
$--dropdown: () !default;
$--dropdown: map.merge(
  (
    'menu-box-shadow': var(--el-box-shadow-light),
    'menuItem-hover-fill': var(--el-color-primary-light-9),
    'menuItem-hover-color': var(--el-color-primary-light-2),
    'menu-index': 10,
  ),
  $--dropdown
);

// drawer
$--drawer: () !default;
$--drawer: map.merge(
  (
    'background-color': var(--el-dialog-background-color, var(--el-color-white)),
    'padding-primary': var(--el-dialog-padding-primary, 20px),
  ),
  $--drawer
);

/* Badge
-------------------------- */
// css3 var in packages/theme-chalk/src/badge.scss
$--badge: () !default;
$--badge: map.merge(
  (
    'background-color': var(--el-color-danger),
    'radius': 10px,
    'font-size': 12px,
    'padding': 6px,
    'size': 18px,
  ),
  $--badge
);

/* Card
--------------------------*/
$--card: () !default;
$--card: map.merge(
  (
    'border-color':
      var(--el-border-color-light, map.get($--border-color, 'lighter')),
    'border-radius': 4px,
    'padding': 20px,
    'background-color': var(--el-color-white),
  ),
  $--card
);

$--dark-card: () !default;
$--dark-card: map.merge(
  (
    'background-color': var(--el-color-black),
  ),
  $--dark-card
);

/* Slider
--------------------------*/
// css3 var in packages/theme-chalk/src/slider.scss
$--slider: () !default;
$--slider: map.merge(
  (
    'main-background-color': var(--el-color-primary),
    'runway-background-color': var(--el-border-color-light),
    'stop-background-color': var(--el-color-white),
    'disable-color': var(--el-text-color-placeholder),
    'margin': 16px 0,
    'border-radius': 3px,
    'height': 6px,
    'button-size': 20px,
    'button-wrapper-size': 36px,
    'button-wrapper-offset': -15px,
  ),
  $--slider
);

/* Menu
--------------------------*/
// css3 var in packages/theme-chalk/src/menu.scss
$--menu: () !default;
$--menu: map.merge(
  (
    'item-font-size': var(--el-font-size-base),
    'item-font-color': var(--el-text-color-primary),
    'item-hover-fill': var(--el-color-primary-light-9),
    'background-color': var(--el-color-white),
    'border-color': #e6e6e6,
  ),
  $--menu
);

/* Rate
--------------------------*/
$--rate: () !default;
$--rate: map.merge(
  (
    'height': 20px,
    'font-size': var(--el-font-size-base),
    'icon-size': 18px,
    'icon-margin': 6px,
    'icon-color': var(--el-text-color-placeholder),
  ),
  $--rate
);

/* DatePicker
--------------------------*/
// css3 var packages/theme-chalk/src/date-picker/var.scss
$--datepicker: () !default;
$--datepicker: map.merge(
  (
    'font-color': var(--el-text-color-regular),
    'off-font-color': var(--el-text-color-placeholder),
    'header-font-color': var(--el-text-color-regular),
    'icon-color': var(--el-text-color-primary),
    'border-color': var(--el-disabled-border-base),
    'inner-border-color': #e4e4e4,
    'inrange-background-color': var(--el-border-color-extra-light),
    'inrange-hover-background-color': var(--el-border-color-extra-light),
    'active-color': var(--el-color-primary),
    'hover-font-color': var(--el-color-primary),
  ),
  $--datepicker
);

$--date-editor: () !default;
$--date-editor: map.merge(
  (
    'width': 220px,
    'monthrange-width': 300px,
    'daterange-width': 350px,
    'datetimerange-width': 400px,
  ),
  $--date-editor
);

/* Loading
--------------------------*/
// css3 var in packages/theme-chalk/src/loading.scss
$--loading: () !default;
$--loading: map.merge(
  (
    'spinner-size': 42px,
    'fullscreen-spinner-size': 50px,
  ),
  $--loading
);

/* Scrollbar
--------------------------*/
// css3 var in packages/theme-chalk/src/scrollbar.scss
$--scrollbar: () !default;
$--scrollbar: map.merge(
  (
    'opacity': 0.3,
    'background-color': var(--el-text-color-secondary),
    'hover-opacity': 0.5,
    'hover-background-color': var(--el-text-color-secondary),
  ),
  $--scrollbar
);

/* Carousel
--------------------------*/
// css3 var in packages/theme-chalk/src/carousel.scss
$--carousel: () !default;
$--carousel: map.merge(
  (
    'arrow-font-size': 12px,
    'arrow-size': 36px,
    'arrow-background': rgba(31, 45, 61, 0.11),
    'arrow-hover-background': rgba(31, 45, 61, 0.23),
    'indicator-width': 30px,
    'indicator-height': 2px,
    'indicator-padding-horizontal': 4px,
    'indicator-padding-vertical': 12px,
    'indicator-out-color': var(--el-border-color-hover),
  ),
  $--carousel
);

/* Collapse
--------------------------*/
// css3 var in packages/theme-chalk/src/collapse.scss
$--collapse: () !default;
$--collapse: map.merge(
  (
    'border-color': var(--el-border-color-lighter),
    'header-height': 48px,
    'header-background-color': var(--el-color-white),
    'header-font-color': var(--el-text-color-primary),
    'header-font-size': 13px,
    'content-background-color': var(--el-color-white),
    'content-font-size': 13px,
    'content-font-color': var(--el-text-color-primary),
  ),
  $--collapse
);

/* Transfer
--------------------------*/
// css3 var in packages/theme-chalk/src/transfer.scss
$--transfer: () !default;
$--transfer: map.merge(
  (
    'border-color': var(--el-border-color-lighter),
    'border-radius': var(--el-border-radius-base),
    'panel-width': 200px,
    'panel-header-height': 40px,
    'panel-header-background-color': var(--el-background-color-base),
    'panel-footer-height': 40px,
    'panel-body-height': 246px,
    'item-height': 30px,
    'filter-height': 32px,
  ),
  $--transfer
);

/* Timeline
--------------------------*/
// css3 var in packages/theme-chalk/src/timeline-item.scss
$--timeline: () !default;
$--timeline: map.merge(
  (
    'node-size-normal': 12px,
    'node-size-large': 14px,
    'node-color': var(--el-border-color-light),
  ),
  $--timeline
);

/* Backtop
--------------------------*/
// css3 var in packages/theme-chalk/src/backtop.scss
$--backtop: () !default;
$--backtop: map.merge(
  (
    'background-color': var(--el-color-white),
    'font-color': var(--el-color-primary),
    'hover-background-color': var(--el-border-color-extra-light),
  ),
  $--backtop
);

/* Link
--------------------------*/
// css3 var in packages/theme-chalk/src/link.scss
$--link: () !default;
$--link: map.merge(
  (
    'font-size': var(--el-font-size-base),
    'font-weight': var(--el-font-weight-primary),
    'default-font-color': var(--el-text-color-regular),
    'default-active-color': var(--el-color-primary),
    'disabled-font-color': var(--el-text-color-placeholder),
  ),
  $--link
);

$--link-font-color: () !default;

@each $type in $--types {
  $--link-font-color: map.merge(
    $--link-font-color,
    (
      $type: map.get($--colors, $type, 'base'),
    )
  ) !global;
}

/* Calendar
--------------------------*/
// css3 var in packages/theme-chalk/src/calendar.scss
$--calendar: () !default;
$--calendar: map.merge(
  (
    'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
    'header-border-bottom': var(--el-calendar-border),
    'selected-background-color': #f2f8fe,
    'cell-width': 85px,
  ),
  $--calendar
);

/* Form
-------------------------- */
// css3 var in packages/theme-chalk/src/form.scss
$--form: () !default;
$--form: map.merge(
  (
    'label-font-size': var(--el-font-size-base),
  ),
  $--form
);

/* Avatar
--------------------------*/
// css3 var in packages/theme-chalk/src/avatar.scss
$--avatar: () !default;
$--avatar: map.merge(
  (
    'font-color': #fff,
    'background-color': #c0c4cc,
    'text-font-size': 14px,
    'icon-font-size': 18px,
    'border-radius': var(--el-border-radius-base),
    'large-size': 40px,
    'medium-size': 36px,
    'small-size': 28px,
  ),
  $--avatar
);

/* Empty
-------------------------- */
// css3 var in packages/theme-chalk/src/empty.scss
$--empty: () !default;
$--empty: map.merge(
  (
    'padding': 40px 0,
    'image-width': 160px,
    'description-margin-top': 20px,
    'bottom-margin-top': 20px,
  ),
  $--empty
);

/* Descriptions
-------------------------- */
// css3 var in packages/theme-chalk/src/descriptions.scss
$--descriptions: () !default;
$--descriptions: map.merge(
  (
    'header-margin-bottom': 20px,
    'title-font-size': 16px,
    'table-border': 1px solid var(--el-border-color-lighter),
    'item-bordered-label-background': #fafafa,
  ),
  $--descriptions
);

/* Result
-------------------------- */
// css3 var in packages/theme-chalk/src/result.scss
$--result: () !default;
$--result: map.merge(
  (
    'padding': 40px 30px,
    'icon-font-size': 64px,
    'title-font-size': 20px,
    'title-margin-top': 20px,
    'subtitle-margin-top': 10px,
    'extra-margin-top': 30px,
  ),
  $--result
);

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

$--transition-duration: () !default;
$--transition-duration: map.merge(
  (
    'default': 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
);

// header
$--header: () !default;
$--header: map.merge(
  (
    'padding': 0 20px,
    'height': 60px,
  ),
  $--header
);
// main
$--main: () !default;
$--main: map.merge(
  (
    'padding': 20px,
  ),
  $--main
);
// footer
$--footer: () !default;
$--footer: map.merge(
  (
    'padding': 0 20px,
    'height': 60px,
  ),
  $--footer
);

/* Break-point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs': '(max-width: #{$--sm})',
  'sm': '(min-width: #{$--sm})',
  'md': '(min-width: #{$--md})',
  'lg': '(min-width: #{$--lg})',
  'xl': '(min-width: #{$--xl})',
) !default;

$--breakpoints-spec: (
  'xs-only': '(max-width: #{$--sm})',
  'sm-and-up': '(min-width: #{$--sm})',
  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md})',
  'sm-and-down': '(max-width: #{$--md})',
  'md-and-up': '(min-width: #{$--md})',
  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg})',
  'md-and-down': '(max-width: #{$--lg})',
  'lg-and-up': '(min-width: #{$--lg})',
  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl})',
  'lg-and-down': '(max-width: #{$--xl})',
  'xl-only': '(min-width: #{$--xl})',
) !default;