code:
@use 'sass:map';

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

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

$dropdown-item-padding: () !default;
$dropdown-item-padding: map.merge(
  (
    'large': 7px 20px,
    'default': 5px 16px,
    'small': 2px 12px,
  ),
  $dropdown-item-padding
);

$dropdown-item-divided-margin: () !default;
$dropdown-item-divided-margin: map.merge(
  (
    'large': 8px 0,
    'default': 6px 0,
    'small': 4px 0,
  ),
  $dropdown-item-divided-margin
);

$dropdown-caret-width: () !default;
$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);

$dropdown-divider-width: 1px !default;

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

  display: inline-flex;
  position: relative;
  color: getCssVar('text-color', 'regular');
  font-size: getCssVar('font-size', 'base');
  line-height: 1;
  vertical-align: top;

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

  @include e(popper) {
    @include set-component-css-var('dropdown', $dropdown);

    // using attributes selector to override

    @include picker-popper(
      getCssVar('bg-color', 'overlay'),
      1px solid getCssVar('border-color-light'),
      getCssVar('dropdown-menu-box-shadow')
    );

    .#{$namespace}-dropdown-menu {
      border: none;
    }

    #{& + '-selfdefine'} {
      outline: none;
    }

    @include b(scrollbar__bar) {
      z-index: calc(#{getCssVar('dropdown', 'menu-index')} + 1);
    }

    @include b(dropdown__list) {
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  }

  & .#{$namespace}-dropdown__caret-button {
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: map.get($dropdown-caret-width, 'default');
    border-left: none;

    > span {
      display: inline-flex;
    }

    &::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      top: -1px;
      bottom: -1px;
      left: 0;
      background: getCssVar('overlay-color', 'lighter');
    }

    &.#{$namespace}-button::before {
      background: getCssVar('border-color');
      opacity: 0.5;
    }

    & .#{$namespace}-dropdown__icon {
      font-size: inherit;
      padding-left: 0;
    }
  }

  .#{$namespace}-dropdown-selfdefine {
    // 自定义
    outline: none;
  }

  @each $size in (large, small) {
    @include m($size) {
      .#{$namespace}-dropdown__caret-button {
        width: map.get($dropdown-caret-width, $size);
      }
    }
  }
}

$dropdown-menu-padding-vertical: () !default;
$dropdown-menu-padding-vertical: map.merge(
  (
    'large': 8px,
    'default': 6px,
    'small': 4px,
  ),
  $dropdown-menu-padding-vertical
);

@include b(dropdown-menu) {
  position: relative;
  top: 0;
  left: 0;
  z-index: getCssVar('dropdown-menu-index');
  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
  margin: 0;
  background-color: getCssVar('bg-color', 'overlay');
  border: none;
  border-radius: getCssVar('border-radius-base');
  box-shadow: none;
  list-style: none;

  @include e(item) {
    display: flex;
    align-items: center;
    white-space: nowrap;
    list-style: none;
    line-height: map.get($dropdown-item-line-height, 'default');
    padding: map.get($dropdown-item-padding, 'default');
    margin: 0;
    font-size: getCssVar('font-size', 'base');
    color: getCssVar('text-color', 'regular');
    cursor: pointer;
    outline: none;
    &:not(.is-disabled):hover,
    &:not(.is-disabled):focus {
      background-color: getCssVar('dropdown-menuItem-hover-fill');
      color: getCssVar('dropdown-menuItem-hover-color');
    }

    i {
      margin-right: 5px;
    }

    @include m(divided) {
      margin: map.get($dropdown-item-divided-margin, 'default');
      border-top: 1px solid getCssVar('border-color-lighter');
    }

    @include when(disabled) {
      cursor: not-allowed;
      color: getCssVar('text-color-disabled');
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;

      @include e(item) {
        padding: map.get($dropdown-item-padding, $size);
        line-height: map.get($dropdown-item-line-height, $size);
        font-size: map.get($input-font-size, $size);

        @include m(divided) {
          margin: map.get($dropdown-item-divided-margin, $size);
        }
      }
    }
  }
}


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

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

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: getCssVar('empty-padding');

  @include e(image) {
    width: getCssVar('empty-image-width');

    img {
      user-select: none;
      width: 100%;
      height: 100%;
      vertical-align: top;
      object-fit: contain;
    }

    svg {
      color: getCssVar('svg-monochrome-grey');
      fill: currentColor;
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }

  @include e(description) {
    margin-top: getCssVar('empty-description-margin-top');

    p {
      margin: 0;
      font-size: getCssVar('font-size', 'base');
      color: getCssVar('text-color', 'secondary');
    }
  }

  @include e(bottom) {
    margin-top: getCssVar('empty-bottom-margin-top');
  }
}

license: mit


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

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

  padding: getCssVar('footer-padding');
  box-sizing: border-box;
  flex-shrink: 0;
  height: getCssVar('footer-height');
}


code:
@use 'sass:map';

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

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

$form-item-line-height: () !default;
$form-item-line-height: map.merge(
  (
    'large': 40px,
    'default': 32px,
    'small': 24px,
  ),
  $form-item-line-height
);

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

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

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

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

  @include m(inline) {
    .#{$namespace}-form-item {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 32px;
    }

    &.#{$namespace}-form--label-top {
      display: flex;
      flex-wrap: wrap;

      .#{$namespace}-form-item {
        display: block;
      }
    }
  }
}

@include b(form-item) {
  display: flex;
  --font-size: #{map.get($input-font-size, 'default')};
  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};

  .#{$namespace}-form-item {
    margin-bottom: 0;
  }

  .#{$namespace}-input__validateIcon {
    display: none;
  }

  @each $size in (large, default, small) {
    @include m($size) {
      --font-size: #{map.get($input-font-size, $size)};
      @include set-css-var-value(('form', 'label-font-size'), var(--font-size));

      margin-bottom: #{map.get($form-item-margin-bottom, $size)};

      @include e(label) {
        height: #{map.get($form-item-line-height, $size)};
        line-height: #{map.get($form-item-line-height, $size)};
      }

      @include e(content) {
        line-height: #{map.get($form-item-line-height, $size)};
      }

      @include e(error) {
        padding-top: #{map.get($form-item-error-padding-top, $size)};
      }
    }
  }

  @include m(label-left) {
    .#{$namespace}-form-item__label {
      justify-content: flex-start;
    }
  }

  @include m(label-top) {
    display: block;

    .#{$namespace}-form-item__label {
      display: inline-block;
      vertical-align: middle;
      height: auto;
      text-align: left;
      margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
      line-height: #{map.get($form-item-label-top-line-height, 'default')};
    }
  }

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

  @include e(label) {
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;

    flex: 0 0 auto;
    font-size: getCssVar('form-label-font-size');
    color: getCssVar('text-color', 'regular');

    height: #{map.get($form-item-line-height, 'default')};
    line-height: #{map.get($form-item-line-height, 'default')};

    padding: 0 12px 0 0;
    box-sizing: border-box;
  }

  @include e(content) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    line-height: #{map.get($form-item-line-height, 'default')};
    position: relative;
    font-size: var(--font-size);
    min-width: 0;

    .#{$namespace}-input-group {
      vertical-align: top;
    }
  }

  @include e(error) {
    color: getCssVar('color-danger');
    font-size: 12px;
    line-height: 1;
    padding-top: #{map.get($form-item-error-padding-top, 'default')};
    position: absolute;
    top: 100%;
    left: 0;

    @include m(inline) {
      position: relative;
      top: auto;
      left: auto;
      display: inline-block;
      margin-left: 10px;
    }
  }

  @include when(required) {
    @include pseudo('not(.is-no-asterisk)') {
      &.asterisk-left {
        > .#{$namespace}-form-item__label:before,
        > .#{$namespace}-form-item__label-wrap
          > .#{$namespace}-form-item__label:before {
          content: '*';
          color: getCssVar('color-danger');
          margin-right: 4px;
        }
      }

      &.asterisk-right {
        > .#{$namespace}-form-item__label:after,
        > .#{$namespace}-form-item__label-wrap
          > .#{$namespace}-form-item__label:after {
          content: '*';
          color: getCssVar('color-danger');
          margin-left: 4px;
        }
      }
    }
  }

  @include when(error) {
    .#{$namespace}-input__wrapper,
    .#{$namespace}-textarea__inner,
    .#{$namespace}-select__wrapper {
      &,
      &:hover,
      &:focus,
      &.is-focus {
        box-shadow: 0 0 0 1px getCssVar('color-danger') inset;
      }
    }

    .#{$namespace}-input-group__append,
    .#{$namespace}-input-group__prepend {
      .#{$namespace}-input__wrapper {
        box-shadow: 0 0 0 1px transparent inset;
      }

      .#{$namespace}-input__validateIcon {
        display: none;
      }
    }

    .#{$namespace}-input__validateIcon {
      color: getCssVar('color-danger');
    }
  }

  @include m(feedback) {
    .#{$namespace}-input__validateIcon {
      display: inline-flex;
    }
  }
}


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

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

  padding: getCssVar('header-padding');
  box-sizing: border-box;
  flex-shrink: 0;
  height: getCssVar('header-height');
}


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

.#{$namespace}-icon-loading {
  animation: rotating 2s linear infinite;
}

.#{$namespace}-icon--right {
  margin-left: 5px;
}
.#{$namespace}-icon--left {
  margin-right: 5px;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@include b(icon) {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;

  @include when(loading) {
    animation: rotating 2s linear infinite;
  }

  svg {
    height: 1em;
    width: 1em;
  }
}


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

@mixin op-icon() {
  width: 44px;
  height: 44px;
  font-size: 24px;
  color: #fff;
  background-color: getCssVar('text-color', 'regular');
  border-color: #fff;
}

@include b(image-viewer) {
  @include e(wrapper) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  @include e(btn) {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.8;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;

    .#{$namespace}-icon {
      font-size: inherit;
      cursor: pointer;
    }
  }

  @include e(close) {
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
  }

  @include e(canvas) {
    position: static;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }

  @include e(actions) {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 282px;
    height: 44px;
    padding: 0 23px;
    background-color: getCssVar('text-color', 'regular');
    border-color: #fff;
    border-radius: 22px;

    @include e(actions__inner) {
      width: 100%;
      height: 100%;
      cursor: default;
      font-size: 23px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  @include e(prev) {
    top: 50%;
    transform: translateY(-50%);
    left: 40px;
    @include op-icon();
  }

  @include e(next) {
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    text-indent: 2px;
    @include op-icon();
  }

  @include e(close) {
    @include op-icon();
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: #000;
  }
}

.viewer-fade-enter-active {
  animation: viewer-fade-in getCssVar('transition-duration');
}

.viewer-fade-leave-active {
  animation: viewer-fade-out getCssVar('transition-duration');
}

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

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


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

%size {
  width: 100%;
  height: 100%;
}

@include b(image) {
  position: relative;
  display: inline-block;
  overflow: hidden;

  @include e(inner) {
    @extend %size !optional;
    vertical-align: top;
    opacity: 1;
    @include when(loading) {
      opacity: 0;
    }
  }

  @include e(wrapper) {
    @extend %size !optional;
    position: absolute;
    top: 0;
    left: 0;
  }

  @include e(placeholder) {
    @extend %size !optional;
    background: getCssVar('fill-color', 'light');
  }

  @include e(error) {
    @extend %size !optional;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: getCssVar('fill-color', 'light');
    color: getCssVar('text-color', 'placeholder');
    vertical-align: middle;
  }

  @include e(preview) {
    cursor: pointer;
  }
}


code:
@use './base.scss';
// component styles
@use './affix.scss';
@use './alert.scss';
@use './aside.scss';
@use './autocomplete.scss';
@use './avatar.scss';
@use './backtop.scss';
@use './badge.scss';
@use './breadcrumb-item.scss';
@use './breadcrumb.scss';
@use './button-group.scss';
@use './button.scss';
@use './calendar.scss';
@use './card.scss';
@use './carousel-item.scss';
@use './carousel.scss';
@use './cascader-panel.scss';
@use './cascader.scss';
@use './check-tag.scss';
@use './checkbox-button.scss';
@use './checkbox-group.scss';
@use './checkbox.scss';
@use './col.scss';
@use './collapse-item.scss';
@use './collapse.scss';
@use './color-picker.scss';
@use './config-provider.scss';
@use './container.scss';
@use './date-picker.scss';
@use './descriptions';
@use './descriptions-item';
@use './dialog.scss';
@use './divider.scss';
@use './drawer.scss';
@use './dropdown-item.scss';
@use './dropdown-menu.scss';
@use './dropdown.scss';
@use './empty.scss';
@use './footer.scss';
@use './form-item.scss';
@use './form.scss';
@use './header.scss';
@use './image-viewer.scss';
@use './image.scss';
@use './infinite-scroll.scss';
@use './input.scss';
@use './input-number.scss';
@use './link.scss';
@use './loading.scss';
@use './main.scss';
@use './menu-item-group.scss';
@use './menu-item.scss';
@use './menu.scss';
@use './message-box.scss';
@use './message.scss';
@use './notification.scss';
@use './overlay.scss';
@use './page-header.scss';
@use './pagination.scss';
@use './popconfirm.scss';
@use './popover.scss';
@use './progress.scss';
@use './radio-button.scss';
@use './radio-group.scss';
@use './radio.scss';
@use './rate.scss';
@use './result.scss';
@use './row.scss';
@use './scrollbar.scss';
@use './select-v2.scss';
@use './select.scss';
@use './skeleton-item.scss';
@use './skeleton.scss';
@use './slider.scss';
@use './space.scss';
@use './spinner.scss';
@use './step.scss';
@use './steps.scss';
@use './sub-menu.scss';
@use './switch.scss';
@use './tab-pane.scss';
@use './table-column.scss';
@use './table.scss';
@use './table-v2.scss';
@use './tabs.scss';
@use './tag.scss';
@use './text.scss';
@use './time-picker.scss';
@use './time-select.scss';
@use './timeline-item.scss';
@use './timeline.scss';
@use './tooltip.scss';
@use './tooltip-v2.scss';
@use './transfer.scss';
@use './tree.scss';
@use './tree-select.scss';
@use './upload.scss';
@use './virtual-list.scss';
@use './popper.scss';
@use './select-dropdown-v2.scss';
@use './select-dropdown.scss';
@use './option.scss';
@use './option-group.scss';
@use './statistic.scss';
@use './tour.scss';
@use './anchor.scss';
@use './anchor-link.scss';
@use './segmented.scss';
@use './mention.scss';


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

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

@include b(input-number) {
  position: relative;
  display: inline-flex;
  width: map.get($input-number-width, 'default');
  line-height: #{map.get($input-height, 'default') - 2};
  vertical-align: middle;

  .#{$namespace}-input {
    &__wrapper {
      padding-left: #{map.get($input-height, 'default') + 10};
      padding-right: #{map.get($input-height, 'default') + 10};
    }

    &__inner {
      -webkit-appearance: none;
      -moz-appearance: textfield;
      text-align: center;
      line-height: 1;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
      }
    }
  }

  @include e((increase, decrease)) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;

    position: absolute;
    z-index: 1;
    top: 1px;
    bottom: 1px;

    width: map.get($input-height, 'default');
    background: getCssVar('fill-color', 'light');
    color: getCssVar('text-color', 'regular');
    cursor: pointer;
    font-size: 13px;
    user-select: none;

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

      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
        box-shadow: 0 0 0 1px
          var(
            #{getCssVarName('input', 'focus-border-color')},
            map.get($input, 'focus-border-color')
          )
          inset;
      }
    }

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

  @include e(increase) {
    right: 1px;
    border-radius: 0 getCssVar('border-radius-base')
      getCssVar('border-radius-base') 0;
    border-left: getCssVar('border');
  }

  @include e(decrease) {
    left: 1px;
    border-radius: getCssVar('border-radius-base') 0 0
      getCssVar('border-radius-base');
    border-right: getCssVar('border');
  }

  @include when(disabled) {
    @include e((increase, decrease)) {
      border-color: getCssVar('disabled-border-color');
      color: getCssVar('disabled-border-color');

      &:hover {
        color: getCssVar('disabled-border-color');
        cursor: not-allowed;
      }
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      width: map.get($input-number-width, $size);
      line-height: #{map.get($input-height, $size) - 2};

      @include e((increase, decrease)) {
        width: map.get($input-height, $size);
        font-size: map.get($input-font-size, $size);
      }

      .#{$namespace}-input--#{$size} {
        .#{$namespace}-input__wrapper {
          padding-left: #{map.get($input-height, $size) + 7};
          padding-right: #{map.get($input-height, $size) + 7};
        }
      }
    }
  }

  @include m(small) {
    @include e((increase, decrease)) {
      [class*='#{$namespace}-icon'] {
        transform: scale(0.9);
      }
    }
  }

  @include when(without-controls) {
    .#{$namespace}-input__wrapper {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  @include when(controls-right) {
    .#{$namespace}-input__wrapper {
      padding-left: 15px;
      padding-right: #{map.get($input-height, 'default') + 10};
    }

    @include e((increase, decrease)) {
      @include set-css-var-value(
        ('input', 'number-controls-height'),
        math.div(map.get($input-height, 'default') - 2, 2)
      );

      height: getCssVar('input-number-controls-height');
      line-height: getCssVar('input-number-controls-height');

      [class*='#{$namespace}-icon'] {
        transform: scale(0.8);
      }
    }

    @include e(increase) {
      bottom: auto;
      left: auto;
      border-radius: 0 getCssVar('border-radius-base') 0 0;
      border-bottom: getCssVar('border');
    }

    @include e(decrease) {
      right: 1px;
      top: auto;
      left: auto;
      border-right: none;
      border-left: getCssVar('border');
      border-radius: 0 0 getCssVar('border-radius-base') 0;
    }

    @each $size in (large, small) {
      &[class*='#{$size}'] {
        [class*='increase'],
        [class*='decrease'] {
          @include set-css-var-value(
            ('input', 'number-controls-height'),
            math.div(map.get($input-height, $size) - 2, 2)
          );
        }
      }
    }
  }
}


code:
@use 'sass:map';

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

@mixin inset-prepend-border($color) {
  box-shadow: 1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
    0 -1px 0 0 $color inset;
}

@mixin inset-append-border($color) {
  box-shadow: 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset,
    -1px 0 0 0 $color inset;
}

@mixin inset-prepend-input-border($color) {
  box-shadow: 1px 0 0 0 $color inset, 1px 0 0 0 $color, 0 1px 0 0 $color inset,
    0 -1px 0 0 $color inset !important;
}

@mixin inset-append-input-border($color) {
  box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
    0 -1px 0 0 $color inset !important;
}

@mixin mixed-input-border($color) {
  box-shadow: 0 0 0 1px $color inset;
}

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

@include b(textarea) {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: getCssVar('font-size', 'base');

  @include e(inner) {
    position: relative;
    display: block;
    resize: vertical;
    padding: 5px map.get($input-padding-horizontal, 'default')-$border-width;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    color: var(
      #{getCssVarName('input-text-color')},
      map.get($input, 'text-color')
    );
    background-color: var(
      #{getCssVarName('input-bg-color')},
      map.get($input, 'bg-color')
    );
    background-image: none;
    -webkit-appearance: none;
    @include inset-input-border(
      var(
        #{getCssVarName('input-border-color')},
        map.get($input, 'border-color')
      )
    );
    border-radius: getCssVarWithDefault(
      'input-border-radius',
      map.get($input, 'border-radius')
    );
    transition: getCssVar('transition-box-shadow');
    border: none;

    &::placeholder {
      color: getCssVarWithDefault(
        'input-placeholder-color',
        map.get($input, 'placeholder-color')
      );
    }

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

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

  & .#{$namespace}-input__count {
    color: getCssVar('color-info');
    background: getCssVar('fill-color', 'blank');
    position: absolute;
    font-size: 12px;
    line-height: 14px;
    bottom: 5px;
    right: 10px;
  }

  @include when(disabled) {
    .#{$namespace}-textarea__inner {
      @include inset-input-border(#{getCssVar('disabled-border-color')});
      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');
      }
    }
  }

  @include when(exceed) {
    .#{$namespace}-textarea__inner {
      @include mixed-input-border(#{getCssVar('color-danger')});
    }

    .#{$namespace}-input__count {
      color: getCssVar('color-danger');
    }
  }
}

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

@include b(input) {
  @include css-var-from-global('input-height', 'component-size');

  position: relative;
  font-size: getCssVar('font-size', 'base');
  display: inline-flex;
  width: getCssVar('input-width');
  line-height: getCssVar('input-height');
  box-sizing: border-box;
  vertical-align: middle;
  @include scroll-bar;

  & .#{$namespace}-input__clear,
  & .#{$namespace}-input__password {
    color: getCssVar('input-icon-color');
    font-size: map.get($input-font-size, 'default');
    cursor: pointer;

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

  & .#{$namespace}-input__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: getCssVar('color-info');
    font-size: 12px;

    .#{$namespace}-input__count-inner {
      background: getCssVar('fill-color', 'blank');
      line-height: initial;
      display: inline-block;
      padding-left: 8px;
    }
  }

  @include e(wrapper) {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width;
    background-color: var(
      #{getCssVarName('input-bg-color')},
      map.get($input, 'bg-color')
    );
    background-image: none;
    border-radius: getCssVarWithDefault(
      'input-border-radius',
      map.get($input, 'border-radius')
    );
    cursor: text;
    transition: getCssVar('transition-box-shadow');
    transform: translate3d(0, 0, 0);
    @include inset-input-border(
      var(
        #{getCssVarName('input-border-color')},
        map.get($input, 'border-color')
      )
    );

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

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

  @include e(inner) {
    // use map.get as default value for date picker range
    @include set-css-var-value(
      'input-inner-height',
      calc(
        var(
            #{getCssVarName('input-height')},
            #{map.get($input-height, 'default')}
          ) - $border-width * 2
      )
    );

    width: 100%;
    flex-grow: 1;
    -webkit-appearance: none;
    color: var(
      #{getCssVarName('input-text-color')},
      map.get($input, 'text-color')
    );
    font-size: inherit;
    height: getCssVar('input-inner-height');
    line-height: getCssVar('input-inner-height');
    padding: 0;
    outline: none;
    border: none;
    background: none;
    box-sizing: border-box;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: getCssVarWithDefault(
        'input-placeholder-color',
        map.get($input, 'placeholder-color')
      );
    }

    // override edge default style
    &[type='password']::-ms-reveal {
      display: none;
    }

    &[type='number'] {
      line-height: 1;
    }
  }

  @each $slot in (prefix, suffix) {
    @include e($slot) {
      display: inline-flex;
      white-space: nowrap;
      flex-shrink: 0;
      flex-wrap: nowrap;
      height: 100%;
      text-align: center;
      color: var(
        #{getCssVarName('input-icon-color')},
        map.get($input, 'icon-color')
      );
      transition: all getCssVar('transition-duration');
      pointer-events: none;
    }

    @include e(#{$slot}-inner) {
      pointer-events: all;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      @if $slot == prefix {
        > :last-child {
          margin-right: 8px;
        }

        > :first-child {
          &,
          &.#{$namespace}-input__icon {
            margin-left: 0;
          }
        }
      } @else {
        > :first-child {
          margin-left: 8px;
        }
      }
    }
  }

  & .#{$namespace}-input__icon {
    height: inherit;
    line-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all getCssVar('transition-duration');
    margin-left: 8px;
  }

  @include e(validateIcon) {
    pointer-events: none;
  }

  @include when(active) {
    .#{$namespace}-input__wrapper {
      @include mixed-input-border(
        var(
          #{getCssVarName('input-focus-color')},
          map.get($input, 'focus-color')
        )
      );
    }
  }

  @include when(disabled) {
    cursor: not-allowed;

    .#{$namespace}-input__wrapper {
      background-color: map.get($input-disabled, 'fill');
      @include mixed-input-border(map.get($input-disabled, 'border'));
    }

    .#{$namespace}-input__inner {
      color: map.get($input-disabled, 'text-color');
      -webkit-text-fill-color: map.get($input-disabled, 'text-color');
      cursor: not-allowed;

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

    .#{$namespace}-input__icon {
      cursor: not-allowed;
    }
  }

  @include when(exceed) {
    .#{$namespace}-input__wrapper {
      @include mixed-input-border(#{getCssVar('color-danger')});
    }

    .#{$namespace}-input__suffix {
      .#{$namespace}-input__count {
        color: getCssVar('color-danger');
      }
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      @include css-var-from-global('input-height', ('component-size', $size));

      font-size: map.get($input-font-size, $size);

      @include e(wrapper) {
        padding: $border-width map.get($input-padding-horizontal, $size)-$border-width;
      }

      @include e(inner) {
        @include set-css-var-value(
          'input-inner-height',
          calc(
            var(
                #{getCssVarName('input-height')},
                #{map.get($input-height, $size)}
              ) - $border-width * 2
          )
        );
      }
    }
  }
}

@include b(input-group) {
  display: inline-flex;
  width: 100%;
  align-items: stretch;

  @include e((append, prepend)) {
    background-color: getCssVar('fill-color', 'light');
    color: getCssVar('color-info');
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    border-radius: getCssVar('input-border-radius');
    padding: 0 20px;
    white-space: nowrap;

    &:focus {
      outline: none;
    }

    .#{$namespace}-select,
    .#{$namespace}-button {
      display: inline-block;
      margin: 0 -20px;
    }

    button.#{$namespace}-button,
    button.#{$namespace}-button:hover,
    div.#{$namespace}-select .#{$namespace}-select__wrapper,
    div.#{$namespace}-select:hover .#{$namespace}-select__wrapper {
      border-color: transparent;
      background-color: transparent;
      color: inherit;
    }

    .#{$namespace}-button,
    .#{$namespace}-input {
      font-size: inherit;
    }
  }

  @include e(prepend) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    @include inset-prepend-border(#{getCssVar('input-border-color')});
  }

  @include e(append) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    @include inset-append-border(#{getCssVar('input-border-color')});
  }

  @include m(prepend) {
    > .#{$namespace}-input__wrapper {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    @include e(prepend) {
      .#{$namespace}-select {
        .#{$namespace}-select__wrapper {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          @include inset-prepend-border(#{getCssVar('input-border-color')});
        }
      }
    }
  }

  @include m(append) {
    > .#{$namespace}-input__wrapper {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    @include e(append) {
      .#{$namespace}-select {
        .#{$namespace}-select__wrapper {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          @include inset-append-border(#{getCssVar('input-border-color')});
        }
      }
    }
  }
}

@include b(input-hidden) {
  display: none !important;
}


code:
@use 'sass:map';

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

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

@include b(link) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: getCssVar('link', 'font-size');
  font-weight: getCssVar('link', 'font-weight');

  color: getCssVar('link', 'text-color');

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

  @include when(underline) {
    &:hover:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid getCssVar('link', 'hover-text-color');
    }
  }

  @include when(disabled) {
    color: getCssVar('link', 'disabled-text-color');
    cursor: not-allowed;
  }

  & [class*='#{$namespace}-icon-'] {
    & + span {
      margin-left: 5px;
    }
  }

  &.#{$namespace}-link--default {
    &:after {
      border-color: getCssVar('link', 'hover-text-color');
    }
  }

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

  @each $type in $types {
    &.#{$namespace}-link--#{$type} {
      @include css-var-from-global(('link', 'text-color'), ('color', $type));
      @include css-var-from-global(
        ('link', 'hover-text-color'),
        ('color', $type, 'light-3')
      );
      @include css-var-from-global(
        ('link', 'disabled-text-color'),
        ('color', $type, 'light-5')
      );

      &:after {
        border-color: getCssVar('link', 'text-color');
      }

      @include when(underline) {
        &:hover:after {
          border-color: getCssVar('link', 'text-color');
        }
      }
    }
  }
}


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

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

@include b(loading-parent) {
  @include m(relative) {
    position: relative !important;
  }

  @include m(hidden) {
    overflow: hidden !important;
  }
}

@include b(loading-mask) {
  position: absolute;
  z-index: 2000;
  background-color: getCssVar('mask-color');
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity getCssVar('transition-duration');

  @include when(fullscreen) {
    position: fixed;

    .#{$namespace}-loading-spinner {
      margin-top: calc(
        (0px - getCssVar('loading-fullscreen-spinner-size')) / 2
      );

      .circular {
        height: getCssVar('loading-fullscreen-spinner-size');
        width: getCssVar('loading-fullscreen-spinner-size');
      }
    }
  }
}

@include b(loading-spinner) {
  top: 50%;
  margin-top: calc((0px - getCssVar('loading-spinner-size')) / 2);
  width: 100%;
  text-align: center;
  position: absolute;

  .#{$namespace}-loading-text {
    color: getCssVar('color-primary');
    margin: 3px 0;
    font-size: 14px;
  }

  .circular {
    display: inline;
    height: getCssVar('loading-spinner-size');
    width: getCssVar('loading-spinner-size');
    animation: loading-rotate 2s linear infinite;
  }

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: getCssVar('color-primary');
    stroke-linecap: round;
  }

  i {
    color: getCssVar('color-primary');
  }
}

.#{$namespace}-loading-fade-enter-from,
.#{$namespace}-loading-fade-leave-to {
  opacity: 0;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}


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

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

  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: getCssVar('main-padding');
}


code:
@use 'sass:map';

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

@include b(mention) {
  position: relative;
  width: 100%;

  @include e(popper) {
    @include picker-popper(
      map.get($mention, 'bg-color'),
      map.get($mention, 'border'),
      map.get($mention, 'shadow')
    );
  }
}

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

  @include e(item) {
    font-size: getCssVar('mention-font-size');
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: getCssVar('mention-option-color');
    height: getCssVar('mention-option-height');
    line-height: getCssVar('mention-option-height');
    box-sizing: border-box;
    min-width: getCssVar('mention-option-min-width');
    cursor: pointer;

    @include when(hovering) {
      background-color: getCssVar('mention-option-hover-background');
    }

    @include when(selected) {
      color: getCssVar('mention-option-selected-color');
      font-weight: bold;
    }

    @include when(disabled) {
      color: getCssVar('mention-option-disabled-color');
      cursor: not-allowed;
      background-color: unset;
    }
  }
}

@include b(mention-dropdown) {
  z-index: calc(#{getCssVar('index-top')} + 1);
  border-radius: getCssVar('border-radius-base');
  box-sizing: border-box;
}

@include b(mention-dropdown__loading) {
  padding: 10px 0;
  margin: 0;
  text-align: center;
  color: getCssVar('mention-option-loading-color');
  font-size: 12px;
  min-width: getCssVar('mention-option-min-width');
}

@include b(mention-dropdown__wrap) {
  max-height: getCssVar('mention-max-height');
}

@include b(mention-dropdown__list) {
  list-style: none;
  padding: getCssVar('mention-padding');
  margin: 0;
  box-sizing: border-box;
}

@include b(mention-dropdown__header) {
  padding: getCssVar('mention-header-padding');
  border-bottom: getCssVar('mention-border');
}

@include b(mention-dropdown__footer) {
  padding: getCssVar('mention-footer-padding');
  border-top: getCssVar('mention-border');
}


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

@mixin menu-item {
  display: flex;
  align-items: center;
  height: getCssVar('menu-item-height');
  line-height: getCssVar('menu-item-height');
  font-size: getCssVar('menu-item-font-size');
  color: getCssVar('menu-text-color');
  padding: 0 getCssVar('menu-base-level-padding');
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color getCssVar('transition-duration'),
    background-color getCssVar('transition-duration'),
    color getCssVar('transition-duration');
  box-sizing: border-box;
  white-space: nowrap;

  * {
    vertical-align: bottom;
  }

  i {
    color: inherit;
  }

  &:hover,
  &:focus {
    outline: none;
  }

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

  @include when(disabled) {
    opacity: 0.25;
    cursor: not-allowed;
    background: none !important;
  }
}

:root {
  // They are defined on :root so they can be inherited by sub-menu instead of overwritten
  @include set-component-css-var('menu', $menu);
}

@include b(menu) {
  border-right: solid 1px getCssVar('menu-border-color');
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: getCssVar('menu-bg-color');
  box-sizing: border-box;

  @include m(vertical) {
    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
      & .#{$namespace}-menu-item,
      & .#{$namespace}-sub-menu__title,
      & .#{$namespace}-menu-item-group__title {
        white-space: nowrap;
        padding-left: calc(
          #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-level')} *
            #{getCssVar('menu-level-padding')}
        );
      }
    }
  }

  &:not(.#{$namespace}-menu--collapse) .#{$namespace}-sub-menu__title {
    padding-right: calc(
      #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')}
    );
  }

  @include m(horizontal) {
    display: flex;
    flex-wrap: nowrap;
    border-right: none;

    height: getCssVar('menu-horizontal-height');
    // reset menu-item popup height
    &.#{$namespace}-menu--popup-container {
      height: unset;
    }

    &.#{$namespace}-menu {
      border-bottom: solid 1px getCssVar('menu-border-color');
    }

    & > .#{$namespace}-menu-item {
      display: inline-flex;
      justify-content: center;
      align-items: center;

      height: 100%;
      margin: 0;
      border-bottom: 2px solid transparent;
      color: getCssVar('menu-text-color');

      a,
      a:hover {
        color: inherit;
      }
    }
    & > .#{$namespace}-sub-menu {
      &:focus,
      &:hover {
        outline: none;
      }

      &:hover {
        .#{$namespace}-sub-menu__title {
          color: getCssVar('menu-hover-text-color');
        }
      }

      &.is-active {
        .#{$namespace}-sub-menu__title {
          border-bottom: 2px solid getCssVar('menu-active-color');
          color: getCssVar('menu-active-color');
        }
      }

      & .#{$namespace}-sub-menu__title {
        height: 100%;
        border-bottom: 2px solid transparent;
        color: getCssVar('menu-text-color');

        &:hover {
          background-color: getCssVar('menu-bg-color');
        }
      }
    }
    & .#{$namespace}-menu {
      & .#{$namespace}-menu-item,
      & .#{$namespace}-sub-menu__title {
        background-color: getCssVar('menu-bg-color');
        display: flex;
        align-items: center;
        height: getCssVar('menu-horizontal-sub-item-height');
        line-height: getCssVar('menu-horizontal-sub-item-height');
        padding: 0 10px;
        color: getCssVar('menu-text-color');
      }

      & .#{$namespace}-sub-menu__title {
        padding-right: 40px;
      }

      & .#{$namespace}-menu-item.is-active,
      & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
        color: getCssVar('menu-active-color');
      }
    }
    & .#{$namespace}-menu-item:not(.is-disabled):hover,
    & .#{$namespace}-menu-item:not(.is-disabled):focus {
      outline: none;
      color: getCssVar('menu-hover-text-color');
      background-color: getCssVar('menu-hover-bg-color');
    }
    & > .#{$namespace}-menu-item.is-active {
      border-bottom: 2px solid getCssVar('menu-active-color');
      color: getCssVar('menu-active-color') !important;
    }
  }
  @include m(collapse) {
    width: calc(
      #{getCssVar('menu-icon-width')} + #{getCssVar('menu-base-level-padding')} *
        2
    );

    > .#{$namespace}-menu-item,
    > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
    > .#{$namespace}-menu-item-group
      > ul
      > .#{$namespace}-sub-menu
      > .#{$namespace}-sub-menu__title {
      [class^='#{$namespace}-icon'] {
        margin: 0;
        vertical-align: middle;
        width: getCssVar('menu-icon-width');
        text-align: center;
      }

      .#{$namespace}-sub-menu__icon-arrow {
        display: none;
      }

      > span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
    }

    > .#{$namespace}-menu-item.is-active i {
      color: inherit;
    }

    .#{$namespace}-menu .#{$namespace}-sub-menu {
      min-width: 200px;
    }

    .#{$namespace}-sub-menu {
      &.is-active .#{$namespace}-sub-menu__title {
        color: getCssVar('menu-active-color');
      }
    }
  }
  @include m(popup) {
    z-index: 100;
    min-width: 200px;
    border: none;
    padding: 5px 0;
    border-radius: getCssVar('border-radius-small');
    box-shadow: getCssVar('box-shadow-light');
  }

  .#{$namespace}-icon {
    flex-shrink: 0;
  }
}

@include b(menu-item) {
  @include menu-item;

  & [class^='#{$namespace}-icon'] {
    margin-right: 5px;
    width: getCssVar('menu-icon-width');
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
  @include when(active) {
    color: getCssVar('menu-active-color');
    i {
      color: inherit;
    }
  }
  .#{$namespace}-menu-tooltip__trigger {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 getCssVar('menu-base-level-padding');
  }
}

@include b(sub-menu) {
  list-style: none;
  margin: 0;
  padding-left: 0;

  @include e(title) {
    @include menu-item;

    &:hover {
      background-color: getCssVar('menu-hover-bg-color');
    }
  }
  & .#{$namespace}-menu {
    border: none;
  }
  & .#{$namespace}-menu-item {
    height: getCssVar('menu-sub-item-height');
    line-height: getCssVar('menu-sub-item-height');
  }
  @include e(hide-arrow) {
    .#{$namespace}-sub-menu__icon-arrow {
      display: none !important;
    }
  }
  @include when(active) {
    .#{$namespace}-sub-menu__title {
      border-bottom-color: getCssVar('menu-active-color');
    }
  }
  @include when(disabled) {
    .#{$namespace}-sub-menu__title,
    .#{$namespace}-menu-item {
      opacity: 0.25;
      cursor: not-allowed;
      background: none !important;
    }
  }
  .#{$namespace}-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: getCssVar('menu-icon-width');
    text-align: center;
    font-size: 18px;

    &.#{$namespace}-sub-menu__icon-more {
      margin-right: 0 !important;
    }
  }
  .#{$namespace}-sub-menu__icon-arrow {
    position: absolute;
    top: 50%;
    right: getCssVar('menu-base-level-padding');
    margin-top: -6px;
    transition: transform getCssVar('transition-duration');
    font-size: 12px;
    margin-right: 0;
    width: inherit;
  }
}

@include b(menu-item-group) {
  > ul {
    padding: 0;
  }
  @include e(title) {
    padding: 7px 0 7px getCssVar('menu-base-level-padding');
    line-height: normal;
    font-size: 12px;
    color: getCssVar('text-color', 'secondary');
  }
}

.horizontal-collapse-transition
  .#{$namespace}-sub-menu__title
  .#{$namespace}-sub-menu__icon-arrow {
  transition: getCssVar('transition-duration-fast');
  opacity: 0;
}


code:
@use 'sass:map';

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

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

@include b(message-box) {
  display: inline-block;
  position: relative;
  max-width: getCssVar('messagebox-width');
  width: 100%;
  padding: getCssVar('messagebox-padding-primary');
  vertical-align: middle;
  background-color: getCssVar('bg-color');
  border-radius: getCssVar('messagebox-border-radius');
  font-size: getCssVar('messagebox-font-size');
  box-shadow: getCssVar('messagebox-box-shadow');
  text-align: left;
  overflow: hidden;
  backface-visibility: hidden;
  // To avoid small screen overflowing, see #11919
  box-sizing: border-box;
  overflow-wrap: break-word;

  &:focus {
    outline: none !important;
  }

  @at-root .#{$namespace}-overlay.is-message-box {
    .#{$namespace}-overlay-message-box {
      text-align: center;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 16px;
      overflow: auto;

      &::after {
        content: '';
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
      }
    }
  }

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

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

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

  @include e(title) {
    font-size: getCssVar('messagebox-font-size');
    line-height: getCssVar('messagebox-font-line-height');
    color: getCssVar('messagebox-title-color');
  }

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

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

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

  @include e(content) {
    color: getCssVar('messagebox-content-color');
    font-size: getCssVar('messagebox-content-font-size');
  }

  @include e(container) {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  @include e(input) {
    padding-top: 12px;

    & div.invalid > input {
      border-color: getCssVar('color-error');

      &:focus {
        border-color: getCssVar('color-error');
      }
    }
  }

  @include e(status) {
    font-size: 24px;

    @each $type in (success, info, warning, error) {
      &.#{$namespace}-message-box-icon--#{$type} {
        @include css-var-from-global(('messagebox', 'color'), ('color', $type));
        color: getCssVar('messagebox-color');
      }
    }
  }

  @include e(message) {
    margin: 0;

    & p {
      margin: 0;
      line-height: getCssVar('messagebox-font-line-height');
    }
  }

  @include e(errormsg) {
    color: getCssVar('color-error');
    font-size: getCssVar('messagebox-error-font-size');
    line-height: getCssVar('messagebox-font-line-height');
  }

  @include e(btns) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding-top: getCssVar('messagebox-padding-primary');
  }

  // centerAlign 布局
  @include m(center) {
    @include e(title) {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    @include e(status) {
      font-size: inherit;
    }

    @include e(btns) {
      justify-content: center;
    }

    @include e(container) {
      justify-content: center;
    }
  }
}

.fade-in-linear-enter-active {
  .#{$namespace}-overlay-message-box {
    animation: msgbox-fade-in getCssVar('transition-duration');
  }
}

.fade-in-linear-leave-active {
  .#{$namespace}-overlay-message-box {
    animation: msgbox-fade-in getCssVar('transition-duration') reverse;
  }
}

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

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


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

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

@include b(message) {
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: getCssVar('border-radius-base');
  border-width: getCssVar('border-width');
  border-style: getCssVar('border-style');
  border-color: getCssVar('message', 'border-color');
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: getCssVar('message', 'bg-color');
  transition: opacity getCssVar('transition-duration'), transform 0.4s, top 0.4s;
  padding: getCssVar('message', 'padding');
  display: flex;
  align-items: center;
  gap: 8px;

  @include when(center) {
    justify-content: center;
  }

  @include when(plain) {
    background-color: getCssVar('bg-color', 'overlay');
    border-color: getCssVar('bg-color', 'overlay');
    box-shadow: getCssVar('box-shadow-light');
  }

  p {
    margin: 0;
  }

  @each $type in (success, info, warning, error) {
    @include m($type) {
      @include css-var-from-global(
        ('message', 'bg-color'),
        ('color', $type, 'light-9')
      );
      @include css-var-from-global(
        ('message', 'border-color'),
        ('color', $type, 'light-8')
      );
      @include css-var-from-global(('message', 'text-color'), ('color', $type));

      .#{$namespace}-message__content {
        color: getCssVar('message', 'text-color');
        overflow-wrap: break-word;
      }
    }

    & .#{$namespace}-message-icon--#{$type} {
      color: getCssVar('message', 'text-color');
    }
  }

  .#{$namespace}-message__badge {
    position: absolute;
    top: -8px;
    right: -8px;
  }

  @include e(content) {
    padding: 0;
    font-size: 14px;
    line-height: 1;
    &:focus {
      outline-width: 0;
    }
  }

  & .#{$namespace}-message__closeBtn {
    cursor: pointer;
    color: getCssVar('message', 'close-icon-color');
    font-size: getCssVar('message', 'close-size');

    &:focus {
      outline-width: 0;
    }
    &:hover {
      color: getCssVar('message', 'close-hover-color');
    }
  }
}

.#{$namespace}-message-fade-enter-from,
.#{$namespace}-message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}


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

@mixin button-plain($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
    ),
    'active': (
      'text-color': (
        'color',
        'white',
      ),
    ),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: getCssVar('color', $type, 'light-5');
      background-color: getCssVar('color', $type, 'light-9');
      border-color: getCssVar('color', $type, 'light-8');
    }
  }
}

@mixin button-variant($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
      'outline-color': (
        'color',
        $type,
        'light-5',
      ),
      'active-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'link-text-color': (
        'color',
        $type,
        'light-5',
      ),
      'bg-color': (
        'color',
        $type,
        'light-3',
      ),
      'border-color': (
        'color',
        $type,
        'light-3',
      ),
    ),
    'active': (
      'bg-color': (
        'color',
        $type,
        'dark-2',
      ),
      'border-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'disabled': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
        'light-5',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-plain,
  &.is-text,
  &.is-link {
    @include button-plain($type);
  }
}

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}


code:
@use 'sass:math';

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

@mixin col-size($size) {
  @include res($size) {
    @for $i from 0 through 24 {
      .#{$namespace}-col-#{$size}-#{$i} {
        display: if($i == 0, none, block);
        max-width: (math.div(1, 24) * $i * 100) * 1%;
        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
        @include when(guttered) {
          display: if($i == 0, none, block);
        }
      }

      .#{$namespace}-col-#{$size}-offset-#{$i} {
        margin-left: (math.div(1, 24) * $i * 100) * 1%;
      }

      .#{$namespace}-col-#{$size}-pull-#{$i} {
        position: relative;
        right: (math.div(1, 24) * $i * 100) * 1%;
      }

      .#{$namespace}-col-#{$size}-push-#{$i} {
        position: relative;
        left: (math.div(1, 24) * $i * 100) * 1%;
      }
    }
  }
}


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

@use 'config';
@use 'function' as *;
@use '../common/var' as *;

// set css var value, because we need translate value to string
// for example:
// @include set-css-var-value(('color', 'primary'), red);
// --el-color-primary: red;
@mixin set-css-var-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}

// @include set-css-var-type('color', 'primary', $map);
// --el-color-primary: #{map.get($map, 'primary')};
@mixin set-css-var-type($name, $type, $variables) {
  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}

@mixin set-css-color-type($colors, $type) {
  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));

  @each $i in (3, 5, 7, 8, 9) {
    @include set-css-var-value(
      ('color', $type, 'light', $i),
      map.get($colors, $type, 'light-#{$i}')
    );
  }

  @include set-css-var-value(
    ('color', $type, 'dark-2'),
    map.get($colors, $type, 'dark-2')
  );
}

// set all css var for component by map
@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    @if $attribute == 'default' {
      #{getCssVarName($name)}: #{$value};
    } @else {
      #{getCssVarName($name, $attribute)}: #{$value};
    }
  }
}

@mixin set-css-color-rgb($type) {
  $color: map.get($colors, $type, 'base');
  @include set-css-var-value(
    ('color', $type, 'rgb'),
    #{color.channel($color, 'red'),
    color.channel($color, 'green'),
    color.channel($color, 'blue')}
  );
}

// generate css var from existing css var
// for example:
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
// --el-button-text-color: var(--el-color-#{$type});
@mixin css-var-from-global($var, $gVar) {
  $varName: joinVarName($var);
  $gVarName: joinVarName($gVar);
  #{$varName}: var(#{$gVarName});
}


code:
$namespace: 'el' !default;
$common-separator: '-' !default;
$element-separator: '__' !default;
$modifier-separator: '--' !default;
$state-prefix: 'is-' !default;


code:
@use 'config';

// BEM support Func
@function selectorToString($selector) {
  $selector: inspect($selector);
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, config.$modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function containWhenFlag($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, '.' + config.$state-prefix) {
    @return true;
  } @else {
    @return false;
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true;
  } @else {
    @return false;
  }
}

@function hitAllSpecialNestRule($selector) {
  @return containsModifier($selector) or containWhenFlag($selector) or
    containPseudoClass($selector);
}

// join var name
// joinVarName(('button', 'text-color')) => '--el-button-text-color'
@function joinVarName($list) {
  $name: '--' + config.$namespace;
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}

// getCssVarName('button', 'text-color') => '--el-button-text-color'
@function getCssVarName($args...) {
  @return joinVarName($args);
}

// getCssVar('button', 'text-color') => var(--el-button-text-color)
@function getCssVar($args...) {
  @return var(#{joinVarName($args)});
}

// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
@function getCssVarWithDefault($args, $default) {
  @return var(#{joinVarName($args)}, #{$default});
}

// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
@function bem($block, $element: '', $modifier: '') {
  $name: config.$namespace + config.$common-separator + $block;

  @if $element != '' {
    $name: $name + config.$element-separator + $element;
  }

  @if $modifier != '' {
    $name: $name + config.$modifier-separator + $modifier;
  }

  // @debug $name;
  @return $name;
}


code:
@use 'function' as *;
@use '../common/var' as *;
// forward mixins
@forward 'config';
@forward 'function';
@forward '_var';
@use 'config' as *;

// Break-points
@mixin res($key, $map: $breakpoints) {
  // loop breakpoint Map, return if present
  @if map-has-key($map, $key) {
    @media only screen and #{unquote(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefined points: `#{$map}`";
  }
}

// Scrollbar
@mixin scroll-bar {
  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
  $scrollbar-track-background: getCssVar('fill-color', 'blank');

  &::-webkit-scrollbar {
    z-index: 11;
    width: 6px;

    &:horizontal {
      height: 6px;
    }

    &-thumb {
      border-radius: 5px;
      width: 6px;
      background: $scrollbar-thumb-background;
    }

    &-corner {
      background: $scrollbar-track-background;
    }

    &-track {
      background: $scrollbar-track-background;

      &-piece {
        background: $scrollbar-track-background;
        width: 6px;
      }
    }
  }
}

// BEM
@mixin b($block) {
  $B: $namespace + $common-separator + $block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: '';
  @each $unit in $element {
    $currentSelector: #{$currentSelector +
      '.' +
      $B +
      $element-separator +
      $unit +
      ','};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: '';
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector +
      $selector +
      $modifier-separator +
      $unit +
      ','};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin configurable-m($modifier, $E-flag: false) {
  $selector: &;
  $interpolation: '';

  @if $E-flag {
    $interpolation: $element-separator + $E-flag;
  }

  @at-root {
    #{$selector} {
      .#{$B + $interpolation + $modifier-separator + $modifier} {
        @content;
      }
    }
  }
}

@mixin spec-selector(
  $specSelector: '',
  $element: $E,
  $modifier: false,
  $block: $B
) {
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{&}#{$specSelector}.#{$block
      + $element-separator
      + $element
      + $modifierCombo} {
      @content;
    }
  }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
  $selector: &;
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{$selector} {
      .#{$block + $element-separator + $element + $modifierCombo} {
        @content;
      }
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin extend-rule($name) {
  @extend #{'%shared-' + $name} !optional;
}

@mixin share-rule($name) {
  $rule-name: '%shared-' + $name;

  @at-root #{$rule-name} {
    @content;
  }
}

@mixin pseudo($pseudo) {
  @at-root #{&}#{':#{$pseudo}'} {
    @content;
  }
}

@mixin picker-popper($background, $border, $box-shadow) {
  &.#{$namespace}-popper {
    background: $background;
    border: $border;
    box-shadow: $box-shadow;

    .#{$namespace}-popper__arrow {
      &::before {
        border: $border;
      }
    }

    @each $placement,
      $adjacency
        in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
    {
      &[data-popper-placement^='#{$placement}'] {
        .#{$namespace}-popper__arrow::before {
          border-#{$placement}-color: transparent;
          border-#{$adjacency}-color: transparent;
        }
      }
    }
  }
}

// dark
@mixin dark($block) {
  html.dark {
    @include b($block) {
      @content;
    }
  }
}

@mixin inset-input-border($color, $important: false) {
  @if $important == true {
    box-shadow: 0 0 0 1px $color inset !important;
  } @else {
    box-shadow: 0 0 0 1px $color inset;
  }
}


code:
@mixin utils-clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: '';
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

@mixin utils-vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
  }
}

@mixin utils-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin utils-inline-flex-center {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}


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

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

@include b(notification) {
  display: flex;
  width: getCssVar('notification-width');
  padding: getCssVar('notification-padding');
  border-radius: getCssVar('notification-radius');
  box-sizing: border-box;
  border: 1px solid getCssVar('notification-border-color');
  position: fixed;
  background-color: getCssVar('bg-color', 'overlay');
  box-shadow: getCssVar('notification-shadow');
  transition: opacity getCssVar('transition-duration'),
    transform getCssVar('transition-duration'),
    left getCssVar('transition-duration'),
    right getCssVar('transition-duration'), top 0.4s,
    bottom getCssVar('transition-duration');
  overflow-wrap: break-word;
  overflow: hidden;
  z-index: 9999;

  &.right {
    right: 16px;
  }

  &.left {
    left: 16px;
  }

  @include e(group) {
    margin-left: getCssVar('notification-group-margin-left');
    margin-right: getCssVar('notification-group-margin-right');
  }

  @include e(title) {
    font-weight: bold;
    font-size: getCssVar('notification-title-font-size');
    line-height: getCssVar('notification-icon-size');
    color: getCssVar('notification-title-color');
    margin: 0;
  }

  @include e(content) {
    font-size: getCssVar('notification-content-font-size');
    line-height: 24px;
    margin: 6px 0 0;
    color: getCssVar('notification-content-color');

    p {
      margin: 0;
    }
  }

  & .#{$namespace}-notification__icon {
    height: getCssVar('notification-icon-size');
    width: getCssVar('notification-icon-size');
    font-size: getCssVar('notification-icon-size');
  }

  & .#{$namespace}-notification__closeBtn {
    position: absolute;
    top: 18px;
    right: 15px;
    cursor: pointer;
    color: getCssVar('notification-close-color');
    font-size: getCssVar('notification-close-font-size');

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

  @each $type in (success, info, warning, error) {
    & .#{$namespace}-notification--#{$type} {
      @include css-var-from-global(
        ('notification', 'icon-color'),
        ('color', $type)
      );
      color: getCssVar('notification-icon-color');
    }
  }
}

.#{$namespace}-notification-fade-enter-from {
  &.right {
    right: 0;
    transform: translateX(100%);
  }

  &.left {
    left: 0;
    transform: translateX(-100%);
  }
}

.#{$namespace}-notification-fade-leave-to {
  opacity: 0;
}


code:
@use 'sass:map';

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

@include b(select-group) {
  $gap: 20px;

  margin: 0;
  padding: 0;

  @include e(wrap) {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @include e(title) {
    padding-left: $gap;
    font-size: map.get($select-group, 'font-size');
    color: map.get($select-group, 'text-color');
    line-height: map.get($select-group, 'height');
  }

  & .#{$namespace}-select-dropdown__item {
    padding-left: $gap;
  }
}


code:
@use 'sass:map';

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

$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";

@mixin checked-icon {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  border-top: none;
  border-right: none;
  background-repeat: no-repeat;
  background-position: center;
  background-color: map.get($select-option, 'selected-text-color');
  mask: url('#{$checked-icon}') no-repeat;
  mask-size: 100% 100%;
  -webkit-mask: url('#{$checked-icon}') no-repeat;
  -webkit-mask-size: 100% 100%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}

@include b(select-dropdown) {
  @include e(item) {
    font-size: map.get($select, 'font-size');
    // 20 as the padding of option item, 12 as the size of ✓ icon size
    padding: 0 #{20 + 12}px 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: map.get($select-option, 'text-color');
    height: map.get($select-option, 'height');
    line-height: map.get($select-option, 'height');
    box-sizing: border-box;
    cursor: pointer;

    @include when(hovering) {
      background-color: map.get($select-option, 'hover-background');
    }

    @include when(selected) {
      color: map.get($select-option, 'selected-text-color');
      font-weight: bold;
    }

    @include when(disabled) {
      color: map.get($select-option, 'disabled-color');
      cursor: not-allowed;
      background-color: unset;
    }
  }

  @include when(multiple) {
    .#{$namespace}-select-dropdown__item.is-selected {
      &::after {
        @include checked-icon;
      }
    }

    .#{$namespace}-select-dropdown__item.is-disabled {
      &::after {
        background-color: map.get($select-option, 'disabled-color');
      }
    }
  }
}


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

@include b(overlay) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: getCssVar('overlay-color', 'lighter');
  overflow: auto;
  #{& + '-root'} {
    height: 0;
  }
}


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

@include b(page-header) {
  @include when(contentful) {
    @include e('main') {
      border-top: 1px solid getCssVar('border-color', 'light');
      margin-top: 16px;
    }
  }

  @include e(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 24px;

    @include e(left) {
      display: flex;
      align-items: center;
      margin-right: 40px;
      position: relative;

      @include e('back') {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .#{$namespace}-divider--vertical {
        margin: 0 16px;
      }

      @include e(icon) {
        font-size: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;

        .#{$namespace}-icon {
          font-size: inherit;
        }
      }

      @include e(title) {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  @include e(content) {
    font-size: 18px;
    color: getCssVar('text-color', 'primary');
  }

  @include e(breadcrumb) {
    margin-bottom: 16px;
  }
}


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

@mixin pagination-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: getCssVar('pagination-font-size');
  min-width: getCssVar('pagination-button-width');
  height: getCssVar('pagination-button-height');
  line-height: getCssVar('pagination-button-height');
  color: getCssVar('pagination-button-color');
  background: getCssVar('pagination-bg-color');
  padding: 0 4px;
  border: none;
  border-radius: getCssVar('pagination-border-radius');
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;

  * {
    pointer-events: none;
  }

  &:focus {
    outline: none;
  }

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

  &.is-active {
    color: getCssVar('pagination-hover-color');
    cursor: default;
    font-weight: bold;

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

  &:disabled,
  &.is-disabled {
    color: getCssVar('pagination-button-disabled-color');
    background-color: getCssVar('pagination-button-disabled-bg-color');
    cursor: not-allowed;
  }

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

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

  white-space: nowrap;
  color: getCssVar('pagination-text-color');
  font-size: getCssVar('pagination-font-size');
  font-weight: normal;
  display: flex;
  align-items: center;

  .#{$namespace}-input__inner {
    text-align: center;
    -moz-appearance: textfield;
  }

  .#{$namespace}-select {
    width: 128px;
  }

  button {
    @include pagination-button;
  }

  .btn-prev,
  .btn-next {
    .#{$namespace}-icon {
      display: block;
      font-size: 12px;
      font-weight: bold;
      width: inherit;
    }
  }

  & > * {
    @include when(first) {
      margin-left: 0 !important;
    }
    @include when(last) {
      margin-right: 0 !important;
    }
  }

  .btn-prev {
    margin-left: getCssVar('pagination-item-gap');
  }

  @include e(sizes) {
    margin-left: getCssVar('pagination-item-gap');
    font-weight: normal;
    color: getCssVar('text-color', 'regular');
  }

  @include e(total) {
    margin-left: getCssVar('pagination-item-gap');
    font-weight: normal;
    color: getCssVar('text-color', 'regular');

    &[disabled='true'] {
      color: getCssVar('text-color', 'placeholder');
    }
  }

  @include e(jump) {
    display: flex;
    align-items: center;
    margin-left: getCssVar('pagination-item-gap');
    font-weight: normal;
    color: getCssVar('text-color', 'regular');

    &[disabled='true'] {
      color: getCssVar('text-color', 'placeholder');
    }

    @include e(goto) {
      margin-right: 8px;
    }

    @include e(editor) {
      text-align: center;
      box-sizing: border-box;

      &.#{$namespace}-input {
        width: 56px;
      }

      .#{$namespace}-input__inner::-webkit-inner-spin-button,
      .#{$namespace}-input__inner::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    @include e(classifier) {
      margin-left: 8px;
    }
  }

  @include e(rightwrapper) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  @include when(background) {
    .btn-prev,
    .btn-next,
    .#{$namespace}-pager li {
      margin: 0 4px;
      background-color: getCssVar('pagination-button-bg-color');

      &.is-active {
        background-color: getCssVar('color-primary');
        color: getCssVar('color-white');
      }

      &:disabled,
      &.is-disabled {
        color: getCssVar('text-color', 'placeholder');
        background-color: getCssVar('disabled-bg-color');

        &.is-active {
          color: getCssVar('text-color', 'secondary');
          background-color: getCssVar('fill-color', 'dark');
        }
      }
    }

    .btn-prev {
      margin-left: getCssVar('pagination-item-gap');
    }
  }

  @include m(small) {
    .btn-prev,
    .btn-next,
    .#{$namespace}-pager li {
      height: getCssVar('pagination-button-height-small');
      line-height: getCssVar('pagination-button-height-small');
      font-size: getCssVar('pagination-font-size-small');
      min-width: getCssVar('pagination-button-width-small');
    }

    span:not([class*='suffix']),
    button {
      font-size: getCssVar('pagination-font-size-small');
    }

    .#{$namespace}-select {
      width: 100px;
    }
  }
  @include m(large) {
    .btn-prev,
    .btn-next,
    .#{$namespace}-pager li {
      height: getCssVar('pagination-button-height-large');
      line-height: getCssVar('pagination-button-height-large');
      min-width: getCssVar('pagination-button-width-large');
    }

    .#{$namespace}-select .#{$namespace}-input {
      width: 160px;
    }
  }
}

@include b(pager) {
  user-select: none;
  list-style: none;
  font-size: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;

  li {
    @include pagination-button;
  }
}


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

@include b(popconfirm) {
  @include e(main) {
    display: flex;
    align-items: center;
  }
  @include e(icon) {
    margin-right: 5px;
  }
  @include e(action) {
    text-align: right;
    margin-top: 8px;
  }
}


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

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

  &.#{$namespace}-popper {
    background: getCssVar('popover-bg-color');
    min-width: 150px;
    border-radius: getCssVar('popover-border-radius');
    border: 1px solid getCssVar('popover-border-color');
    padding: getCssVar('popover-padding');
    z-index: getCssVar('index-popper');
    color: getCssVar('text-color', 'regular');
    line-height: 1.4;
    font-size: getCssVar('popover-font-size');
    box-shadow: getCssVar('box-shadow-light');
    overflow-wrap: break-word;
    box-sizing: border-box;

    @include m(plain) {
      padding: getCssVar('popover-padding-large');
    }

    @include e(title) {
      color: getCssVar('popover-title-text-color');
      font-size: getCssVar('popover-title-font-size');
      line-height: 1;
      margin-bottom: 12px;
    }

    @include e(reference) {
      &:focus:not(.focusing),
      &:focus:hover {
        outline-width: 0;
      }
    }

    @include when(dark) {
      @include set-css-var-value(
        ('popover', 'bg-color'),
        var(#{getCssVarName('text-color', 'primary')})
      );
      @include set-css-var-value(
        ('popover', 'border-color'),
        var(#{getCssVarName('text-color', 'primary')})
      );
      @include set-css-var-value(
        ('popover', 'title-text-color'),
        var(#{getCssVarName('bg-color')})
      );
      color: getCssVar('bg-color');
    }

    &:focus:active,
    &:focus {
      outline-width: 0;
    }
  }
}


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

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

@include b(popper) {
  position: absolute;
  border-radius: getCssVar('popper', 'border-radius');
  padding: 5px 11px;
  z-index: 2000;
  font-size: 12px;
  line-height: 20px;
  min-width: 10px;
  overflow-wrap: break-word;
  visibility: visible;

  $arrow-selector: #{& + '__arrow'};

  @include when(dark) {
    color: getCssVar('bg-color');
    background: getCssVar('text-color', 'primary');
    border: 1px solid getCssVar('text-color', 'primary');

    > #{$arrow-selector}::before {
      border: 1px solid getCssVar('text-color', 'primary');
      background: getCssVar('text-color', 'primary');
      right: 0;
    }
  }

  @include when(light) {
    background: getCssVar('bg-color', 'overlay');
    border: 1px solid getCssVar('border-color', 'light');

    > #{$arrow-selector}::before {
      border: 1px solid getCssVar('border-color', 'light');
      background: getCssVar('bg-color', 'overlay');
      right: 0;
    }
  }

  @include when(pure) {
    padding: 0;
  }

  @include e(arrow) {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: -1;

    &::before {
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: -1;
      content: ' ';
      transform: rotate(45deg);
      background: getCssVar('text-color', 'primary');
      box-sizing: border-box;
    }
  }

  $placements: (
    'top': 'bottom',
    'bottom': 'top',
    'left': 'right',
    'right': 'left',
  );

  @each $placement, $opposite in $placements {
    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
      #{$opposite}: -5px;

      &::before {
        @if $placement == top {
          border-bottom-right-radius: 2px;
        }
        @if $placement == bottom {
          border-top-left-radius: 2px;
        }
        @if $placement == left {
          border-top-right-radius: 2px;
        }
        @if $placement == right {
          border-bottom-left-radius: 2px;
        }
      }
    }
  }

  @each $placement,
    $adjacency
      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
  {
    &[data-popper-placement^='#{$placement}'] {
      #{$arrow-selector}::before {
        border-#{$placement}-color: transparent !important;
        border-#{$adjacency}-color: transparent !important;
      }
    }
  }
}


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

@include b(progress) {
  position: relative;
  line-height: 1;
  display: flex;
  align-items: center;

  @include e(text) {
    font-size: 14px;
    color: getCssVar('text-color', 'regular');
    margin-left: 5px;
    min-width: 50px;
    line-height: 1;

    i {
      vertical-align: middle;
      display: block;
    }
  }

  @include m((circle, dashboard)) {
    display: inline-block;

    .#{$namespace}-progress__text {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      transform: translate(0, -50%);

      i {
        vertical-align: middle;
        display: inline-block;
      }
    }
  }

  @include m(without-text) {
    .#{$namespace}-progress__text {
      display: none;
    }

    .#{$namespace}-progress-bar {
      padding-right: 0;
      margin-right: 0;
      display: block;
    }
  }

  @include m(text-inside) {
    .#{$namespace}-progress-bar {
      padding-right: 0;
      margin-right: 0;
    }
  }

  @include when(success) {
    .#{$namespace}-progress-bar__inner {
      background-color: getCssVar('color-success');
    }

    .#{$namespace}-progress__text {
      color: getCssVar('color-success');
    }
  }

  @include when(warning) {
    .#{$namespace}-progress-bar__inner {
      background-color: getCssVar('color-warning');
    }

    .#{$namespace}-progress__text {
      color: getCssVar('color-warning');
    }
  }

  @include when(exception) {
    .#{$namespace}-progress-bar__inner {
      background-color: getCssVar('color-danger');
    }

    .#{$namespace}-progress__text {
      color: getCssVar('color-danger');
    }
  }
}

@include b(progress-bar) {
  flex-grow: 1;
  box-sizing: border-box;

  @include e(outer) {
    height: 6px;
    border-radius: 100px;
    background-color: getCssVar('border-color-lighter');
    overflow: hidden;
    position: relative;
    vertical-align: middle;
  }
  @include e(inner) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: getCssVar('color-primary');
    text-align: right;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    transition: width 0.6s ease;

    @include utils-vertical-center;

    @include m(indeterminate) {
      transform: translateZ(0);
      animation: indeterminate 3s infinite;
    }

    @include m(striped) {
      background-image: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 75%,
        transparent
      );
      background-size: 1.25em 1.25em;
      &.#{$namespace}-progress-bar__inner--striped-flow {
        animation: striped-flow 3s linear infinite;
      }
    }
  }

  @include e(innerText) {
    display: inline-block;
    vertical-align: middle;
    color: $color-white;
    font-size: 12px;
    margin: 0 5px;
  }
}

@keyframes progress {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 0;
  }
}

@keyframes indeterminate {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes striped-flow {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 100%;
  }
}


code:
@use 'sass:map';

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

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

@include b(radio-button) {
  position: relative;
  display: inline-block;
  outline: none;

  @include e(inner) {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    background: var(
      #{getCssVarName('button-bg-color')},
      map.get($button, 'bg-color')
    );
    border: getCssVar('border');
    font-weight: var(
      #{getCssVarName('button-font-weight')},
      map.get($button, 'font-weight')
    );
    border-left: 0;
    color: var(
      #{getCssVarName('button-text-color')},
      map.get($button, 'text-color')
    );
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    position: relative;
    cursor: pointer;
    transition: getCssVar('transition-all');
    user-select: none;

    @include button-size(
      map.get($button-padding-vertical, 'default') - $button-border-width,
      map.get($button-padding-horizontal, 'default') - $button-border-width,
      map.get($button-font-size, 'default'),
      0
    );

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

    & [class*='#{$namespace}-icon-'] {
      line-height: 0.9;

      & + span {
        margin-left: 5px;
      }
    }
  }

  &:first-child {
    .#{$namespace}-radio-button__inner {
      border-left: getCssVar('border');
      border-radius: getCssVar('border-radius-base') 0 0
        getCssVar('border-radius-base');
      box-shadow: none !important;
    }
  }

  @include when(active) {
    @include e(original-radio) {
      &:not(:disabled) {
        & + .#{$namespace}-radio-button__inner {
          color: getCssVarWithDefault(
            ('radio-button', 'checked-text-color'),
            map.get($radio-button, 'checked-text-color')
          );
          background-color: getCssVarWithDefault(
            'radio-button-checked-bg-color',
            map.get($radio-button, 'checked-bg-color')
          );
          border-color: getCssVarWithDefault(
            'radio-button-checked-border-color',
            map.get($radio-button, 'checked-border-color')
          );
          box-shadow: -1px 0 0 0
            getCssVarWithDefault(
              'radio-button-checked-border-color',
              map.get($radio-button, 'checked-border-color')
            );
        }
      }
    }
  }

  @include e(original-radio) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;

    &:focus-visible {
      & + .#{$namespace}-radio-button__inner {
        border-left: getCssVar('border');
        border-left-color: getCssVarWithDefault(
          'radio-button-checked-border-color',
          map.get($radio-button, 'checked-border-color')
        );
        outline: 2px solid getCssVar('radio-button-checked-border-color');
        outline-offset: 1px;
        z-index: 2;
        border-radius: getCssVar('border-radius-base');
        box-shadow: none;
      }
    }

    &:disabled {
      & + .#{$namespace}-radio-button__inner {
        color: getCssVar('disabled-text-color');
        cursor: not-allowed;
        background-image: none;
        background-color: getCssVarWithDefault(
          'button-disabled-bg-color',
          map.get($button, 'disabled-bg-color')
        );
        border-color: getCssVarWithDefault(
          'button-disabled-border-color',
          map.get($button, 'disabled-border-color')
        );
        box-shadow: none;
      }
      &:checked + .#{$namespace}-radio-button__inner {
        background-color: getCssVar('radio-button-disabled-checked-fill');
      }
    }
  }

  &:last-child {
    .#{$namespace}-radio-button__inner {
      border-radius: 0 getCssVar('border-radius-base')
        getCssVar('border-radius-base') 0;
    }
  }

  &:first-child:last-child {
    .#{$namespace}-radio-button__inner {
      border-radius: getCssVar('border-radius-base');
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      & .#{$namespace}-radio-button__inner {
        @include button-size(
          map.get($button-padding-vertical, $size) - $button-border-width,
          map.get($button-padding-horizontal, $size) - $button-border-width,
          map.get($button-font-size, $size),
          0
        );
      }
    }
  }
}


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

@include b(radio-group) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0;
}


code:
@use 'sass:map';

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

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

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

@include b(radio) {
  color: getCssVar('radio-text-color');
  font-weight: getCssVar('radio-font-weight');
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  outline: none;
  font-size: getCssVar('font-size', 'base');
  user-select: none;
  margin-right: 30px;
  height: map.get($radio-height, 'default');

  @each $size in (large, small) {
    &.#{$namespace}-radio--#{$size} {
      height: map.get($radio-height, $size);
    }
  }

  @include when(bordered) {
    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;

    border-radius: getCssVar('border-radius-base');
    border: getCssVar('border');
    box-sizing: border-box;

    &.is-checked {
      border-color: getCssVar('color-primary');
    }

    &.is-disabled {
      cursor: not-allowed;
      border-color: getCssVar('border-color-lighter');
    }

    @each $size in (large, small) {
      &.#{$namespace}-radio--#{$size} {
        padding: 0
          map.get($checkbox-bordered-padding-right, $size)-$border-width
          0
          map.get($checkbox-bordered-padding-left, $size)-$border-width;
        border-radius: getCssVar('border-radius-base');

        .#{$namespace}-radio__label {
          font-size: map.get($button-font-size, $size);
        }

        .#{$namespace}-radio__inner {
          height: map.get($radio-bordered-input-height, $size);
          width: map.get($radio-bordered-input-width, $size);
        }
      }
    }
  }

  &:last-child {
    margin-right: 0;
  }

  @include e(input) {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    position: relative;
    vertical-align: middle;

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

        &::after {
          cursor: not-allowed;
          background-color: map.get($radio-disabled, 'icon-color');
        }

        & + .#{$namespace}-radio__label {
          cursor: not-allowed;
        }
      }
      &.is-checked {
        .#{$namespace}-radio__inner {
          background-color: map.get($radio-disabled, 'checked-input-fill');
          border-color: map.get($radio-disabled, 'checked-input-border-color');

          &::after {
            background-color: map.get($radio-disabled, 'checked-icon-color');
          }
        }
      }
      & + span.#{$namespace}-radio__label {
        color: getCssVar('text-color', 'placeholder');
        cursor: not-allowed;
      }
    }

    @include when(checked) {
      .#{$namespace}-radio__inner {
        border-color: map.get($radio-checked, 'input-border-color');
        background: map.get($radio-checked, 'icon-color');

        &::after {
          transform: translate(-50%, -50%) scale(1);
        }
      }

      & + .#{$namespace}-radio__label {
        color: map.get($radio-checked, 'text-color');
      }
    }

    @include when(focus) {
      .#{$namespace}-radio__inner {
        border-color: getCssVar('radio-input-border-color-hover');
      }
    }
  }
  @include e(inner) {
    border: getCssVar('radio-input-border');
    border-radius: getCssVar('radio-input-border-radius');
    width: getCssVar('radio-input-width');
    height: getCssVar('radio-input-height');
    background-color: getCssVar('radio-input-bg-color');
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;

    &:hover {
      border-color: getCssVar('radio-input-border-color-hover');
    }

    &::after {
      width: 4px;
      height: 4px;
      border-radius: getCssVar('radio-input-border-radius');
      background-color: getCssVar('color-white');
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.15s ease-in;
    }
  }

  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;

    &:focus-visible {
      & + .#{$namespace}-radio__inner {
        outline: 2px solid getCssVar('radio-input-border-color-hover');
        outline-offset: 1px;
        border-radius: getCssVar('radio-input-border-radius');
      }
    }
  }

  &:focus:not(:focus-visible):not(.is-focus):not(:active):not(.is-disabled) {
    /*获得焦点时 样式提醒*/
    .#{$namespace}-radio__inner {
      box-shadow: 0 0 2px 2px getCssVar('radio-input-border-color-hover');
    }
  }

  @include e(label) {
    font-size: getCssVar('radio-font-size');
    padding-left: 8px;
  }

  @each $size in (large, small) {
    &.#{$namespace}-radio--#{$size} {
      @include e(label) {
        font-size: map.get($radio-font-size, $size);
      }
      @include e(inner) {
        width: map.get($radio-font-size, $size);
        height: map.get($radio-font-size, $size);
      }
    }
  }
}


code:
@use 'sass:map';

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

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

$rate-size: () !default;
$rate-size: map.merge(
  (
    'small': 14px,
  ),
  $rate-size
);

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

@include b(rate) {
  display: inline-flex;
  align-items: center;
  height: map.get($rate-height, 'default');

  &:focus,
  &:active {
    outline: none;
  }

  @include e(item) {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: middle;
    color: getCssVar('rate-void-color');
    line-height: normal;
  }

  & .#{bem('rate', 'icon')} {
    position: relative;
    display: inline-block;
    font-size: getCssVar('rate-icon-size');
    margin-right: getCssVar('rate-icon-margin');
    transition: getCssVar('transition-duration');

    &.hover {
      transform: scale(1.15);
    }

    .path2 {
      position: absolute;
      left: 0;
      top: 0;
    }

    @include when(active) {
      color: getCssVar('rate', 'fill-color');
    }
  }

  @include e(decimal) {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    color: getCssVar('rate', 'fill-color');

    @include m('box') {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  @include e(text) {
    font-size: getCssVar('rate-font-size');
    vertical-align: middle;
    color: getCssVar('rate', 'text-color');
  }

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

      & .#{bem('rate', 'icon')} {
        font-size: map.get($rate-size, $size);
      }
    }
  }

  @include when(disabled) {
    @include e(item) {
      cursor: auto;
      color: getCssVar('rate', 'disabled-void-color');
    }
  }
}