code:
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/transition';

@include b(collapse) {
  @include set-component-css-var('collapse', $collapse);

  border-top: 1px solid getCssVar('collapse-border-color');
  border-bottom: 1px solid getCssVar('collapse-border-color');
}

@include b(collapse-item) {
  @include when(disabled) {
    .#{$namespace}-collapse-item__header {
      color: getCssVar('text-color-disabled');
      cursor: not-allowed;
    }
  }
  @include e(header) {
    width: 100%;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    height: getCssVar('collapse-header-height');
    line-height: getCssVar('collapse-header-height');
    background-color: getCssVar('collapse-header-bg-color');
    color: getCssVar('collapse-header-text-color');
    cursor: pointer;
    border-bottom: 1px solid getCssVar('collapse-border-color');
    font-size: getCssVar('collapse-header-font-size');
    font-weight: 500;
    transition: border-bottom-color getCssVar('transition-duration');
    outline: none;
    @include e(arrow) {
      margin: 0 8px 0 auto;
      transition: transform getCssVar('transition-duration');
      font-weight: 300;
      @include when(active) {
        transform: rotate(90deg);
      }
    }
    &.focusing:focus:not(:hover) {
      color: getCssVar('color-primary');
    }
    @include when(active) {
      border-bottom-color: transparent;
    }
  }

  @include e(wrap) {
    will-change: height;
    background-color: getCssVar('collapse-content-bg-color');
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid getCssVar('collapse-border-color');
  }

  @include e(content) {
    padding-bottom: 25px;
    font-size: getCssVar('collapse-content-font-size');
    color: getCssVar('collapse-content-text-color');
    line-height: 1.769230769230769;
  }

  &:last-child {
    margin-bottom: -1px;
  }
}


code:
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'common/var' as *;

$color-picker-size: () !default;
$color-picker-size: map.merge($common-component-size, $color-picker-size);

@mixin color-picker-thumb {
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 1px;
  background: #fff;
  border: 1px solid getCssVar('border-color', 'lighter');
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  z-index: 1;

  &:focus-visible {
    outline: 2px solid getCssVar('color-primary');
    outline-offset: 1px;
  }
}

@mixin bar-background($side: right) {
  background: linear-gradient(
    to $side,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
}

@include b(color-predefine) {
  display: flex;
  font-size: 12px;
  margin-top: 8px;
  width: 280px;

  @include e(colors) {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }

  @include e(color-selector) {
    margin: 0 0 8px 8px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;

    &:nth-child(10n + 1) {
      margin-left: 0;
    }

    &.selected {
      box-shadow: 0 0 3px 2px getCssVar('color-primary');
    }

    > div {
      display: flex;
      height: 100%;
      border-radius: 3px;
    }

    @include when(alpha) {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
    }
  }
}

@include b(color-hue-slider) {
  position: relative;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  background-color: #f00;
  padding: 0 2px;
  float: right;

  @include e(bar) {
    position: relative;
    @include bar-background;
    height: 100%;
  }

  @include e(thumb) {
    @include color-picker-thumb;
  }

  @include when(vertical) {
    width: 12px;
    height: 180px;
    padding: 2px 0;

    .#{$namespace}-color-hue-slider__bar {
      @include bar-background(bottom);
    }

    .#{$namespace}-color-hue-slider__thumb {
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
    }
  }
}

@include b(color-svpanel) {
  position: relative;
  width: 280px;
  height: 180px;

  @include e(('white', 'black')) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  @include e('white') {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  }

  @include e('black') {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  }

  @include e(cursor) {
    position: absolute;

    > div {
      cursor: head;
      width: 4px;
      height: 4px;
      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
        0 0 1px 2px rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      transform: translate(-2px, -2px);
    }
  }
}

@mixin alpha-bg {
  background-image: linear-gradient(
      45deg,
      getCssVar('color-picker', 'alpha-bg-a') 25%,
      getCssVar('color-picker', 'alpha-bg-b') 25%
    ),
    linear-gradient(
      135deg,
      getCssVar('color-picker', 'alpha-bg-a') 25%,
      getCssVar('color-picker', 'alpha-bg-b') 25%
    ),
    linear-gradient(
      45deg,
      getCssVar('color-picker', 'alpha-bg-b') 75%,
      getCssVar('color-picker', 'alpha-bg-a') 75%
    ),
    linear-gradient(
      135deg,
      getCssVar('color-picker', 'alpha-bg-b') 75%,
      getCssVar('color-picker', 'alpha-bg-a') 75%
    );
  background-size: 12px 12px;
  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
}

@include b(color-alpha-slider) {
  position: relative;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  @include alpha-bg;

  @include e(bar) {
    position: relative;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      getCssVar('bg-color') 100%
    );
    height: 100%;
  }

  @include e(thumb) {
    @include color-picker-thumb;
  }

  @include when(vertical) {
    width: 20px;
    height: 180px;

    .#{$namespace}-color-alpha-slider__bar {
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
      );
    }

    .#{$namespace}-color-alpha-slider__thumb {
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
    }
  }
}

@include b(color-dropdown) {
  width: 300px;

  @include e(main-wrapper) {
    margin-bottom: 6px;

    &::after {
      content: '';
      display: table;
      clear: both;
    }
  }

  @include e(btns) {
    margin-top: 12px;
    text-align: right;
  }

  @include e(value) {
    float: left;
    line-height: 26px;
    font-size: 12px;
    color: $color-black;
    width: 160px;
  }
}

@include b(color-picker) {
  display: inline-block;
  position: relative;
  line-height: normal;
  outline: none;

  &:hover:not(.is-disabled, .is-focused) {
    .#{$namespace}-color-picker__trigger {
      border-color: getCssVar('border-color-hover');
    }
  }

  &:focus-visible:not(.is-disabled) {
    .#{$namespace}-color-picker__trigger {
      outline: 2px solid getCssVar('color-primary');
      outline-offset: 1px;
    }
  }

  @include when(focused) {
    .#{$namespace}-color-picker__trigger {
      border-color: getCssVar('color-primary');
    }
  }

  @include when(disabled) {
    .#{$namespace}-color-picker__trigger {
      cursor: not-allowed;
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      height: map.get($color-picker-size, $size);

      .#{$namespace}-color-picker__trigger {
        height: map.get($color-picker-size, $size);
        width: map.get($color-picker-size, $size);
      }

      .#{$namespace}-color-picker__mask {
        height: map.get($color-picker-size, $size)-2px;
        width: map.get($color-picker-size, $size)-2px;
      }
    }
  }

  @include m(small) {
    .#{$namespace}-color-picker__icon,
    .#{$namespace}-color-picker__empty {
      transform: scale(0.8);
    }
  }

  @include e(mask) {
    height: map.get($color-picker-size, 'default')-2px;
    width: map.get($color-picker-size, 'default')-2px;
    border-radius: 4px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.7);
  }

  @include e(trigger) {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    height: map.get($color-picker-size, 'default');
    width: map.get($color-picker-size, 'default');
    padding: 4px;
    border: 1px solid getCssVar('border-color');
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer;
  }

  @include e(color) {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid getCssVar('text-color', 'secondary');
    border-radius: getCssVar('border-radius-small');
    width: 100%;
    height: 100%;
    text-align: center;

    @include when(alpha) {
      @include alpha-bg;
      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
    }
  }

  @include e(color-inner) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  & .#{$namespace}-color-picker__empty {
    font-size: 12px;
    color: getCssVar('text-color', 'secondary');
  }

  & .#{$namespace}-color-picker__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: $color-white;
    font-size: 12px;
  }

  @include e(panel) {
    position: absolute;
    z-index: 10;
    padding: 6px;
    box-sizing: content-box;
    background-color: $color-white;
    border-radius: getCssVar('border-radius-base');
    box-shadow: map.get($dropdown, 'menu-box-shadow');
    &.#{$namespace}-popper {
      border: 1px solid getCssVar('border-color-lighter');
    }
  }
}

.#{bem('color-picker')},
.#{bem('color-picker', 'panel')} {
  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
}

.dark {
  .#{bem('color-picker')},
  .#{bem('color-picker', 'panel')} {
    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
  }
}

license: mit


code:
@use 'sass:color';
@use 'sass:string';

@function rgb2hex($color) {
  @return unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
}

// rgba color above solid color
@function mix-overlay-color($upper, $lower) {
  $opacity: color.alpha($upper);

  $red: color.channel($upper, 'red') * $opacity + color.channel($lower, 'red') *
    (1 - $opacity);
  $green: color.channel($upper, 'green') * $opacity +
    color.channel($lower, 'green') * (1 - $opacity);
  $blue: color.channel($upper, 'blue') * $opacity +
    color.channel($lower, 'blue') * (1 - $opacity);

  @return rgb2hex(rgb($red, $green, $blue));
}


code:
@use './var' as *;
@use '../mixins/mixins' as *;
@use '../mixins/var' as *;

:root {
  @include set-component-css-var('popup', $popup);
}

.v-modal-enter {
  animation: v-modal-in getCssVar('transition-duration-fast') ease;
}

.v-modal-leave {
  animation: v-modal-out getCssVar('transition-duration-fast') ease forwards;
}

@keyframes v-modal-in {
  0% {
    opacity: 0;
  }
  100% {
  }
}

@keyframes v-modal-out {
  0% {
  }
  100% {
    opacity: 0;
  }
}

.v-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: getCssVar('popup-modal-opacity');
  background: getCssVar('popup-modal-bg-color');
}

@include b(popup-parent) {
  @include m(hidden) {
    overflow: hidden;
  }
}


code:
@use '../mixins/config' as *;
@use '../mixins/mixins' as *;

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  transition: getCssVar('transition-fade', 'linear');
}

.fade-in-linear-enter-from,
.fade-in-linear-leave-to {
  opacity: 0;
}

.#{$namespace}-fade-in-linear-enter-active,
.#{$namespace}-fade-in-linear-leave-active {
  transition: getCssVar('transition-fade', 'linear');
}
.#{$namespace}-fade-in-linear-enter-from,
.#{$namespace}-fade-in-linear-leave-to {
  opacity: 0;
}

.#{$namespace}-fade-in-enter-active,
.#{$namespace}-fade-in-leave-active {
  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
}
.#{$namespace}-fade-in-enter-from,
.#{$namespace}-fade-in-leave-active {
  opacity: 0;
}

.#{$namespace}-zoom-in-center-enter-active,
.#{$namespace}-zoom-in-center-leave-active {
  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
}
.#{$namespace}-zoom-in-center-enter-from,
.#{$namespace}-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

.#{$namespace}-zoom-in-top-enter-active,
.#{$namespace}-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: getCssVar('transition-md-fade');
  transform-origin: center top;

  &[data-popper-placement^='top'] {
    transform-origin: center bottom;
  }
}
.#{$namespace}-zoom-in-top-enter-from,
.#{$namespace}-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.#{$namespace}-zoom-in-bottom-enter-active,
.#{$namespace}-zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: getCssVar('transition-md-fade');
  transform-origin: center bottom;
}
.#{$namespace}-zoom-in-bottom-enter-from,
.#{$namespace}-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.#{$namespace}-zoom-in-left-enter-active,
.#{$namespace}-zoom-in-left-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: getCssVar('transition-md-fade');
  transform-origin: top left;
}
.#{$namespace}-zoom-in-left-enter-from,
.#{$namespace}-zoom-in-left-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
}

.collapse-transition {
  transition: getCssVar('transition-duration') height ease-in-out,
    getCssVar('transition-duration') padding-top ease-in-out,
    getCssVar('transition-duration') padding-bottom ease-in-out;
}

.#{$namespace}-collapse-transition-leave-active,
.#{$namespace}-collapse-transition-enter-active {
  transition: getCssVar('transition-duration') max-height ease-in-out,
    getCssVar('transition-duration') padding-top ease-in-out,
    getCssVar('transition-duration') padding-bottom ease-in-out;
}

.horizontal-collapse-transition {
  transition: getCssVar('transition-duration') width ease-in-out,
    getCssVar('transition-duration') padding-left ease-in-out,
    getCssVar('transition-duration') padding-right ease-in-out;
}

.#{$namespace}-list-enter-active,
.#{$namespace}-list-leave-active {
  transition: all 1s;
}

.#{$namespace}-list-enter-from,
.#{$namespace}-list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.#{$namespace}-list-leave-active {
  position: absolute !important;
}

.#{$namespace}-opacity-transition {
  transition: opacity getCssVar('transition-duration')
    cubic-bezier(0.55, 0, 0.1, 1);
}


code:
/* 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': #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
// 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
// --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);
}

$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
    '':
      "'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(
  (
    '': 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
);

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

$checkbox-button: () !default;
$checkbox-button: map.merge(
  (
    'checked-bg-color': getCssVar('color-primary'),
    'checked-text-color': getCssVar('color-white'),
    'checked-border-color': getCssVar('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
);

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

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

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

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

$radio-checked: () !default;
$radio-checked: map.merge(
  (
    'text-color': getCssVar('color-primary'),
    'input-border-color': getCssVar('color-primary'),
    'icon-color': getCssVar('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
);

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

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

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

$select-dropdown: () !default;
$select-dropdown: map.merge(
  (
    'bg-color': getCssVar('bg-color', 'overlay'),
    'shadow': getCssVar('box-shadow-light'),
    'empty-color': getCssVar('text-color-secondary'),
    'max-height': 274px,
    'padding': 6px 0,
    'empty-padding': 10px 0,
    'header-padding': 10px,
    'footer-padding': 10px,
    'border': 1px solid getCssVar('border-color-light'),
  ),
  $select-dropdown
);

$select-wrapper-padding: () !default;
$select-wrapper-padding: map.merge(
  (
    'large': 8px 16px,
    'default': 4px 12px,
    'small': 2px 8px,
  ),
  $select-wrapper-padding
);

$select-near-margin-left: () !default;
$select-near-margin-left: map.merge(
  (
    'large': -8px,
    'default': -8px,
    'small': -6px,
  ),
  $select-near-margin-left
);

$select-item-gap: () !default;
$select-item-gap: map.merge(
  (
    'large': 6px,
    'default': 6px,
    'small': 4px,
  ),
  $select-item-gap
);

// the same height of el-tag
$select-item-height: () !default;
$select-item-height: map.merge(
  (
    'large': 24px,
    'default': 24px,
    'small': 20px,
  ),
  $select-item-height
);

// Alert
// css3 var in packages/theme-chalk/src/alert.scss
$alert: () !default;
$alert: map.merge(
  (
    'padding': 8px 16px,
    'border-radius-base': getCssVar('border-radius-base'),
    'title-font-size': 14px,
    'title-with-description-font-size': 16px,
    'description-font-size': 14px,
    'close-font-size': 16px,
    'close-customed-font-size': 14px,
    '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': getCssVar('text-color-primary'),
    'width': 420px,
    'border-radius': 4px,
    'box-shadow': getCssVar('box-shadow'),
    'font-size': getCssVar('font-size-large'),
    'content-font-size': getCssVar('font-size-base'),
    'content-color': getCssVar('text-color-regular'),
    'error-font-size': 12px,
    'padding-primary': 12px,
    'font-line-height': getCssVar('font-line-height-primary'),
  ),
  $messagebox
);

// Message
// css3 var in packages/theme-chalk/src/message.scss
$message: () !default;
$message: map.merge(
  (
    'bg-color': getCssVar('color', 'info', 'light-9'),
    'border-color': getCssVar('border-color-lighter'),
    'padding': 11px 15px,
    'close-size': 16px,
    'close-icon-color': getCssVar('text-color-placeholder'),
    'close-hover-color': getCssVar('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': getCssVar('box-shadow-light'),
    'border-color': getCssVar('border-color-lighter'),
    'icon-size': 24px,
    'close-font-size':
      var(
        #{getCssVarName('message-close-size')},
        map.get($message, 'close-size')
      ),
    'group-margin-left': 13px,
    'group-margin-right': 8px,
    'content-font-size': getCssVar('font-size-base'),
    'content-color': getCssVar('text-color-regular'),
    'title-font-size': 16px,
    'title-color': getCssVar('text-color-primary'),
    'close-color': getCssVar('text-color-secondary'),
    'close-hover-color': getCssVar('text-color-regular'),
  ),
  $notification
);

// Input
// css3 var in packages/theme-chalk/src/input.scss
$input: () !default;
$input: map.merge(
  (
    'text-color': getCssVar('text-color-regular'),
    'border': getCssVar('border'),
    'hover-border': getCssVar('border-color-hover'),
    'focus-border': getCssVar('color-primary'),
    'transparent-border': 0 0 0 1px transparent inset,
    'border-color': getCssVar('border-color'),
    'border-radius': getCssVar('border-radius-base'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'icon-color': getCssVar('text-color-placeholder'),
    'placeholder-color': getCssVar('text-color-placeholder'),
    'hover-border-color': getCssVar('border-color-hover'),
    'clear-hover-color': getCssVar('text-color-secondary'),
    'focus-border-color': getCssVar('color-primary'),
    'width': 100%,
  ),
  $input
);

$input-disabled: () !default;
$input-disabled: map.merge(
  (
    'fill': getCssVar('disabled-bg-color'),
    'border': getCssVar('disabled-border-color'),
    'text-color': getCssVar('disabled-text-color'),
    'placeholder-color': getCssVar('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
);

// Cascader
// css3 var in packages/theme-chalk/src/cascader.scss
$cascader: () !default;
$cascader: map.merge(
  (
    'menu-text-color': getCssVar('text-color-regular'),
    'menu-selected-text-color': getCssVar('color-primary'),
    'menu-fill': getCssVar('bg-color', 'overlay'),
    'menu-font-size': getCssVar('font-size-base'),
    'menu-radius': getCssVar('border-radius-base'),
    'menu-border': solid 1px getCssVar('border-color-light'),
    'menu-shadow': getCssVar('box-shadow-light'),
    'node-background-hover': getCssVar('fill-color', 'light'),
    'node-color-disabled': getCssVar('text-color-placeholder'),
    'color-empty': getCssVar('text-color-placeholder'),
    'tag-background': getCssVar('fill-color'),
  ),
  $cascader
);
//statistic
// css3 var in packages/theme-chalk/src/statistic.scss
$statistic: () !default;
$statistic: map.merge(
  (
    'title-font-weight': 400,
    'title-font-size': getCssVar('font-size', 'extra-small'),
    'title-color': getCssVar('text-color', 'regular'),
    'content-font-weight': 400,
    'content-font-size': getCssVar('font-size', 'extra-large'),
    'content-color': getCssVar('text-color', 'primary'),
  ),
  $statistic
);
// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
  (
    'font-weight': getCssVar('font-weight-primary'),
    'border-color': getCssVar('border-color'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'text-color': getCssVar('text-color', 'regular'),
    'disabled-text-color': getCssVar('disabled-text-color'),
    'disabled-bg-color': getCssVar('fill-color', 'blank'),
    'disabled-border-color': getCssVar('border-color-light'),
    'divide-border-color': rgba($color-white, 0.5),
    'hover-text-color': getCssVar('color-primary'),
    'hover-bg-color': getCssVar('color-primary', 'light-9'),
    'hover-border-color': getCssVar('color-primary-light-7'),
    'active-text-color': getCssVar('button-hover-text-color'),
    'active-border-color': getCssVar('color-primary'),
    'active-bg-color': getCssVar('button', 'hover-bg-color'),
    'outline-color': getCssVar('color-primary', 'light-5'),
    'hover-link-text-color': getCssVar('color-info'),
    'active-color': getCssVar('text-color', 'primary'),
  ),
  $button
);

$button-border-width: $border-width !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': getCssVar('font-size', 'base'),
    'default': getCssVar('font-size', 'base'),
    'small': 12px,
  ),
  $button-font-size
);

$button-border-radius: () !default;
$button-border-radius: map.merge(
  (
    'large': getCssVar('border-radius', 'base'),
    'default': getCssVar('border-radius', 'base'),
    'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
  ),
  $button-border-radius
);

$button-padding-vertical: () !default;
$button-padding-vertical: map.merge(
  (
    'large': 13px,
    'default': 9px,
    'small': 6px,
  ),
  $button-padding-vertical
);

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

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

// Dialog
// css3 var in packages/theme-chalk/src/dialog.scss
$dialog: () !default;
$dialog: map.merge(
  (
    'width': 50%,
    'margin-top': 15vh,
    'bg-color': getCssVar('bg-color'),
    'box-shadow': getCssVar('box-shadow'),
    'title-font-size': getCssVar('font-size-large'),
    'content-font-size': 14px,
    'font-line-height': getCssVar('font-line-height-primary'),
    'padding-primary': 16px,
    'border-radius': getCssVar('border-radius-base'),
  ),
  $dialog
);

// Tour
// css3 var in packages/theme-chalk/src/tour.scss
$tour: () !default;
$tour: map.merge(
  (
    'width': 520px,
    'padding-primary': 12px,
    'font-line-height': getCssVar('font-line-height-primary'),
    'title-font-size': 16px,
    'title-text-color': getCssVar('text-color-primary'),
    'title-font-weight': 400,
    'close-color': getCssVar('color-info'),
    'font-size': 14px,
    'color': getCssVar('text-color-primary'),
    'bg-color': getCssVar('bg-color'),
    'border-radius': 4px,
  ),
  $tour
);

// Anchor
// css3 var in packages/theme-chalk/src/anchor.scss
$anchor: () !default;
$anchor: map.merge(
  (
    'bg-color': getCssVar('bg-color'),
    'padding-indent': 14px,
    'line-height': 22px,
    'font-size': 12px,
    'color': getCssVar('text-color-secondary'),
    'active-color': getCssVar('color-primary'),
    'marker-bg-color': getCssVar('color-primary'),
  ),
  $anchor
);

// Segmented
// css3 var in packages/theme-chalk/src/segmented.scss
$segmented: () !default;
$segmented: map.merge(
  (
    'color': getCssVar('text-color', 'regular'),
    'bg-color': getCssVar('fill-color', 'light'),
    'padding': 2px,
    'item-selected-color': getCssVar('color-white'),
    'item-selected-bg-color': getCssVar('color-primary'),
    'item-selected-disabled-bg-color': getCssVar('color-primary', 'light-5'),
    'item-hover-color': getCssVar('text-color', 'primary'),
    'item-hover-bg-color': getCssVar('fill-color', 'dark'),
    'item-active-bg-color': getCssVar('fill-color', 'darker'),
    'item-disabled-color': getCssVar('text-color', 'placeholder'),
  ),
  $segmented
);

// Mention
// css3 var in packages/theme-chalk/src/mention.scss
$mention: () !default;
$mention: map.merge(
  (
    'font-size': getCssVar('font-size-base'),
    'bg-color': getCssVar('bg-color', 'overlay'),
    'shadow': getCssVar('box-shadow-light'),
    'border': 1px solid getCssVar('border-color-light'),
    'option-color': getCssVar('text-color-regular'),
    'option-height': 34px,
    'option-min-width': 100px,
    'option-hover-background': getCssVar('fill-color', 'light'),
    'option-selected-color': getCssVar('color-primary'),
    'option-disabled-color': getCssVar('text-color-placeholder'),
    'option-loading-color': getCssVar('text-color-secondary'),
    'option-loading-padding': 10px 0,
    'max-height': 174px,
    'padding': 6px 0,
    'header-padding': 10px,
    'footer-padding': 10px,
  ),
  $mention
);

// Table
// css3 var in packages/theme-chalk/src/table.scss
$table: () !default;
$table: map.merge(
  (
    'border-color': getCssVar('border-color-lighter'),
    'border': 1px solid getCssVar('table-border-color'),
    'text-color': getCssVar('text-color-regular'),
    'header-text-color': getCssVar('text-color-secondary'),
    'row-hover-bg-color': getCssVar('fill-color', 'light'),
    'current-row-bg-color': getCssVar('color-primary-light-9'),
    'header-bg-color': getCssVar('bg-color'),
    'fixed-box-shadow': getCssVar('box-shadow', 'light'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'tr-bg-color': getCssVar('bg-color'),
    'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
    'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
    'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
    'index': getCssVar('index-normal'),
  ),
  $table
);

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

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

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

// Pagination
// css3 var in packages/theme-chalk/src/pagination.scss
$pagination: () !default;
$pagination: map.merge(
  (
    'font-size': 14px,
    'bg-color': getCssVar('fill-color', 'blank'),
    'text-color': getCssVar('text-color-primary'),
    'border-radius': 2px,
    'button-color': getCssVar('text-color-primary'),
    'button-width': 32px,
    'button-height': 32px,
    'button-disabled-color': getCssVar('text-color-placeholder'),
    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
    'button-bg-color': getCssVar('fill-color'),
    'hover-color': getCssVar('color-primary'),
    'font-size-small': 12px,
    'button-width-small': 24px,
    'button-height-small': 24px,
    'button-width-large': 40px,
    'button-height-large': 40px,
    'item-gap': 16px,
  ),
  $pagination
);

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

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

// popper
// Pay attention to the difference between 'popper' and 'popover'
$popper: () !default;
$popper: map.merge(
  (
    'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
  ),
  $popper
);

// skeleton
$skeleton: () !default;
$skeleton: map.merge(
  (
    'color': getCssVar('fill-color'),
    'to-color': getCssVar('fill-color', 'darker'),
  ),
  $skeleton
);

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

// Text
// css3 var in packages/theme-chalk/src/text.scss
$text: () !default;
$text: map.merge(
  (
    'font-size': getCssVar('font-size', 'base'),
    'color': getCssVar('text-color', 'regular'),
  ),
  $text
);

$text-font-size: () !default;
$text-font-size: map.merge(
  (
    'large': getCssVar('font-size', 'medium'),
    'default': getCssVar('font-size', 'base'),
    'small': getCssVar('font-size', 'extra-small'),
  ),
  $text-font-size
);

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

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

// drawer
$drawer: () !default;
$drawer: map.merge(
  (
    'bg-color':
      var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
  ),
  $drawer
);

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

// Card
$card: () !default;
$card: map.merge(
  (
    'border-color': getCssVar('border-color', 'light'),
    'border-radius': 4px,
    'padding': 20px,
    'bg-color': getCssVar('fill-color', 'blank'),
  ),
  $card
);

// Slider
// css3 var in packages/theme-chalk/src/slider.scss
$slider: () !default;
$slider: map.merge(
  (
    'main-bg-color': getCssVar('color-primary'),
    'runway-bg-color': getCssVar('border-color-light'),
    'stop-bg-color': getCssVar('color-white'),
    'disabled-color': getCssVar('text-color-placeholder'),
    '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(
  (
    'active-color': getCssVar('color-primary'),
    'text-color': getCssVar('text-color-primary'),
    'hover-text-color': getCssVar('color-primary'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'hover-bg-color': getCssVar('color-primary-light-9'),
    'item-height': 56px,
    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
    'horizontal-height': 60px,
    'horizontal-sub-item-height': 36px,
    'item-font-size': getCssVar('font-size-base'),
    'item-hover-fill': getCssVar('color-primary-light-9'),
    'border-color': getCssVar('border-color'),
    'base-level-padding': 20px,
    'level-padding': 20px,
    'icon-width': 24px,
  ),
  $menu
);

// Rate
$rate: () !default;
$rate: map.merge(
  (
    'height': 20px,
    'font-size': getCssVar('font-size-base'),
    'icon-size': 18px,
    'icon-margin': 6px,
    // seems not be used, to be removed
    // 'icon-color': getCssVar('text-color-placeholder),
    'void-color': getCssVar('border-color', 'darker'),
    'fill-color': #f7ba2a,
    'disabled-void-color': getCssVar('fill-color'),
    'text-color': getCssVar('text-color', 'primary'),
  ),
  $rate
);

// DatePicker
// css3 var packages/theme-chalk/src/date-picker/var.scss
$datepicker: () !default;
$datepicker: map.merge(
  (
    'text-color': getCssVar('text-color-regular'),
    'off-text-color': getCssVar('text-color-placeholder'),
    'header-text-color': getCssVar('text-color-regular'),
    'icon-color': getCssVar('text-color-primary'),
    'border-color': getCssVar('disabled-border-color'),
    'inner-border-color': getCssVar('border-color-light'),
    'inrange-bg-color': getCssVar('border-color-extra-light'),
    'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
    'active-color': getCssVar('color-primary'),
    'hover-text-color': getCssVar('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,
    'bg-color': getCssVar('text-color-secondary'),
    'hover-opacity': 0.5,
    'hover-bg-color': getCssVar('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': getCssVar('border-color-hover'),
  ),
  $carousel
);

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

// Transfer
// css3 var in packages/theme-chalk/src/transfer.scss
$transfer: () !default;
$transfer: map.merge(
  (
    'border-color': getCssVar('border-color-lighter'),
    'border-radius': getCssVar('border-radius-base'),
    'panel-width': 200px,
    'panel-header-height': 40px,
    'panel-header-bg-color': getCssVar('fill-color', 'light'),
    'panel-footer-height': 40px,
    'panel-body-height': 278px,
    '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': getCssVar('border-color-light'),
  ),
  $timeline
);

// Tabs
// css3 var in packages/theme-chalk/src/tabs.scss
$tabs: () !default;
$tabs: map.merge(
  (
    'header-height': 40px,
  ),
  $tabs
);

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

// Link
// css3 var in packages/theme-chalk/src/link.scss
$link: () !default;
$link: map.merge(
  (
    'font-size': getCssVar('font-size-base'),
    'font-weight': getCssVar('font-weight-primary'),
    'text-color': getCssVar('text-color-regular'),
    'hover-text-color': getCssVar('color-primary'),
    'disabled-text-color': getCssVar('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;
}

// Calendar
// css3 var in packages/theme-chalk/src/calendar.scss
$calendar: () !default;
$calendar: map.merge(
  (
    'border':
      var(
        #{getCssVarName('table-border')},
        1px solid #{getCssVar('border-color-lighter')}
      ),
    'header-border-bottom': getCssVar('calendar-border'),
    'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
    'cell-width': 85px,
  ),
  $calendar
);

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

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

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

// 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,
    'fill-color-0': getCssVar('color-white'),
    'fill-color-1': #fcfcfd,
    'fill-color-2': #f8f9fb,
    'fill-color-3': #f7f8fc,
    'fill-color-4': #eeeff3,
    'fill-color-5': #edeef2,
    'fill-color-6': #e9ebef,
    'fill-color-7': #e5e7e9,
    'fill-color-8': #e0e3e9,
    'fill-color-9': #d5d7de,
  ),
  $empty
);

// Descriptions
// css3 var in packages/theme-chalk/src/descriptions.scss
$descriptions: () !default;
$descriptions: map.merge(
  (
    'table-border': 1px solid getCssVar('border-color-lighter'),
    'item-bordered-label-background': getCssVar('fill-color', 'light'),
  ),
  $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
);

// Upload
// css3 var in packages/theme-chalk/src/upload.scss
$upload: () !default;
$upload: map.merge(
  (
    'dragger-padding-horizontal': 40px,
    'dragger-padding-vertical': 10px,
  ),
  $upload
);

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

// 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 - 1})',
  'sm': '(min-width: #{$sm})',
  'md': '(min-width: #{$md})',
  'lg': '(min-width: #{$lg})',
  'xl': '(min-width: #{$xl})',
) !default;

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


code:
@use 'mixins/mixins' as *;

@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;

  @include when(vertical) {
    flex-direction: column;
  }
}


code:
// CSS3 var
@use './var' as *;
@use '../mixins/_var.scss' as *;
@use '../mixins/mixins.scss' as *;

html.dark {
  color-scheme: dark;

  // hex colors
  @each $type in (primary, success, warning, danger, error, info) {
    @include set-css-color-type($colors, $type);
  }

  // --el-box-shadow-#{$type}
  @include set-component-css-var('box-shadow', $box-shadow);

  // color-scheme
  // Background --el-bg-color-#{$type}
  @include set-component-css-var('bg-color', $bg-color);
  // --el-text-color-#{$type}
  @include set-component-css-var('text-color', $text-color);
  // --el-border-color-#{$type}
  @include set-component-css-var('border-color', $border-color);
  // Fill --el-fill-color-#{$type}
  @include set-component-css-var('fill-color', $fill-color);
  @include set-component-css-var('mask-color', $mask-color);
}

@include dark(button) {
  @include set-component-css-var('button', $button);
}

@include dark(card) {
  @include set-component-css-var('card', $card);
}

@include dark(empty) {
  @include set-component-css-var('empty', $empty);
}


code:
@use 'sass:map';
@use 'sass:math';

@use '../common/var.scss' as common;
@use '../mixins/mixins.scss' as *;
@use '../color/index.scss' as *;

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

// 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
) {
  // hex mix color
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
          mix(
            $mix-color,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;

  // for designer to view transparent
  // $colors: map.deep-merge(
  //   (
  //     $type: (
  //       '#{$mode}-#{$number}':
  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
  //     ),
  //   ),
  //   $colors
  // ) !global;
}

// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    'page': #0a0a0a,
    '': #141414,
    'overlay': #1d1e1f,
  ),
  $bg-color
);

// dark-mode
@each $type in common.$types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
  }
}
@each $type in common.$types {
  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
}

// border
$border-color-base: #f5f8ff;
$border-color: () !default;
$border-color: map.merge(
  (
    'darker': rgba($border-color-base, 0.35),
    'dark': rgba($border-color-base, 0.3),
    '': rgba($border-color-base, 0.25),
    'light': rgba($border-color-base, 0.2),
    'lighter': rgba($border-color-base, 0.15),
    'extra-light': rgba($border-color-base, 0.1),
  ),
  $border-color
);

// mix to hex to avoid overlay issues
@each $key, $val in $border-color {
  $border-color: map.merge(
    $border-color,
    (
      $key: mix-overlay-color($val, map.get($bg-color, '')),
    )
  ) !global;
}

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
  (
    '': (
      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
      0px 8px 20px rgba(0, 0, 0, 0.72),
    ),
    'light': (
      0px 0px 12px rgba(0, 0, 0, 0.72),
    ),
    'lighter': (
      0px 0px 6px rgba(0, 0, 0, 0.72),
    ),
    'dark': (
      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
      0px 12px 32px #000000,
      0px 8px 16px -8px #000000,
    ),
  ),
  $box-shadow
);

// fill
$fill-color-base: #fafcff;
$fill-color: () !default;
$fill-color: map.merge(
  (
    'darker': rgba($fill-color-base, 0.2),
    'dark': rgba($fill-color-base, 0.16),
    '': rgba($fill-color-base, 0.12),
    'light': rgba($fill-color-base, 0.08),
    'lighter': rgba($fill-color-base, 0.04),
    'extra-light': rgba($fill-color-base, 0.02),
    'blank': transparent,
  ),
  $fill-color
);

// mix to hex to avoid overlay issues
@each $key, $val in $fill-color {
  @if ($key != 'blank') {
    $fill-color: map.merge(
      $fill-color,
      (
        $key: mix-overlay-color($val, map.get($bg-color, '')),
      )
    ) !global;
  }
}

// text
$text-color-base: #f0f5ff;
$text-color: () !default;
$text-color: map.merge(
  (
    'primary': rgba($text-color-base, 0.95),
    'regular': rgba($text-color-base, 0.85),
    'secondary': rgba($text-color-base, 0.65),
    'placeholder': rgba($text-color-base, 0.55),
    'disabled': rgba($text-color-base, 0.4),
  ),
  $text-color
);
// mix to hex to avoid overlay issues
@each $key, $val in $text-color {
  $text-color: map.merge(
    $text-color,
    (
      $key: mix-overlay-color($val, map.get($bg-color, '')),
    )
  ) !global;
}

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

// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
  (
    'disabled-text-color': rgba(255, 255, 255, 0.5),
  ),
  $button
);

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

// Empty
// css3 var in packages/theme-chalk/src/empty.scss
$empty: () !default;
$empty: map.merge(
  (
    'fill-color-0': getCssVar('color-black'),
    'fill-color-1': #4b4b52,
    'fill-color-2': #36383d,
    'fill-color-3': #1e1e20,
    'fill-color-4': #262629,
    'fill-color-5': #202124,
    'fill-color-6': #212224,
    'fill-color-7': #1b1c1f,
    'fill-color-8': #1c1d1f,
    'fill-color-9': #18181a,
  ),
  $empty
);


code:
@forward './date-picker/date-table.scss';
@forward './date-picker/month-table.scss';
@forward './date-picker/year-table.scss';
@forward './date-picker/time-spinner.scss';
@forward './date-picker/picker.scss';
@forward './date-picker/date-picker.scss';
@forward './date-picker/date-range-picker.scss';
@forward './date-picker/time-range-picker.scss';
@forward './date-picker/time-picker.scss';


code:
@use '../common/var' as *;
@use '../mixins/mixins' as *;
@use '../mixins/var' as *;
@use './picker-panel.scss';

@include b(date-picker) {
  @include set-component-css-var('datepicker', $datepicker);
}

@include b(date-picker) {
  width: 322px;

  &.has-sidebar.has-time {
    width: 434px;
  }

  &.has-sidebar {
    width: 438px;
  }

  &.has-time .#{$namespace}-picker-panel__body-wrapper {
    position: relative;
  }

  .#{$namespace}-picker-panel__content {
    width: 292px;
  }

  table {
    table-layout: fixed;
    width: 100%;
  }

  @include e(editor-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;
  }

  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
    font-size: 12px;
    padding: 8px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;
  }

  @include e(header) {
    padding: 12px 12px 0;
    text-align: center;

    @include m(bordered) {
      margin-bottom: 0;
      padding-bottom: 12px;
      border-bottom: solid 1px getCssVar('border-color-lighter');

      & + .#{$namespace}-picker-panel__content {
        margin-top: 0;
      }
    }
  }

  @include e(header-label) {
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    color: getCssVar('text-color', 'regular');

    &:hover {
      color: getCssVar('datepicker-hover-text-color');
    }
    &:focus-visible {
      outline: none;
      color: getCssVar('datepicker-hover-text-color');
    }

    &.active {
      color: getCssVar('datepicker-active-color');
    }
  }

  @include e(prev-btn) {
    float: left;
  }

  @include e(next-btn) {
    float: right;
  }

  @include e(time-wrap) {
    padding: 10px;
    text-align: center;
  }

  @include e(time-label) {
    float: left;
    cursor: pointer;
    line-height: 30px;
    margin-left: 10px;
  }

  .#{$namespace}-time-panel {
    position: absolute;
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@use '../mixins/var' as *;

@include b(date-range-picker) {
  @include set-component-css-var('datepicker', $datepicker);
}

@include b(date-range-picker) {
  width: 646px;

  &.has-sidebar {
    width: 756px;
  }

  &.has-time .#{$namespace}-picker-panel__body-wrapper {
    position: relative;
  }

  table {
    table-layout: fixed;
    width: 100%;
  }

  .#{$namespace}-picker-panel__body {
    min-width: 513px;
  }

  .#{$namespace}-picker-panel__content {
    margin: 0;
  }

  @include e(header) {
    position: relative;
    text-align: center;
    height: 28px;

    [class*='arrow-left'] {
      float: left;
    }

    [class*='arrow-right'] {
      float: right;
    }

    div {
      font-size: 16px;
      font-weight: 500;
      margin-right: 50px;
    }
  }

  @include e(content) {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;

    @include when(left) {
      border-right: 1px solid getCssVar('datepicker-inner-border-color');
    }
    .#{$namespace}-date-range-picker__header {
      div {
        margin-left: 50px;
        margin-right: 50px;
      }
    }
  }

  @include e(editors-wrap) {
    box-sizing: border-box;
    display: table-cell;

    @include when(right) {
      text-align: right;
    }
  }

  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
    font-size: 12px;
    padding: 8px 5px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;

    > .#{$namespace}-icon-arrow-right {
      font-size: 20px;
      vertical-align: middle;
      display: table-cell;
      color: getCssVar('datepicker-icon-color');
    }
  }

  @include e(time-picker-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;

    .#{$namespace}-picker-panel {
      position: absolute;
      top: 13px;
      right: 0;
      z-index: 1;
      background: $color-white;
    }
    .#{$namespace}-time-panel {
      position: absolute;
    }
  }
}


code:
@use '../common/var' as *;
@use '../mixins/mixins' as *;

@include b(date-table) {
  font-size: 12px;
  user-select: none;

  @include when(week-mode) {
    .#{$namespace}-date-table__row {
      &:hover {
        .#{$namespace}-date-table-cell {
          background-color: getCssVar('datepicker-inrange-bg-color');
        }
        td.available:hover {
          color: getCssVar('datepicker-text-color');
        }
        td:first-child .#{$namespace}-date-table-cell {
          margin-left: 5px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
        td:last-child .#{$namespace}-date-table-cell {
          margin-right: 5px;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
        }
      }

      &.current .#{$namespace}-date-table-cell {
        background-color: getCssVar('datepicker-inrange-bg-color');
      }
    }
  }

  td {
    width: 32px;
    height: 30px;
    padding: 4px 0;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;

    @include b(date-table-cell) {
      height: 30px;
      padding: 3px 0;
      box-sizing: border-box;
      @include b(date-table-cell__text) {
        width: 24px;
        height: 24px;
        display: block;
        margin: 0 auto;
        line-height: 24px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
      }
    }

    &.next-month,
    &.prev-month {
      color: getCssVar('datepicker-off-text-color');
    }

    &.today {
      position: relative;
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-primary');
        font-weight: bold;
      }
      &.start-date .#{$namespace}-date-table-cell__text,
      &.end-date .#{$namespace}-date-table-cell__text {
        color: $color-white;
      }
    }

    &.available:hover {
      color: getCssVar('datepicker-hover-text-color');
    }

    &.in-range .#{$namespace}-date-table-cell {
      background-color: getCssVar('datepicker-inrange-bg-color');
      &:hover {
        background-color: getCssVar('datepicker-inrange-hover-bg-color');
      }
    }

    &.current:not(.disabled) {
      .#{$namespace}-date-table-cell__text {
        color: $color-white;
        background-color: getCssVar('datepicker-active-color');
      }
      &:focus-visible {
        .#{$namespace}-date-table-cell__text {
          outline: 2px solid getCssVar('datepicker-active-color');
          outline-offset: 1px;
        }
      }
    }
    &.start-date .#{$namespace}-date-table-cell,
    &.end-date .#{$namespace}-date-table-cell {
      color: $color-white;
    }

    &.start-date .#{$namespace}-date-table-cell__text,
    &.end-date .#{$namespace}-date-table-cell__text {
      background-color: getCssVar('datepicker-active-color');
    }

    &.start-date .#{$namespace}-date-table-cell {
      margin-left: 5px;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }

    &.end-date .#{$namespace}-date-table-cell {
      margin-right: 5px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    &.disabled .#{$namespace}-date-table-cell {
      background-color: getCssVar('fill-color', 'light');
      opacity: 1;
      cursor: not-allowed;
      color: getCssVar('text-color', 'placeholder');
    }

    &.selected .#{$namespace}-date-table-cell {
      margin-left: 5px;
      margin-right: 5px;
      border-radius: 15px;
    }

    &.selected .#{$namespace}-date-table-cell__text {
      background-color: getCssVar('datepicker-active-color');
      color: $color-white;
      border-radius: 15px;
    }

    &.week {
      font-size: 80%;
      color: getCssVar('datepicker-header-text-color');
    }

    &:focus {
      outline: none;
    }
  }

  th {
    padding: 5px;
    color: getCssVar('datepicker-header-text-color');
    font-weight: 400;
    border-bottom: solid 1px getCssVar('border-color-lighter');
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(month-table) {
  font-size: 12px;
  margin: -1px;
  border-collapse: collapse;

  td {
    width: 68px;
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    position: relative;

    @include b(date-table-cell) {
      height: 48px;
      padding: 6px 0;
      box-sizing: border-box;
    }

    &.today {
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-primary');
        font-weight: bold;
      }

      &.start-date .#{$namespace}-date-table-cell__text,
      &.end-date .#{$namespace}-date-table-cell__text {
        color: $color-white;
      }
    }

    &.disabled .#{$namespace}-date-table-cell__text {
      background-color: getCssVar('fill-color', 'light');
      cursor: not-allowed;
      color: getCssVar('text-color', 'placeholder');

      &:hover {
        color: getCssVar('text-color', 'placeholder');
      }
    }

    @include b(date-table-cell__text) {
      width: 54px;
      height: 36px;
      display: block;
      line-height: 36px;
      color: getCssVar('datepicker-text-color');
      margin: 0 auto;
      border-radius: 18px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        color: getCssVar('datepicker-hover-text-color');
      }
    }

    &.in-range .#{$namespace}-date-table-cell {
      background-color: getCssVar('datepicker-inrange-bg-color');

      &:hover {
        background-color: getCssVar('datepicker-inrange-hover-bg-color');
      }
    }

    &.start-date .#{$namespace}-date-table-cell,
    &.end-date .#{$namespace}-date-table-cell {
      color: $color-white;
    }

    &.start-date .#{$namespace}-date-table-cell__text,
    &.end-date .#{$namespace}-date-table-cell__text {
      color: $color-white;
      background-color: getCssVar('datepicker-active-color');
    }

    &.start-date .#{$namespace}-date-table-cell {
      margin-left: 3px;
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
    }

    &.end-date .#{$namespace}-date-table-cell {
      margin-right: 3px;
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
    }

    &.current:not(.disabled) .#{$namespace}-date-table-cell {
      border-radius: 24px;
      margin-left: 3px;
      margin-right: 3px;
    }

    &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
      color: $color-white;
      background-color: getCssVar('datepicker-active-color');
    }

    &:focus-visible {
      outline: none;

      .#{$namespace}-date-table-cell__text {
        outline: 2px solid getCssVar('datepicker-active-color');
        outline-offset: 1px;
      }
    }
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(picker-panel) {
  color: getCssVar('text-color', 'regular');
  background: getCssVar('bg-color', 'overlay');
  border-radius: getCssVar('border-radius-base');
  line-height: 30px;

  .#{$namespace}-time-panel {
    margin: 5px 0;
    border: solid 1px getCssVar('datepicker-border-color');
    background-color: getCssVar('bg-color', 'overlay');
    box-shadow: getCssVar('box-shadow-light');
  }

  @include e((body, body-wrapper)) {
    &::after {
      content: '';
      display: table;
      clear: both;
    }
  }

  @include e(content) {
    position: relative;
    margin: 15px;
  }

  @include e(footer) {
    border-top: 1px solid getCssVar('datepicker-inner-border-color');
    padding: 4px 12px;
    text-align: right;
    background-color: getCssVar('bg-color', 'overlay');
    position: relative;
    font-size: 0;
  }

  @include e(shortcut) {
    display: block;
    width: 100%;
    border: 0;
    background-color: transparent;
    line-height: 28px;
    font-size: 14px;
    color: getCssVar('datepicker-text-color');
    padding-left: 12px;
    text-align: left;
    outline: none;
    cursor: pointer;

    &:hover {
      color: getCssVar('datepicker-hover-text-color');
    }

    &.active {
      background-color: #e6f1fe;
      color: getCssVar('datepicker-active-color');
    }
  }

  @include e(btn) {
    border: 1px solid getCssVar('fill-color', 'darker');
    color: getCssVar('text-color', 'primary');
    line-height: 24px;
    border-radius: 2px;
    padding: 0 20px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;

    &[disabled] {
      color: getCssVar('text-color', 'disabled');
      cursor: not-allowed;
    }
  }

  @include e(icon-btn) {
    font-size: 12px;
    color: getCssVar('datepicker-icon-color');
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    margin-top: 8px;

    &:hover {
      color: getCssVar('datepicker-hover-text-color');
    }
    &:focus-visible {
      color: getCssVar('datepicker-hover-text-color');
    }

    @include when(disabled) {
      color: getCssVar('text-color-disabled');

      &:hover {
        cursor: not-allowed;
      }
    }
    & .#{$namespace}-icon {
      cursor: pointer;
      font-size: inherit;
    }
  }

  @include e(link-btn) {
    vertical-align: middle;
  }
}

.#{$namespace}-picker-panel *[slot='sidebar'],
.#{$namespace}-picker-panel__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  border-right: 1px solid getCssVar('datepicker-inner-border-color');
  box-sizing: border-box;
  padding-top: 6px;
  background-color: getCssVar('bg-color', 'overlay');
  overflow: auto;
}

.#{$namespace}-picker-panel
  *[slot='sidebar']
  + .#{$namespace}-picker-panel__body,
.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
  margin-left: 110px;
}


code:
@use 'sass:map';

@use '../mixins/mixins' as *;
@use '../mixins/var' as *;
@use '../common/var' as *;
@use '../common/transition' as *;

@include b(picker) {
  @include e(popper) {
    @include set-css-var-type('datepicker', 'border-color', $datepicker);
    @include picker-popper(
      getCssVar('bg-color', 'overlay'),
      1px solid getCssVar('datepicker', 'border-color'),
      getCssVar('box-shadow', 'light')
    );
  }
}

@include b(date-editor) {
  @include set-component-css-var('date-editor', $date-editor);
  @include set-component-css-var('input', $input);
  position: relative;
  text-align: left;
  vertical-align: middle;

  &.#{$namespace}-input__wrapper {
    @include inset-input-border(
      var(
        #{getCssVarName('input-border-color')},
        map.get($input, 'border-color')
      )
    );

    &:hover {
      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
    }
  }

  &.#{$namespace}-input,
  &.#{$namespace}-input__wrapper {
    width: getCssVar('date-editor-width');
    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
  }

  @include m((monthrange)) {
    @include css-var-from-global(
      'date-editor-width',
      'date-editor-monthrange-width'
    );
  }

  @include m((daterange, timerange)) {
    @include css-var-from-global(
      'date-editor-width',
      'date-editor-daterange-width'
    );
  }

  @include m(datetimerange) {
    @include css-var-from-global(
      'date-editor-width',
      'date-editor-datetimerange-width'
    );
  }

  @include m(dates) {
    .#{$namespace}-input__wrapper {
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .close-icon {
    cursor: pointer;
  }

  .clear-icon {
    cursor: pointer;

    &:hover {
      color: getCssVar('text-color', 'secondary');
    }
  }

  .#{$namespace}-range__icon {
    height: inherit;
    font-size: 14px;
    color: getCssVar('text-color', 'placeholder');
    float: left;

    svg {
      vertical-align: middle;
    }
  }

  .#{$namespace}-range-input {
    appearance: none;
    border: none;
    outline: none;
    display: inline-block;
    height: #{map.get($input-height, 'default') - 2};
    line-height: #{map.get($input-height, 'default') - 2};
    margin: 0;
    padding: 0;
    width: 39%;
    text-align: center;
    font-size: getCssVar('font-size', 'base');
    color: getCssVar('text-color', 'regular');
    background-color: transparent;

    &::placeholder {
      color: getCssVar('text-color', 'placeholder');
    }
  }

  .#{$namespace}-range-separator {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 5px;
    margin: 0;
    font-size: 14px;
    overflow-wrap: break-word;
    color: getCssVar('text-color', 'primary');
  }

  .#{$namespace}-range__close-icon {
    font-size: 14px;
    color: getCssVar('text-color', 'placeholder');
    height: inherit;
    width: unset;
    cursor: pointer;

    &:hover {
      color: getCssVar('text-color', 'secondary');
    }

    svg {
      vertical-align: middle;
    }

    &--hidden {
      opacity: 0;
      visibility: hidden;
    }
  }
}

@include b(range-editor) {
  &.#{$namespace}-input__wrapper {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    vertical-align: middle;
  }

  @include when(active) {
    @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
    &:hover {
      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      line-height: getCssVar('component-size', $size);

      &.#{$namespace}-input__wrapper {
        height: getCssVar('component-size', $size);
      }

      .#{$namespace}-range-separator {
        line-height: map.get($input-line-height, $size);
        font-size: map.get($input-font-size, $size);
      }

      .#{$namespace}-range-input {
        height: #{map.get($input-height, $size) - 2};
        line-height: #{map.get($input-height, $size) - 2};
        font-size: map.get($input-font-size, $size);
      }
    }
  }

  @include when(disabled) {
    background-color: map.get($input-disabled, 'fill');
    border-color: map.get($input-disabled, 'border');
    color: map.get($input-disabled, 'text-color');
    cursor: not-allowed;

    &:hover,
    &:focus {
      border-color: map.get($input-disabled, 'border');
    }

    input {
      background-color: map.get($input-disabled, 'fill');
      color: map.get($input-disabled, 'text-color');
      cursor: not-allowed;
      &::placeholder {
        color: map.get($input-disabled, 'placeholder-color');
      }
    }

    .#{$namespace}-range-separator {
      color: map.get($input-disabled, 'text-color');
    }
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(time-panel) {
  border-radius: 2px;
  position: relative;
  width: 180px;
  left: 0;
  z-index: getCssVar('index-top');
  user-select: none;
  box-sizing: content-box;

  @include e(content) {
    font-size: 0;
    position: relative;
    overflow: hidden;

    &::after,
    &::before {
      content: '';
      top: 50%;
      position: absolute;
      margin-top: -16px;
      height: 32px;
      z-index: -1;
      left: 0;
      right: 0;
      box-sizing: border-box;
      padding-top: 6px;
      text-align: left;
    }

    &::after {
      left: 50%;
      margin-left: 12%;
      margin-right: 12%;
    }

    &::before {
      padding-left: 50%;
      margin-right: 12%;
      margin-left: 12%;
      border-top: 1px solid getCssVar('border-color-light');
      border-bottom: 1px solid getCssVar('border-color-light');
    }

    &.has-seconds {
      &::after {
        left: calc(100% / 3 * 2);
      }

      &::before {
        padding-left: calc(100% / 3);
      }
    }
  }

  @include e(footer) {
    border-top: 1px solid
      var(
        #{getCssVarName('timepicker-inner-border-color')},
        #{getCssVar('border-color-light')}
      );
    padding: 4px;
    height: 36px;
    line-height: 25px;
    text-align: right;
    box-sizing: border-box;
  }

  @include e(btn) {
    border: none;
    line-height: 28px;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;
    color: getCssVar('text-color', 'primary');

    &.confirm {
      font-weight: 800;
      color: var(
        #{getCssVarName('timepicker-active-color')},
        #{getCssVar('color-primary')}
      );
    }
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(time-range-picker) {
  width: 354px;
  overflow: visible;

  @include e(content) {
    position: relative;
    text-align: center;
    padding: 10px;
    z-index: 1;
  }

  @include e(cell) {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 7px 7px;
    width: 50%;
    display: inline-block;
  }

  @include e(header) {
    margin-bottom: 5px;
    text-align: center;
    font-size: 14px;
  }

  @include e(body) {
    border-radius: 2px;
    border: 1px solid getCssVar('datepicker-border-color');
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(time-spinner) {
  &.has-seconds {
    .#{$namespace}-time-spinner__wrapper {
      width: 33.3%;
    }
  }

  @include e(wrapper) {
    max-height: 192px;
    overflow: auto;
    display: inline-block;
    width: 50%;
    vertical-align: top;
    position: relative;

    &.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
      padding-bottom: 15px;
    }

    @include when(arrow) {
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;

      .#{$namespace}-time-spinner__list {
        transform: translateY(-32px);
      }

      .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
        background: getCssVar('fill-color', 'light');
        cursor: default;
      }
    }
  }

  @include e(arrow) {
    font-size: 12px;
    color: getCssVar('text-color', 'secondary');
    position: absolute;
    left: 0;
    width: 100%;
    z-index: getCssVar('index-normal');
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;

    &:hover {
      color: getCssVar('color-primary');
    }

    &.arrow-up {
      top: 10px;
    }

    &.arrow-down {
      bottom: 10px;
    }
  }

  @include e(input) {
    &.#{$namespace}-input {
      width: 70%;

      .#{$namespace}-input__inner {
        padding: 0;
        text-align: center;
      }
    }
  }

  @include e(list) {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;

    &::after,
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 80px;
    }
  }

  @include e(item) {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: getCssVar('text-color', 'regular');

    &:hover:not(.is-disabled):not(.is-active) {
      background: getCssVar('fill-color', 'light');
      cursor: pointer;
    }

    &.is-active:not(.is-disabled) {
      color: getCssVar('text-color', 'primary');
      font-weight: bold;
    }

    &.is-disabled {
      color: getCssVar('text-color', 'placeholder');
      cursor: not-allowed;
    }
  }
}


code:
@use '../mixins/mixins' as *;
@use '../common/var' as *;

@include b(year-table) {
  font-size: 12px;
  margin: -1px;
  border-collapse: collapse;

  .#{$namespace}-icon {
    color: getCssVar('datepicker', 'icon-color');
  }

  td {
    width: 68px;
    text-align: center;
    padding: 8px 0px;
    cursor: pointer;
    position: relative;

    @include b(date-table-cell) {
      height: 48px;
      padding: 6px 0;
      box-sizing: border-box;
    }

    &.today {
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color', 'primary');
        font-weight: bold;
      }

      &.start-date .#{$namespace}-date-table-cell__text,
      &.end-date .#{$namespace}-date-table-cell__text {
        color: $color-white;
      }
    }

    &.disabled .#{$namespace}-date-table-cell__text {
      background-color: getCssVar('fill-color', 'light');
      cursor: not-allowed;
      color: getCssVar('text-color', 'placeholder');

      &:hover {
        color: getCssVar('text-color', 'placeholder');
      }
    }

    @include b(date-table-cell__text) {
      width: 60px;
      height: 36px;
      display: block;
      line-height: 36px;
      color: getCssVar('datepicker-text-color');
      border-radius: 18px;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        color: getCssVar('datepicker-hover-text-color');
      }
    }

    &.in-range .#{$namespace}-date-table-cell {
      background-color: getCssVar('datepicker-inrange-bg-color');

      &:hover {
        background-color: getCssVar('datepicker-inrange-hover-bg-color');
      }
    }

    &.start-date .#{$namespace}-date-table-cell,
    &.end-date .#{$namespace}-date-table-cell {
      color: $color-white;
    }

    &.start-date .#{$namespace}-date-table-cell__text,
    &.end-date .#{$namespace}-date-table-cell__text {
      color: $color-white;
      background-color: getCssVar('datepicker-active-color');
    }

    &.start-date .#{$namespace}-date-table-cell {
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
    }

    &.end-date .#{$namespace}-date-table-cell {
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
    }

    &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
      color: $color-white;
      background-color: getCssVar('datepicker-active-color');
    }

    &:focus-visible {
      outline: none;

      .#{$namespace}-date-table-cell__text {
        outline: 2px solid getCssVar('datepicker-active-color');
        outline-offset: 1px;
      }
    }
  }
}


code:
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'common/var' as *;

$descriptions-item-label-margin-right: () !default;
$descriptions-item-label-margin-right: map.merge(
  (
    'large': 16px,
    'default': 16px,
    'small': 12px,
  ),
  $descriptions-item-label-margin-right
);

$descriptions-item-vertical-label-padding-bottom: () !default;
$descriptions-item-vertical-label-padding-bottom: map.merge(
  (
    'large': 8px,
    'default': 6px,
    'small': 4px,
  ),
  $descriptions-item-vertical-label-padding-bottom
);

@include b(descriptions) {
  @include e(label) {
    &.#{$namespace}-descriptions__cell.is-bordered-label {
      font-weight: bold;
      color: getCssVar('text-color', 'regular');
      background: getCssVar('descriptions-item-bordered-label-background');
    }

    &:not(.is-bordered-label) {
      color: getCssVar('text-color', 'primary');
      margin-right: map.get($descriptions-item-label-margin-right, 'default');
    }

    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
      padding-bottom: map.get(
        $descriptions-item-vertical-label-padding-bottom,
        'default'
      );
    }
  }

  @include e(content) {
    &.#{$namespace}-descriptions__cell.is-bordered-content {
      color: getCssVar('text-color', 'primary');
    }

    &:not(.is-bordered-label) {
      color: getCssVar('text-color', 'regular');
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      @include e(label) {
        &:not(.is-bordered-label) {
          margin-right: map.get($descriptions-item-label-margin-right, $size);
        }

        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
          padding-bottom: map.get(
            $descriptions-item-vertical-label-padding-bottom,
            $size
          );
        }
      }
    }
  }
}


code:
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$descriptions-header-margin-bottom: () !default;
$descriptions-header-margin-bottom: map.merge(
  (
    'large': 20px,
    'default': 16px,
    'small': 12px,
  ),
  $descriptions-header-margin-bottom
);

$descriptions-title-font-size: () !default;
$descriptions-title-font-size: map.merge(
  (
    'large': 16px,
    'default': 16px,
    'small': 14px,
  ),
  $descriptions-title-font-size
);

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

$descriptions-bordered-cell-padding: () !default;
$descriptions-bordered-cell-padding: map.merge(
  (
    'large': 12px 15px,
    'default': 8px 11px,
    'small': 4px 7px,
  ),
  $descriptions-bordered-cell-padding
);

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

@include b(descriptions) {
  @include set-component-css-var('descriptions', $descriptions);

  box-sizing: border-box;
  font-size: getCssVar('font-size', 'base');
  color: getCssVar('text-color', 'primary');

  @include e(header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');

    @include e(title) {
      color: getCssVar('text-color', 'primary');
      font-size: map.get($descriptions-title-font-size, 'default');
      font-weight: bold;
    }
  }

  @include e(body) {
    background-color: getCssVar('fill-color', 'blank');

    .#{$namespace}-descriptions__table {
      border-collapse: collapse;
      width: 100%;

      .#{$namespace}-descriptions__cell {
        box-sizing: border-box;
        text-align: left;
        font-weight: normal;
        line-height: 23px;
        font-size: map.get($descriptions-cell-font-size, 'default');

        @include when(left) {
          text-align: left;
        }

        @include when(center) {
          text-align: center;
        }

        @include when(right) {
          text-align: right;
        }
      }

      &.is-bordered {
        .#{$namespace}-descriptions__cell {
          border: getCssVar('descriptions-table-border');
          padding: map.get($descriptions-bordered-cell-padding, 'default');
        }
      }

      &:not(.is-bordered) {
        .#{$namespace}-descriptions__cell {
          padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
        }
      }
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      font-size: map.get($input-font-size, $size);

      @include e(header) {
        margin-bottom: map.get($descriptions-header-margin-bottom, $size);

        @include e(title) {
          font-size: map.get($descriptions-title-font-size, $size);
        }
      }

      @include e(body) {
        .#{$namespace}-descriptions__table {
          .#{$namespace}-descriptions__cell {
            font-size: map.get($descriptions-cell-font-size, $size);
          }

          &.is-bordered {
            .#{$namespace}-descriptions__cell {
              padding: map.get($descriptions-bordered-cell-padding, $size);
            }
          }

          &:not(.is-bordered) {
            .#{$namespace}-descriptions__cell {
              padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
            }
          }
        }
      }
    }
  }
}


code:
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/popup' as *;

@include b(dialog) {
  @include set-component-css-var('dialog', $dialog);

  position: relative;
  margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
  background: getCssVar('dialog', 'bg-color');
  border-radius: getCssVar('dialog', 'border-radius');
  box-shadow: getCssVar('dialog', 'box-shadow');
  box-sizing: border-box;
  padding: getCssVar('dialog', 'padding-primary');
  width: var(#{getCssVarName('dialog-width')}, 50%);
  overflow-wrap: break-word;

  &:focus {
    outline: none !important;
  }

  @include when(align-center) {
    margin: auto;
  }

  @include when(fullscreen) {
    @include set-css-var-value('dialog-width', 100%);
    @include set-css-var-value('dialog-margin-top', 0);

    margin-bottom: 0;
    height: 100%;
    overflow: auto;
  }

  @include e(wrapper) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
  }

  @include when(draggable) {
    @include e(header) {
      cursor: move;
      user-select: none;
    }
  }

  @include e(header) {
    padding-bottom: getCssVar('dialog', 'padding-primary');

    &.show-close {
      padding-right: calc(
        getCssVar('dialog', 'padding-primary') +
          var(
            #{getCssVarName('message-close-size')},
            map.get($message, 'close-size')
          )
      );
    }
  }

  @include e(headerbtn) {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: var(
      #{getCssVarName('message-close-size')},
      map.get($message, 'close-size')
    );

    .#{$namespace}-dialog__close {
      color: getCssVar('color', 'info');
      font-size: inherit;
    }

    &:focus,
    &:hover {
      .#{$namespace}-dialog__close {
        color: getCssVar('color', 'primary');
      }
    }
  }

  @include e(title) {
    line-height: getCssVar('dialog-font-line-height');
    font-size: getCssVar('dialog-title-font-size');
    color: getCssVar('text-color', 'primary');
  }

  @include e(body) {
    color: getCssVar('text-color', 'regular');
    font-size: getCssVar('dialog-content-font-size');
  }

  @include e(footer) {
    padding-top: getCssVar('dialog', 'padding-primary');
    text-align: right;
    box-sizing: border-box;
  }

  // 内容居中布局
  @include m(center) {
    text-align: center;

    @include e(body) {
      text-align: initial;
    }

    @include e(footer) {
      text-align: inherit;
    }
  }
}

.#{$namespace}-overlay-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.dialog-fade-enter-active {
  animation: modal-fade-in getCssVar('transition-duration');
  .#{$namespace}-overlay-dialog {
    animation: dialog-fade-in getCssVar('transition-duration');
  }
}

.dialog-fade-leave-active {
  animation: modal-fade-out getCssVar('transition-duration');
  .#{$namespace}-overlay-dialog {
    animation: dialog-fade-out getCssVar('transition-duration');
  }
}

@keyframes dialog-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

@keyframes modal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes modal-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


code:
@use 'common/var' as *;
@use 'mixins/mixins' as *;

.hidden {
  @each $break-point-name, $value in $breakpoints-spec {
    &-#{$break-point-name} {
      @include res($break-point-name, $breakpoints-spec) {
        display: none !important;
      }
    }
  }
}


code:
@use 'common/var' as *;
@use 'mixins/mixins' as *;

@include b(divider) {
  position: relative;

  @include m(horizontal) {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    border-top: 1px getCssVar('border-color') getCssVar('border-style');
  }

  @include m(vertical) {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    border-left: 1px getCssVar('border-color') getCssVar('border-style');
  }

  @include e(text) {
    position: absolute;
    background-color: getCssVar('bg-color');
    padding: 0 20px;
    font-weight: 500;
    color: getCssVar('text-color', 'primary');
    font-size: 14px;

    @include when(left) {
      left: 20px;
      transform: translateY(-50%);
    }

    @include when(center) {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    @include when(right) {
      right: 20px;
      transform: translateY(-50%);
    }
  }
}


code:
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$directions: rtl, ltr, ttb, btt;

@include b(drawer) {
  @include set-component-css-var('drawer', $drawer);
}

@include b(drawer) {
  position: absolute;
  box-sizing: border-box;
  background-color: getCssVar('drawer', 'bg-color');
  display: flex;
  flex-direction: column;
  box-shadow: getCssVar('box-shadow', 'dark');
  overflow: hidden;

  transition: all getCssVar('transition-duration');

  @each $direction in $directions {
    .#{$direction} {
      transform: translate(0, 0);
    }
  }

  &__sr-focus:focus {
    outline: none !important;
  }

  &__header {
    align-items: center;
    color: rgb(114, 118, 123);
    display: flex;
    margin-bottom: 32px;
    padding: getCssVar('drawer-padding-primary');
    padding-bottom: 0;
    & > :first-child {
      flex: 1;
    }
  }

  &__title {
    margin: 0;
    flex: 1;
    line-height: inherit;
    font-size: 16px;
  }

  @include e(footer) {
    padding: getCssVar('drawer-padding-primary');
    padding-top: 10px;
    text-align: right;
  }

  &__close-btn {
    display: inline-flex;
    border: none;
    cursor: pointer;
    font-size: getCssVar('font-size-extra-large');
    color: inherit;
    background-color: transparent;
    outline: none;
    &:focus,
    &:hover {
      i {
        color: getCssVar('color-primary');
      }
    }
  }

  &__body {
    flex: 1;
    padding: getCssVar('drawer-padding-primary');
    overflow: auto;
    & > * {
      box-sizing: border-box;
    }
  }

  &.ltr,
  &.rtl {
    height: 100%;
    top: 0;
    bottom: 0;
  }

  &.ttb,
  &.btt {
    width: 100%;
    left: 0;
    right: 0;
  }

  &.ltr {
    left: 0;
  }

  &.rtl {
    right: 0;
  }

  &.ttb {
    top: 0;
  }

  &.btt {
    bottom: 0;
  }
}

.#{$namespace}-drawer-fade {
  &-enter-active,
  &-leave-active {
    transition: all getCssVar('transition-duration');
  }

  &-enter-from,
  &-enter-active,
  &-enter-to,
  &-leave-from,
  &-leave-active,
  &-leave-to {
    overflow: hidden !important;
  }

  &-enter-from,
  &-leave-to {
    background-color: transparent !important;
  }

  &-enter-from,
  &-leave-to {
    @each $direction in $directions {
      .#{$direction} {
        @if $direction == ltr {
          transform: translateX(-100%);
        }

        @if $direction == rtl {
          transform: translateX(100%);
        }

        @if $direction == ttb {
          transform: translateY(-100%);
        }

        @if $direction == btt {
          transform: translateY(100%);
        }
      }
    }
  }
}