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

// 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': #00C2CE,
    ),
    'success': (
      'base': #0EC885,
    ),
    'warning': (
      'base': #F1A716,
    ),
    'danger': (
      'base': #EF5615,
    ),
    'error': (
      'base': #EF5615,
    ),
    'info': (
      'base': #ABADAF,
    ),
    'default': (
      'base': #1890FF
    ),
    'help': (
      'base': #999999
    )
  ),
  $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;
$color-default: map.get($colors, 'default', 'base') !default;
$color-help: map.get($colors, 'help', '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
// --sg-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': #262626,
    'regular': #595959,
    'secondary': #8C8C8C,
    'placeholder': #BFBFBF,
    'tool': #CFD2D4
  ),
  $text-color
);

$border-color: () !default;
$border-color: map.merge(
  (
    'base': #D9D9D9,
    'light': #E4E7ED,
    'lighter': #EBEEF5,
    'extra-light': #F0F0F0,
  ),
  $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
/// color|1|Background Color|4
$bg-color: #F8F9FB !default;

// Border
$border-width-base: 1px !default;
$border-style-base: solid !default;
$border-color-hover: $color-primary !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,
    'zero': 0,
    'half': 50%,
    '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),
    'dark': (
      0 2px 4px rgba(0, 0, 0, .15),
      0 0 6px rgba(0, 0, 0, .15)
    ),
    'input': 0px 2px 8px 0 rgba(0, 0, 0, .15)
  ),
  $box-shadow
);

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

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

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

// 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;

//--------------- 以下是各组件的特定样式 ---------------//

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

// Anchor
$anchor: () !default;
$anchor: map.merge(
  (),
  $anchor
);

$anchor-ink: () !default;
$anchor-ink: map.merge(
  (
    'width': 2px,
    'color': var(--sg-color-primary),
    'background': rgba(5, 5, 5, 0.06)
  ),
  $anchor-ink
);

$anchor-link: () !default;
$anchor-link: map.merge(
  (
    'padding': 7px 0 7px 16px
  ),
  $anchor-link
);

// Avatar
// css3 var in packages/theme-chalk/src/avatar.scss
$avatar: () !default;
$avatar: map.merge(
  (
    'text-color': #fff,
    'bg-color': #c0c4cc,
    'text-size': 14px,
    'icon-size': 18px,
    'border-radius': var(--sg-border-radius-base),
  ),
  $avatar
);

$avatar-size: () !default;
$avatar-size: map.merge(
  (
    'large': 56px,
    'default': 40px,
    'small': 24px,
  ),
  $avatar-size
);

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

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

// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
  (
    'font-weight': var(--sg-font-weight-primary),
    'border-color': var(--sg-border-color-base),
    'bg-color': var(--sg-color-white),
    'text-color': var(--sg-text-color-regular),
    'disabled-text-color': var(--sg-disabled-text-color),
    'disabled-bg-color': var(--sg-color-white),
    'disabled-border-color': var(--sg-border-color-light),
    'divide-border-color': rgba($color-white, 0.5),
    'hover-text-color': var(--sg-color-primary),
    'hover-bg-color': var(--sg-color-primary-light-9),
    'hover-border-color': var(--sg-color-primary-light-7),
    'active-text-color': var(--sg-button-hover-text-color),
    'active-border-color': var(--sg-color-primary),
    'active-bg-color': var(--sg-button-hover-bg-color),
  ),
  $button
);

$button-border-width: $border-width-base !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': var(--sg-font-size-medium, map.get($font-size, 'medium')),
    'default': var(--sg-font-size-base, map.get($font-size, 'base')),
    'small': 12px,
  ),
  $button-font-size
);

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

$button-height: () !default;
$button-height: map.merge($common-component-size, $button-height);

$button-padding-horizontal: () !default;
$button-padding-horizontal: map.merge(
  (
    'large': 16px,
    'default': 16px,
    'small': 8px,
  ),
  $button-padding-horizontal
);

// Calendar
$calendar: () !default;
$calendar: map.merge(
  (
    'border': var(--sg-table-border, 1px solid var(--sg-border-color-lighter)),
    'cell-color':  var(--sg-text-color-primary),
    'cell-placeholder-color': var(--sg-text-color-placeholder),
    'background':var(--sg-color-white),
    'title-color':var(--sg-text-color-primary),
    'header-border':1px solid  var(--sg-border-color-extra-light),
    'header-border-bottom': var(--sg-calendar-border),
    'calendar-border':1px solid  var(--sg-border-color-extra-light),
    'selected-color':var(--sg-color-primary),
    'selected-background-color': var(--sg-color-primary-light-9),
    'cell-width': 85px
  ),
  $calendar
);

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

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

// 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(--sg-border-color-hover),
  ),
  $carousel
);

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

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

$checkbox-button: () !default;
$checkbox-button: map.merge(
  (
    'checked-bg-color': var(--sg-color-primary),
    'checked-text-color': var(--sg-color-white),
    'checked-border-color': var(--sg-color-primary),
  ),
  $checkbox-button
);

$checkbox-bordered-padding-left: () !default;
$checkbox-bordered-padding-left: map.merge(
  (
    'large': 12px,
    'default': 10px,
    'small': 8px,
  ),
  $checkbox-bordered-padding-left
);

$checkbox-bordered-padding-right: () !default;
$checkbox-bordered-padding-right: map.merge(
  (
    'large': 20px,
    'default': 16px,
    'small': 12px,
  ),
  $checkbox-bordered-padding-right
);

// Collapse
// css3 var in packages/theme-chalk/src/collapse.scss
$collapse: () !default;
$collapse: map.merge(
  (
    'border-color': var(--sg-border-color-extra-light),
    'header-height': 54px,
    'header-bg-color': var(--sg-bg-color),
    'header-text-color': var(--sg-text-color-primary),
    'header-font-size': var(--sg-font-size-base),
    'content-bg-color': var(--sg-color-white),
    'content-font-size': var(--sg-font-size-base),
    'content-text-color': var(--sg-text-color-primary),
    'content-padding': 16px,
    'line-background': var(--sg-color-primary)
  ),
  $collapse
);

// DatePicker
// css3 var packages/theme-chalk/src/date-picker/var.scss
$datepicker: () !default;
$datepicker: map.merge(
  (
    'text-color': var(--sg-text-color-regular),
    'off-text-color': var(--sg-text-color-placeholder),
    'header-text-color': var(--sg-text-color-regular),
    'icon-color': var(--sg-text-color-primary),
    'border-color': var(--sg-disabled-border-color),
    'inner-border-color': var(--sg-border-color-light),
    'inrange-bg-color': var(--sg-color-primary-light-9),
    'inrange-hover-bg-color': var(--sg-color-primary-light-9),
    'active-color': var(--sg-color-primary),
    'hover-text-color': var(--sg-color-primary),
    'icon-btn-padding' : 5px,
    'border': var(--sg-border-base),
  ),
  $datepicker
);

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

// Descriptions
// css3 var in packages/theme-chalk/src/descriptions.scss
$descriptions: () !default;
$descriptions: map.merge(
  (
    'table-border': 1px solid var(--sg-border-color-lighter),
    'item-bordered-label-background': #f5f7fa,
  ),
  $descriptions
);

// Drawer
$drawer: () !default;
$drawer: map.merge(
  (
    'bg-color': var(--sg-color-white),
    'padding-primary': 16px 24px,
  ),
  $drawer
);

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

// Footer
// css3 var in packages/theme-chalk/src/footer.scss
$footer: () !default;
$footer: map.merge(
  (
    'padding': 0 20px,
    'height': 60px,
  ),
  $footer
);

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

$form-item-margin-bottom: () !default;
$form-item-margin-bottom: map.merge(
  (
    'large': 20px,
    'default': 20px,
    'small': 20px,
  ),
  $form-item-margin-bottom
);

$form-item-line-height: () !default;
$form-item-line-height: map.merge($common-component-size, $form-item-line-height);

$form-item-error-padding-top: () !default;
$form-item-error-padding-top: map.merge(
  (
    'large': 4px,
    'default': 2px,
    'small': 2px,
  ),
  $form-item-error-padding-top
);

$form-item-label-top-line-height: () !default;
$form-item-label-top-line-height: map.merge(
  (
    'large': 22px,
    'default': 22px,
    'small': 20px,
  ),
  $form-item-label-top-line-height
);

$form-item-label-top-margin-bottom: () !default;
$form-item-label-top-margin-bottom: map.merge(
  (
    'large': 12px,
    'default': 8px,
    'small': 4px,
  ),
  $form-item-label-top-margin-bottom
);

// Header
// css3 var in packages/theme-chalk/src/header.scss
$header: () !default;
$header: map.merge(
  (
    'padding': 0 20px,
    'height': 60px,
  ),
  $header
);

// Input
// css3 var in packages/theme-chalk/src/input.scss
$input: () !default;
$input: map.merge(
  (
    'text-color': var(--text-color),
    'border': var(--sg-border-base),
    'border-color': var(--sg-border-color-base),
    'border-radius': var(--sg-border-radius-base),
    'bg-color': var(--sg-color-white),
    'icon-color': var(--sg-text-color-tool),
    'placeholder-color': var(--sg-text-color-placeholder),
    'hover-border': var(--sg-border-color-hover),
    'clear-hover-color': var(--sg-text-color-secondary),
    'focus-border': var(--sg-border-color-hover),
    'focus-shadow': var(--sg-box-shadow-input)
  ),
  $input
);

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

$input-font-size: () !default;
$input-font-size: map.merge(
  (
    'large': 14px,
    'default': 14px,
    'small': 12px,
  ),
  $input-font-size
);

$input-height: () !default;
$input-height: map.merge($common-component-size, $input-height);

$input-line-height: () !default;
$input-line-height: map.merge($common-component-size, $input-line-height);

$input-number-width: () !default;
$input-number-width: map.merge(
  (
    'large': 180px,
    'default': 150px,
    'small': 120px,
  ),
  $input-number-width
);

$input-padding-horizontal: () !default;
$input-padding-horizontal: map.merge(
  (
    'large': 16px,
    'default': 12px,
    'small': 8px,
  ),
  $input-padding-horizontal
);

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

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

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

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

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

// Main
// css3 var in packages/theme-chalk/src/main.scss
$main: () !default;
$main: map.merge(
  (
    'padding': 20px,
  ),
  $main
);


// Message
// css3 var in packages/theme-chalk/src/message.scss
$message: () !default;
$message: map.merge(
  (
    'min-width': 380px,
    'min-height': 40px,
    'bg-color': var(--sg-color-white),
    'box-shadow': map.get($box-shadow, 'input'),
    'padding': 8px 38px 8px 16px,
    'title-size': 14px,
    'description-size': 12px,
    'close-size': 12px,
    'close-icon-color': var(--sg-text-color-secondary),
    'close-hover-color': var(--sg-text-color-secondary)
  ),
  $message
);

// Modal
// css3 var in packages/theme-chalk/src/modal.scss
$modal: () !default;
$modal: map.merge(
  (
    'width': 480px,
    'margin-top': 15vh,
    'bg-color': var(--sg-color-white),
    'box-shadow': 0 4px 12px rgba(0, 0, 0, .15),
    'title-font-size': var(--sg-font-size-medium),
    'tools-width': 24px,
    'tools-color': var(--sg-text-color-regular),
    'body-font-size': var(--sg-font-size-base),
    'header-padding': (16px, 24px),
    'body-padding': 24px,
    'footer-padding': 16px 24px,
    'confirm-icon-size': 24px,
    'alert-icon-size': 48px
  ),
  $modal
);

// MultiFilter
// css3 var in packages/theme-chalk/src/multi-filter.scss
$multi-filter: () !default;
$multi-filter: map.merge(
  (
    'tag-padding': 8px 12px,
    'tag-gap': 6px,
    'list-margin': 10px
  ),
  $multi-filter
);

$multi-filter-font-size: () !default;
$multi-filter-font-size: map.merge(
  (
    'default': var(--sg-font-size-base),
    'small': var(--sg-font-size-small)
  ),
  $multi-filter-font-size
);

// Notification
// css3 var in packages/theme-chalk/src/notification.scss
$notification: () !default;
$notification: map.merge(
  (
    'width': 330px,
    'min-height': 40px,
    'padding': 8px 16px,
    'radius': var(--sg-border-radius-base),
    'shadow': var(--sg-box-shadow-input),
    'offset': 16px,
    'icon-size': 16px,
    'title-size': 14px,
    'title-color': var(--sg-text-color-primary),
    'content-size': map.get($font-size, 'extra-small'),
    'content-color': var(--sg-text-color-regular),
    'close-color': var(--sg-text-color-secondary),
    'close-size': var(--sg-message-close-size, map.get($message, 'close-size')),
    'close-hover-color': var(--sg-text-color-regular),
  ),
  $notification
);

// Page
// css3 var in packages/theme-chalk/src/page.scss
$page: () !default;
$page: map.merge(
  (
    'font-size': 14px,
    'bg-color': var(--sg-color-white),
    'text-color': var(--sg-text-color-primary),
    'border-radius': map.get($border-radius, 'base'),
    'border-color': map.get($border-color, 'base'),
    'button-color': var(--sg-text-color-primary),
    'button-width': 32px,
    'button-height': 32px,
    'button-disabled-color': var(--sg-text-color-placeholder),
    'button-disabled-bg-color': var(--sg-color-white),
    'hover-color': var(--sg-color-primary),
    'height-extra-small': 24px,
    'line-height-extra-small': var(--sg-page-height-extra-small),
  ),
  $page
);

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

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

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

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

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

$radio-height: () !default;
$radio-height: map.merge($common-component-size, $radio-height);

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

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

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

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

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

// Rate
$rate: () !default;
$rate: map.merge(
  (
    'height': 20px,
    'font-size': var(--sg-font-size-base),
    'icon-size': 18px,
    'icon-margin': 6px,
    'icon-color': var(--sg-text-color-placeholder),
    'void-color': #c6d1de,
    'star-color': #f7ba2a,
    'disable-void-color': #eff2f7,
    'text-color': #1f2d3d,
  ),
  $rate
);

// 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
);

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

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

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

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

$select-dropdown: () !default;
$select-dropdown: map.merge(
  (
    'bg-color': var(--sg-color-white),
    'shadow': var(--sg-box-shadow-input),
    'empty-color': var(--sg-text-color-secondary),
    'max-height': 274px,
    'padding': 6px 0,
    'empty-padding': 10px 0,
    'border': 1px solid var(--sg-border-color-hover),
  ),
  $select-dropdown
);

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

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

// Statistic
// css3 var in packages/theme-chalk/src/statistic.scss
$statistic: () !default;
$statistic: map.merge(
  (
    'title-font-weight': 400,
    'title-font-size': var(--sg-font-size-extra-small),
    'title-color': var(--sg-text-color-regular),
    'content-font-weight': 400,
    'content-font-size': var(--sg-font-size-extra-large),
    'content-color': var(--sg-text-color-primary),
  ),
  $statistic
);

// Switch
// css3 var in packages/theme-chalk/src/switch.scss
$switch: () !default;
$switch: map.merge(
  (
    'on-color': var(--sg-color-primary),
    'off-color': var(--sg-border-color-base),
    'core-border-radius': 12px
  ),
  $switch
);

// Tab
// css3 var in packages/theme-chalk/src/tab.scss
$tab: () !default;
$tab: map.merge(
  (
    'active-bar-height': 2px,
    'item-x-padding': 16px,
    'header-vertical-margin': 16px,
    'header-horizontal-margin': 16px
  ),
  $tab
);

// Table
// css3 var in packages/theme-chalk/src/table.scss
$table: () !default;
$table: map.merge(
  (
    'bg-color': var(--sg-color-white),
    'border-color': var(--sg-border-color-extra-light),
    'border': 1px solid var(--sg-table-border-color),
    'text-color': var(--sg-text-color-primary),
    'header-bg-color': var(--sg-bg-color),
    // 'header-text-color': var(--sg-text-color-primary),
    'row-hover-bg-color': var(--sg-bg-color),
    'row-stripe-bg-color': var(--sg-bg-color),
    'row-select-bg-color': var(--sg-color-primary-light-9),
    'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
    'fixed-left-shadow': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
    'fixed-right-shadow': inset -10px 0 10px -10px rgb(0 0 0 / 15%)
    // 'expanded-cell-bg-color': var(--sg-color-white),
  ),
  $table
);

$table-font-size: () !default;
$table-font-size: map.merge(
  (
    'large': var(--sg-font-size-medium, map.get($font-size, 'medium')),
    'default': var(--sg-font-size-base, map.get($font-size, 'base')),
    'small': var(--sg-font-size-small, map.get($font-size, 'small')),
  ),
  $table-font-size
);

$table-padding: () !default;
$table-padding: map.merge(
  (
    'large': 12px 0,
    'default': 12px 0,
    'small': 0 0,
  ),
  $table-padding
);

$table-cell-padding: () !default;
$table-cell-padding: map.merge(
  (
    'large': 0 16px,
    'default': 0 16px,
    'small': 0 16px,
  ),
  $table-cell-padding
);

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

$tag-color: () !default;

$tag-height: () !default;
$tag-height: map.merge(
  (
    'large': 32px,
    'default': 24px,
    'small': 20px,
  ),
  $tag-height
);

$tag-padding: () !default;
$tag-padding: map.merge(
  (
    'large': 12px,
    'default': 10px,
    'small': 8px,
  ),
  $tag-padding
);

$tag-icon-size: () !default;
$tag-icon-size: map.merge(
  (
    'large': 16px,
    'default': 14px,
    'small': 12px,
  ),
  $tag-icon-size
);

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

// 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(--sg-border-color-light),
  ),
  $timeline
);

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

// Transition
$transition: () !default;
$transition: map.merge(
  (
    'all': all var(--sg-transition-duration)
      var(--sg-transition-function-ease-in-out-bezier),
    'fade': opacity var(--sg-transition-duration)
      var(--sg-transition-function-fast-bezier),
    'md-fade': (
      transform var(--sg-transition-duration)
        var(--sg-transition-function-fast-bezier),
      opacity var(--sg-transition-duration)
        var(--sg-transition-function-fast-bezier),
    ),
    'fade-linear': opacity var(--sg-transition-duration-fast) linear,
    'border': border-color var(--sg-transition-duration-fast)
      var(--sg-transition-function-ease-in-out-bezier),
    'color': color var(--sg-transition-duration-fast)
      var(--sg-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
);

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