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

body {
  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-weight: 400;
  font-size: getCssVar('font-size', 'base');
  color: getCssVar('text-color', 'primary');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
button {
  font-family: inherit;
}

a {
  color: getCssVar('color', 'primary');
  text-decoration: none;

  &:hover,
  &:focus {
    color: getCssVar('color-primary', 'light-3');
  }

  &:active {
    color: getCssVar('color-primary', 'dark-2');
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: getCssVar('text-color', 'regular');
  font-weight: inherit;

  &:first-child {
    margin-top: 0;
  }

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

h1 {
  font-size: calc(getCssVar('font-size', 'base') + 6px);
}

h2 {
  font-size: calc(getCssVar('font-size', 'base') + 4px);
}

h3 {
  font-size: calc(getCssVar('font-size', 'base') + 2px);
}

h4,
h5,
h6,
p {
  font-size: inherit;
}

p {
  line-height: 1.8;

  &:first-child {
    margin-top: 0;
  }

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

sup,
sub {
  font-size: calc(getCssVar('font-size', 'base') - 1px);
}

small {
  font-size: calc(getCssVar('font-size', 'base') - 2px);
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid getCssVar('border-color', 'lighter');
}


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

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

@include b(result) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: getCssVar('result-padding');

  @include e(icon) {
    svg {
      width: getCssVar('result-icon-font-size');
      height: getCssVar('result-icon-font-size');
    }
  }

  @include e(title) {
    margin-top: getCssVar('result-title-margin-top');

    p {
      margin: 0;
      font-size: getCssVar('result-title-font-size');
      color: getCssVar('text-color', 'primary');
      line-height: 1.3;
    }
  }

  @include e(subtitle) {
    margin-top: getCssVar('result-subtitle-margin-top');

    p {
      margin: 0;
      font-size: getCssVar('font-size', 'base');
      color: getCssVar('text-color', 'regular');
      line-height: 1.3;
    }
  }

  @include e(extra) {
    margin-top: getCssVar('result-extra-margin-top');
  }

  @each $type in $types {
    .icon-#{$type} {
      @include css-var-from-global(('result', 'color'), ('color', $type));
      color: getCssVar('result-color');
    }
  }
}

license: mit


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

@include b(row) {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;

  @include when(justify-center) {
    justify-content: center;
  }
  @include when(justify-end) {
    justify-content: flex-end;
  }
  @include when(justify-space-between) {
    justify-content: space-between;
  }
  @include when(justify-space-around) {
    justify-content: space-around;
  }
  @include when(justify-space-evenly) {
    justify-content: space-evenly;
  }
  @include when(align-top) {
    align-items: flex-start;
  }
  @include when(align-middle) {
    align-items: center;
  }
  @include when(align-bottom) {
    align-items: flex-end;
  }
}


code:
@use 'sass:map';

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

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

@include b(scrollbar) {
  overflow: hidden;
  position: relative;
  height: 100%;

  @include e(wrap) {
    overflow: auto;
    height: 100%;

    @include m(hidden-default) {
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  @include e(thumb) {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: var(
      #{getCssVarName('scrollbar-bg-color')},
      map.get($scrollbar, 'bg-color')
    );
    transition: getCssVar('transition-duration') background-color;
    opacity: var(
      #{getCssVarName('scrollbar-opacity')},
      map.get($scrollbar, 'opacity')
    );

    &:hover {
      background-color: var(
        #{getCssVarName('scrollbar-hover-bg-color')},
        map.get($scrollbar, 'hover-bg-color')
      );
      opacity: var(
        #{getCssVarName('scrollbar-hover-opacity')},
        map.get($scrollbar, 'hover-opacity')
      );
    }
  }

  @include e(bar) {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;

    @include when(vertical) {
      width: 6px;
      top: 2px;

      > div {
        width: 100%;
      }
    }

    @include when(horizontal) {
      height: 6px;
      left: 2px;

      > div {
        height: 100%;
      }
    }
  }
}

.#{$namespace}-scrollbar-fade {
  &-enter-active {
    transition: opacity 340ms ease-out;
  }

  &-leave-active {
    transition: opacity 120ms ease-out;
  }

  &-enter-from,
  &-leave-active {
    opacity: 0;
  }
}


code:
@use 'sass:map';

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

$segmented-border-radius: () !default;
$segmented-border-radius: map.merge(
  (
    'large': map.get($button-border-radius, 'large'),
    'default': map.get($button-border-radius, 'default'),
    'small': map.get($button-border-radius, 'small'),
  ),
  $segmented-border-radius
);

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

$segmented-item-padding: () !default;
$segmented-item-padding: map.merge(
  (
    'large': 0 11px,
    'default': 0 11px,
    'small': 0 7px,
  ),
  $segmented-item-padding
);

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

@include b(segmented) {
  display: inline-flex;
  align-items: stretch;
  min-height: map.get($input-height, 'default');
  background: getCssVar('segmented-bg-color');
  padding: getCssVar('segmented-padding');
  border-radius: map.get($segmented-border-radius, 'default');
  font-size: map.get($segmented-font-size, 'default');
  color: getCssVar('segmented-color');
  box-sizing: border-box;

  @include e(group) {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
  }

  @include e(item-selected) {
    position: absolute;
    top: 0;
    left: 0;
    background: getCssVar('segmented-item-selected-bg-color');
    height: 100%;
    width: 10px;
    border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px);
    transition: all 0.3s;
    pointer-events: none;

    @include when(disabled) {
      background: getCssVar('segmented-item-selected-disabled-bg-color');
    }

    @include when(focus-visible) {
      &:before {
        position: absolute;
        content: '';
        inset: 0;
        border-radius: inherit;
        outline: 2px solid getCssVar('segmented-item-selected-bg-color');
        outline-offset: 1px;
      }
    }
  }

  @include e(item) {
    display: flex;
    align-items: center;
    flex: 1;
    cursor: pointer;
    border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px);
    padding: map.get($segmented-item-padding, 'default');

    &:not(.is-disabled):not(.is-selected):hover {
      color: getCssVar('segmented-item-hover-color');
      background: getCssVar('segmented-item-hover-bg-color');
    }

    &:not(.is-disabled):not(.is-selected):active {
      background: getCssVar('segmented-item-active-bg-color');
    }

    @include when(selected) {
      color: getCssVar('segmented-item-selected-color');

      &.is-disabled {
        color: getCssVar('segmented-item-selected-color');
      }
    }

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

  @include e(item-input) {
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  @include e(item-label) {
    flex: 1;
    text-align: center;
    line-height: normal;
    @include utils-ellipsis;
    transition: color 0.3s;
    z-index: 1;
  }

  @include when(block) {
    display: flex;

    .#{$namespace}-segmented__item {
      min-width: 0;
    }
  }

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

      @include e(item-selected) {
        border-radius: calc(#{map.get($segmented-border-radius, $size)} - 2px);
      }

      @include e(item) {
        border-radius: calc(#{map.get($segmented-border-radius, $size)} - 2px);
        padding: map.get($segmented-item-padding, $size);
      }
    }
  }
}


code:
@use 'sass:map';

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

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

  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
    padding: 0;
  }
}

@include b(select-dropdown__loading) {
  padding: map.get($select-dropdown, 'empty-padding');
  margin: 0;
  text-align: center;
  color: map.get($select-dropdown, 'empty-color');
  font-size: getCssVar('select-font-size');
}

@include b(select-dropdown__empty) {
  padding: map.get($select-dropdown, 'empty-padding');
  margin: 0;
  text-align: center;
  color: map.get($select-dropdown, 'empty-color');
  font-size: getCssVar('select-font-size');
}

@include b(select-dropdown__wrap) {
  max-height: map.get($select-dropdown, 'max-height');
}

@include b(select-dropdown__list) {
  list-style: none;
  padding: map.get($select-dropdown, 'padding');
  margin: 0;
  box-sizing: border-box;

  &.#{$namespace}-vl__window {
    // for select-v2
    margin: map.get($select-dropdown, 'padding');
    padding: 0;
  }
}

@include b(select-dropdown__header) {
  padding: map.get($select-dropdown, 'header-padding');
  border-bottom: map.get($select-dropdown, 'border');
}

@include b(select-dropdown__footer) {
  padding: map.get($select-dropdown, 'footer-padding');
  border-top: map.get($select-dropdown, 'border');
}


code:
@use './select.scss';
@use './select-dropdown-v2.scss';
@use './option.scss';
@use './option-group.scss';


code:
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use './select-dropdown.scss';
@use './option.scss';
@use './option-group.scss';

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

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

@include b(select) {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: getCssVar('select-width');

  @include e(wrapper) {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    font-size: map.get($input-font-size, 'default');
    padding: map.get($select-wrapper-padding, 'default');
    gap: map.get($select-item-gap, 'default');
    min-height: map.get($input-height, 'default');
    line-height: map.get($select-item-height, 'default');
    border-radius: getCssVar('border-radius-base');
    background-color: getCssVar('fill-color', 'blank');
    transition: getCssVar('transition', 'duration');
    transform: translate3d(0, 0, 0);
    @include mixed-input-border(#{getCssVar('border-color')});

    @include when(filterable) {
      cursor: text;
    }

    @include when(focused) {
      @include mixed-input-border(#{getCssVar('color-primary')});
    }

    @include when(hovering) {
      &:not(.is-focused) {
        @include mixed-input-border(#{getCssVar('border-color-hover')});
      }
    }

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

      background-color: getCssVar('fill-color', 'light');
      color: getCssVar('text-color', 'placeholder');
      @include mixed-input-border(#{getCssVar('select-disabled-border')});

      &:hover {
        @include mixed-input-border(#{getCssVar('select-disabled-border')});
      }

      &.is-focus {
        @include mixed-input-border(#{getCssVar('input-focus-border-color')});
      }

      @include e(selected-item) {
        color: getCssVar('select-disabled-color');
      }

      @include e(caret) {
        cursor: not-allowed;
      }

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

  @include e(prefix) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: map.get($select-item-gap, 'default');
    color: var(
      #{getCssVarName('input-icon-color')},
      map.get($input, 'icon-color')
    );
  }

  @include e(suffix) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: map.get($select-item-gap, 'default');
    color: var(
      #{getCssVarName('input-icon-color')},
      map.get($input, 'icon-color')
    );
  }

  @include e(caret) {
    color: getCssVar('select-input-color');
    font-size: getCssVar('select-input-font-size');
    transition: getCssVar('transition', 'duration');
    transform: rotateZ(0deg);
    cursor: pointer;

    @include when(reverse) {
      transform: rotateZ(180deg);
    }
  }

  @include e(selection) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: map.get($select-item-gap, 'default');

    @include when(near) {
      margin-left: map.get($select-near-margin-left, 'default');
    }

    .#{$namespace}-tag {
      cursor: pointer;
      border-color: transparent;

      &.#{$namespace}-tag--plain {
        border-color: getCssVar('tag', 'border-color');
      }

      .#{$namespace}-tag__content {
        min-width: 0;
      }
    }
  }

  @include e(selected-item) {
    display: flex;
    flex-wrap: wrap;
    user-select: none;
  }

  @include e(tags-text) {
    display: block;
    line-height: normal;
    @include utils-ellipsis;
  }

  @include e(placeholder) {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    @include utils-ellipsis;
    color: var(
      #{getCssVarName('input-text-color')},
      map.get($input, 'text-color')
    );

    @include when(transparent) {
      user-select: none;
      color: getCssVar('text-color', 'placeholder');
    }
  }

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

  @include e(input-wrapper) {
    max-width: 100%;

    @include when(hidden) {
      // Out of the document flow
      position: absolute;
      opacity: 0;
    }
  }

  @include e(input) {
    border: none;
    outline: none;
    padding: 0;
    color: getCssVar('select-multiple-input-color');
    font-size: inherit;
    font-family: inherit;
    appearance: none;
    height: map.get($select-item-height, 'default');
    max-width: 100%;
    background-color: transparent;

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

  @include e(input-calculator) {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    visibility: hidden;
    white-space: pre;
    overflow: hidden;
  }

  @each $size in (large, small) {
    @include m($size) {
      @include e(wrapper) {
        gap: map.get($select-item-gap, $size);
        padding: map.get($select-wrapper-padding, $size);
        min-height: map.get($input-height, $size);
        line-height: map.get($select-item-height, $size);
        font-size: map.get($input-font-size, $size);
      }

      @include e(selection) {
        gap: map.get($select-item-gap, $size);

        @include when(near) {
          margin-left: map.get($select-near-margin-left, $size);
        }
      }

      @include e(prefix) {
        gap: map.get($select-item-gap, $size);
      }

      @include e(suffix) {
        gap: map.get($select-item-gap, $size);
      }

      @include e(input) {
        height: map.get($select-item-height, $size);
      }
    }
  }
}


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

@include b(skeleton) {
  @include css-var-from-global(('skeleton', 'circle-size'), ('avatar', 'size'));
}

@mixin circle-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
}

@include b(skeleton) {
  @include e(item) {
    background: getCssVar('skeleton-color');
    display: inline-block;
    height: 16px;
    border-radius: getCssVar('border-radius-base');
    width: 100%;
  }

  @include e(circle) {
    border-radius: 50%;

    width: getCssVar('skeleton-circle-size');
    height: getCssVar('skeleton-circle-size');
    line-height: getCssVar('skeleton-circle-size');
  }

  @include e(button) {
    height: 40px;
    width: 64px;
    border-radius: 4px;
  }

  @include e(p) {
    width: 100%;
    @include when(last) {
      width: 61%;
    }

    @include when(first) {
      width: 33%;
    }
  }

  @include e(text) {
    width: 100%;
    height: getCssVar('font-size-small');
  }

  @include e(caption) {
    height: getCssVar('font-size-extra-small');
  }

  @include e(h1) {
    height: getCssVar('font-size-extra-large');
  }

  @include e(h3) {
    height: getCssVar('font-size-large');
  }

  @include e(h5) {
    height: getCssVar('font-size-medium');
  }

  @include e(image) {
    width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;

    svg {
      color: getCssVar('svg-monochrome-grey');
      fill: currentColor;
      width: 22%;
      height: 22%;
    }
  }
}


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

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

@mixin skeleton-color() {
  background: linear-gradient(
    90deg,
    getCssVar('skeleton-color') 25%,
    getCssVar('skeleton-to-color') 37%,
    getCssVar('skeleton-color') 63%
  );
  background-size: 400% 100%;
  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
}

@keyframes #{$namespace}-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@include b(skeleton) {
  width: 100%;
  @each $unit in (first-line, paragraph) {
    @include e($unit) {
      height: 16px;
      margin-top: 16px;
      background: getCssVar('skeleton-color');
    }
  }

  @include when(animated) {
    .#{$namespace}-skeleton__item {
      @include skeleton-color();
    }
  }
}


code:
@use 'sass:map';

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

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

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

@include b(slider) {
  width: 100%;
  height: map.get($slider-height, 'default');
  display: flex;
  align-items: center;

  @include e(runway) {
    flex: 1;
    height: getCssVar('slider-height');
    background-color: getCssVar('slider-runway-bg-color');
    border-radius: getCssVar('slider-border-radius');
    position: relative;
    cursor: pointer;

    &.show-input {
      margin-right: 30px;
      width: auto;
    }

    &.is-disabled {
      cursor: default;

      .#{$namespace}-slider__bar {
        background-color: getCssVar('slider-disabled-color');
      }

      .#{$namespace}-slider__button {
        border-color: getCssVar('slider-disabled-color');
      }

      .#{$namespace}-slider__button-wrapper {
        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }

      .#{$namespace}-slider__button {
        &:hover,
        &.hover,
        &.dragging {
          transform: scale(1);
        }

        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }
    }
  }

  @include e(input) {
    flex-shrink: 0;
    width: 130px;
  }

  @include e(bar) {
    height: getCssVar('slider-height');
    background-color: getCssVar('slider-main-bg-color');
    border-top-left-radius: getCssVar('slider-border-radius');
    border-bottom-left-radius: getCssVar('slider-border-radius');
    position: absolute;
  }

  @include e(button-wrapper) {
    height: getCssVar('slider-button-wrapper-size');
    width: getCssVar('slider-button-wrapper-size');
    position: absolute;
    z-index: 1;
    top: getCssVar('slider-button-wrapper-offset');
    transform: translateX(-50%);
    background-color: transparent;
    text-align: center;
    user-select: none;
    line-height: normal;
    outline: none;
    @include utils-vertical-center;

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  @include e(button) {
    display: inline-block;
    width: getCssVar('slider-button-size');
    height: getCssVar('slider-button-size');
    vertical-align: middle;
    border: solid 2px getCssVar('slider-main-bg-color');
    background-color: getCssVar('color-white');
    border-radius: 50%;
    box-sizing: border-box;
    transition: getCssVar('transition-duration-fast');
    user-select: none;

    &:hover,
    &.hover,
    &.dragging {
      transform: scale(1.2);
    }

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  @include e(stop) {
    position: absolute;
    height: getCssVar('slider-height');
    width: getCssVar('slider-height');
    border-radius: getCssVar('border-radius-circle');
    background-color: getCssVar('slider-stop-bg-color');
    transform: translateX(-50%);
  }

  @include e(marks) {
    top: 0;
    left: 12px;
    width: 18px;
    height: 100%;

    @include e(marks-text) {
      position: absolute;
      transform: translateX(-50%);
      font-size: 14px;
      color: getCssVar('color-info');
      margin-top: 15px;
      white-space: pre;
    }
  }

  @include when(vertical) {
    position: relative;
    display: inline-flex;
    width: auto;
    height: 100%;
    flex: 0;

    .#{$namespace}-slider__runway {
      width: getCssVar('slider-height');
      height: 100%;
      margin: 0 16px;
    }
    .#{$namespace}-slider__bar {
      width: getCssVar('slider-height');
      height: auto;
      border-radius: 0 0 3px 3px;
    }
    .#{$namespace}-slider__button-wrapper {
      top: auto;
      left: getCssVar('slider-button-wrapper-offset');
      transform: translateY(50%);
    }
    .#{$namespace}-slider__stop {
      transform: translateY(50%);
    }

    @include e(marks-text) {
      margin-top: 0;
      left: 15px;
      transform: translateY(50%);
    }
  }

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


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

@include b(space) {
  display: inline-flex;
  vertical-align: top;

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

    & > * {
      flex: 1;
    }
  }

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


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

@include b(time-spinner) {
  width: 100%;
  white-space: nowrap;
}

@include b(spinner) {
  display: inline-block;
  vertical-align: middle;
}
@include b(spinner-inner) {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;

  & .path {
    stroke: getCssVar('border-color', 'lighter');
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}


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

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

  @include e(head) {
    font-weight: getCssVar('statistic-title-font-weight');
    font-size: getCssVar('statistic-title-font-size');
    color: getCssVar('statistic-title-color');
    line-height: 20px;
    margin-bottom: 4px;
  }

  @include e(content) {
    font-weight: getCssVar('statistic-content-font-weight');
    font-size: getCssVar('statistic-content-font-size');
    color: getCssVar('statistic-content-color');

    @include e(value) {
      display: inline-block;
    }

    @include e(prefix) {
      margin-right: 4px;
      display: inline-block;
    }

    @include e(suffix) {
      margin-left: 4px;
      display: inline-block;
    }
  }
}


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

@include b(step) {
  position: relative;
  flex-shrink: 1;

  @include pseudo(last-of-type) {
    @include e(line) {
      display: none;
    }

    // 只有未设置 space 的情况下才自适应宽度
    @include when(flex) {
      flex-basis: auto !important;
      flex-shrink: 0;
      flex-grow: 0;
    }

    @include e((main, description)) {
      padding-right: 0;
    }
  }

  @include e(head) {
    position: relative;
    width: 100%;

    @include when(process) {
      color: getCssVar('text-color', 'primary');
      border-color: getCssVar('text-color', 'primary');
    }

    @include when(wait) {
      color: getCssVar('text-color', 'placeholder');
      border-color: getCssVar('text-color', 'placeholder');
    }

    @include when(success) {
      color: getCssVar('color-success');
      border-color: getCssVar('color-success');
    }

    @include when(error) {
      color: getCssVar('color-danger');
      border-color: getCssVar('color-danger');
    }

    @include when(finish) {
      color: getCssVar('color-primary');
      border-color: getCssVar('color-primary');
    }
  }

  @include e(icon) {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    background: getCssVar('bg-color');
    transition: 0.15s ease-out;

    @include when(text) {
      border-radius: 50%;
      border: 2px solid;
      border-color: inherit;
    }

    @include when(icon) {
      width: 40px;
    }
  }

  @include e(icon-inner) {
    display: inline-block;
    user-select: none;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    color: inherit;

    &[class*='#{$namespace}-icon']:not(.is-status) {
      font-size: 25px;
      font-weight: normal;
    }

    // 组件自身表示状态的图标
    @include when(status) {
      transform: translateY(1px);
    }
  }

  @include e(line) {
    position: absolute;
    border-color: inherit;
    background-color: getCssVar('text-color', 'placeholder');
  }

  @include e(line-inner) {
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    transition: 0.15s ease-out;
    box-sizing: border-box;
    width: 0;
    height: 0;
  }

  @include e(main) {
    white-space: normal;
    text-align: left;
  }

  @include e(title) {
    font-size: 16px;
    line-height: 38px;

    @include when(process) {
      font-weight: bold;
      color: getCssVar('text-color', 'primary');
    }

    @include when(wait) {
      color: getCssVar('text-color', 'placeholder');
    }

    @include when(success) {
      color: getCssVar('color-success');
    }

    @include when(error) {
      color: getCssVar('color-danger');
    }

    @include when(finish) {
      color: getCssVar('color-primary');
    }
  }

  @include e(description) {
    padding-right: 10%;
    margin-top: -5px;
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;

    @include when(process) {
      color: getCssVar('text-color', 'primary');
    }

    @include when(wait) {
      color: getCssVar('text-color', 'placeholder');
    }

    @include when(success) {
      color: getCssVar('color-success');
    }

    @include when(error) {
      color: getCssVar('color-danger');
    }

    @include when(finish) {
      color: getCssVar('color-primary');
    }
  }

  @include when(horizontal) {
    display: inline-block;

    @include e(line) {
      height: 2px;
      top: 11px;
      left: 0;
      right: 0;
    }
  }

  @include when(vertical) {
    display: flex;

    @include e(head) {
      flex-grow: 0;
      width: 24px;
    }

    @include e(main) {
      padding-left: 10px;
      flex-grow: 1;
    }

    @include e(title) {
      line-height: 24px;
      padding-bottom: 8px;
    }

    @include e(line) {
      width: 2px;
      top: 0;
      bottom: 0;
      left: 11px;
    }

    @include e(icon) {
      @include when(icon) {
        width: 24px;
      }
    }
  }

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

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

    @include e(description) {
      padding-left: 20%;
      padding-right: 20%;
    }

    @include e(line) {
      left: 50%;
      right: -50%;
    }
  }

  @include when(simple) {
    display: flex;
    align-items: center;

    @include e(head) {
      width: auto;
      font-size: 0;
      padding-right: 10px;
    }

    @include e(icon) {
      background: transparent;
      width: 16px;
      height: 16px;
      font-size: 12px;
    }

    @include e(icon-inner) {
      &[class*='#{$namespace}-icon']:not(.is-status) {
        font-size: 18px;
      }

      &.is-status {
        transform: scale(0.8) translateY(1px);
      }
    }

    @include e(main) {
      position: relative;
      display: flex;
      align-items: stretch;
      flex-grow: 1;
    }

    @include e(title) {
      font-size: 16px;
      line-height: 20px;
    }

    @include pseudo('not(:last-of-type)') {
      @include e(title) {
        max-width: 50%;
        overflow-wrap: break-word;
      }
    }

    @include e(arrow) {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before,
      &::after {
        content: '';
        display: inline-block;
        position: absolute;
        height: 15px;
        width: 1px;
        background: getCssVar('text-color', 'placeholder');
      }

      &::before {
        transform: rotate(-45deg) translateY(-4px);
        transform-origin: 0 0;
      }

      &::after {
        transform: rotate(45deg) translateY(4px);
        transform-origin: 100% 100%;
      }
    }

    @include pseudo(last-of-type) {
      @include e(arrow) {
        display: none;
      }
    }
  }
}


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

@include b(steps) {
  display: flex;

  @include m(simple) {
    padding: 13px 8%;
    border-radius: 4px;
    background: getCssVar('fill-color', 'light');
  }

  @include m(horizontal) {
    white-space: nowrap;
  }

  @include m(vertical) {
    height: 100%;
    flex-flow: column;
  }
}


code:
@use 'sass:map';

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

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

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

$switch-core-border-radius: () !default;
$switch-core-border-radius: map.merge(
  (
    'large': 12px,
    'default': 10px,
    'small': 8px,
  ),
  $switch-core-border-radius
);

$switch-core-width: () !default;
$switch-core-width: map.merge(
  (
    'large': 50px,
    'default': 40px,
    'small': 30px,
  ),
  $switch-core-width
);

$switch-core-height: () !default;
$switch-core-height: map.merge(
  (
    'large': 24px,
    'default': 20px,
    'small': 16px,
  ),
  $switch-core-height
);

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

$switch-content-padding: () !default;
$switch-content-padding: map.merge(
  (
    'large': 6px,
    'default': 4px,
    'small': 2px,
  ),
  $switch-content-padding
);

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

@include b(switch) {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: map.get($switch-font-size, 'default');
  line-height: map.get($switch-core-height, 'default');
  height: map.get($switch-height, 'default');
  vertical-align: middle;

  @include when(disabled) {
    & .#{$namespace}-switch__core,
    & .#{$namespace}-switch__label {
      cursor: not-allowed;
    }
  }

  @include e(label) {
    transition: getCssVar('transition-duration-fast');
    height: map.get($switch-core-height, 'default');
    display: inline-block;
    font-size: map.get($switch-font-size, 'default');
    font-weight: 500;
    cursor: pointer;
    vertical-align: middle;
    color: getCssVar('text-color', 'primary');

    @include when(active) {
      color: getCssVar('color-primary');
    }

    @include m(left) {
      margin-right: 10px;
    }
    @include m(right) {
      margin-left: 10px;
    }
    & * {
      line-height: 1;
      font-size: map.get($switch-font-size, 'default');
      display: inline-block;
    }
    .#{$namespace}-icon {
      height: inherit;

      svg {
        vertical-align: middle;
      }
    }
  }

  @include e(input) {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;

    &:focus-visible {
      & ~ .#{$namespace}-switch__core {
        outline: 2px solid getCssVar('switch-on-color');
        outline-offset: 1px;
      }
    }
  }

  @include e(core) {
    display: inline-flex;
    position: relative;
    align-items: center;
    min-width: map.get($switch-core-width, 'default');
    height: map.get($switch-core-height, 'default');
    border: 1px solid
      var(
        #{getCssVarName('switch-border-color')},
        #{getCssVar('switch-off-color')}
      );
    outline: none;
    border-radius: map.get($switch-core-border-radius, 'default');
    box-sizing: border-box;
    background: getCssVar('switch-off-color');
    cursor: pointer;
    transition: border-color getCssVar('transition-duration'),
      background-color getCssVar('transition-duration');

    .#{$namespace}-switch__inner {
      width: 100%;
      transition: all getCssVar('transition-duration');
      height: map.get($switch-button-size, 'default');
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
              $switch-button-size,
              'default'
            )} + 2px);

      .is-icon,
      .is-text {
        font-size: 12px;
        color: getCssVar('color-white');
        user-select: none;
        @include utils-ellipsis;
      }
    }

    .#{$namespace}-switch__action {
      position: absolute;
      left: 1px;
      border-radius: getCssVar('border-radius-circle');
      transition: all getCssVar('transition-duration');
      width: map.get($switch-button-size, 'default');
      height: map.get($switch-button-size, 'default');
      background-color: getCssVar('color-white');
      display: flex;
      justify-content: center;
      align-items: center;
      color: getCssVar('switch-off-color');
    }
  }

  @include when(checked) {
    .#{$namespace}-switch__core {
      border-color: var(
        #{getCssVarName('switch-border-color')},
        #{getCssVar('switch-on-color')}
      );
      background-color: getCssVar('switch-on-color');

      .#{$namespace}-switch__action {
        left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
        color: getCssVar('switch-on-color');
      }

      .#{$namespace}-switch__inner {
        padding: 0 calc(#{map.get($switch-button-size, 'default')} + 2px) 0 #{map.get(
            $switch-content-padding,
            'default'
          )};
      }
    }
  }

  @include when(disabled) {
    opacity: 0.6;
  }

  @include m(wide) {
    .#{$namespace}-switch__label {
      &.#{$namespace}-switch__label--left {
        span {
          left: 10px;
        }
      }

      &.#{$namespace}-switch__label--right {
        span {
          right: 10px;
        }
      }
    }
  }

  & .label-fade-enter-from,
  & .label-fade-leave-active {
    opacity: 0;
  }

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

      @include e(label) {
        height: map.get($switch-core-height, $size);
        font-size: map.get($switch-font-size, $size);

        & * {
          font-size: map.get($switch-font-size, $size);
        }
      }

      @include e(core) {
        min-width: map.get($switch-core-width, $size);
        height: map.get($switch-core-height, $size);
        border-radius: map.get($switch-core-border-radius, $size);

        .#{$namespace}-switch__inner {
          height: map.get($switch-button-size, $size);
          padding: 0 #{map.get($switch-content-padding, $size)} 0 calc(#{map.get(
                  $switch-button-size,
                  $size
                )} + 2px);
        }

        .#{$namespace}-switch__action {
          width: map.get($switch-button-size, $size);
          height: map.get($switch-button-size, $size);
        }
      }

      @include when(checked) {
        .#{$namespace}-switch__core {
          .#{$namespace}-switch__action {
            left: calc(100% - #{map.get($switch-button-size, $size) + 1px});
          }

          .#{$namespace}-switch__inner {
            padding: 0 calc(#{map.get($switch-button-size, $size)} + 2px) 0 #{map.get(
                $switch-content-padding,
                $size
              )};
          }
        }
      }
    }
  }
}


code:
@use 'sass:map';

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

@include b(table-column) {
  @include m(selection) {
    .cell {
      padding-left: 14px;
      padding-right: 14px;
    }
  }
}

@include b(table-filter) {
  border: solid 1px getCssVar('border-color-lighter');
  border-radius: 2px;
  background-color: $color-white;
  box-shadow: map.get($dropdown, 'menu-box-shadow');
  box-sizing: border-box;

  /** used for dropdown mode */
  @include e(list) {
    padding: 5px 0;
    margin: 0;
    list-style: none;
    min-width: 100px;
  }

  @include e(list-item) {
    line-height: 36px;
    padding: 0 10px;
    cursor: pointer;
    font-size: getCssVar('font-size', 'base');

    &:hover {
      background-color: map.get($dropdown, 'menuItem-hover-fill');
      color: map.get($dropdown, 'menuItem-hover-color');
    }

    @include when(active) {
      background-color: getCssVar('color-primary');
      color: $color-white;
    }
  }

  @include e(content) {
    min-width: 100px;
  }

  @include e(bottom) {
    border-top: 1px solid getCssVar('border-color-lighter');
    padding: 8px;

    button {
      background: transparent;
      border: none;
      color: getCssVar('text-color', 'regular');
      cursor: pointer;
      font-size: getCssVar('font-size-small');
      padding: 0 3px;

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

      &:focus {
        outline: none;
      }

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

  @include e(wrap) {
    max-height: 280px;
  }

  @include e(checkbox-group) {
    padding: 10px;

    label.#{$namespace}-checkbox {
      display: flex;
      align-items: center;
      margin-right: 5px;
      margin-bottom: 12px;
      margin-left: 5px;
      height: unset;
    }

    .#{$namespace}-checkbox:last-child {
      margin-bottom: 0;
    }
  }
}


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

@mixin center-flex() {
  display: flex;
  align-items: center;
}

@mixin cell-padding() {
  padding: 0 8px;
}

@mixin safe-padding() {
  padding-inline-end: getCssVar('table-scrollbar-size');
}

@mixin cell-alignment() {
  @include when('align-center') {
    justify-content: center;
    text-align: center;
  }

  @include when('align-right') {
    justify-content: flex-end;
    text-align: right;
  }
}

@mixin table-root() {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  overflow: hidden;
  top: 0;
  background-color: getCssVar('bg', 'color');
}

@mixin hidden-scrollbar {
  .#{$namespace}-virtual-scrollbar {
    opacity: 0;
  }

  .#{$namespace}-vl__vertical,
  .#{$namespace}-vl__horizontal {
    z-index: -1;
  }
}

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

@include b('table-v2') {
  font-size: 14px;

  * {
    box-sizing: border-box;
  }

  @include e('root') {
    position: relative;

    // for showing the scrollbar when mouse is on the root table
    &:hover {
      @include e('main') {
        .#{$namespace}-virtual-scrollbar {
          opacity: 1;
        }
      }
    }
  }

  @include e('main') {
    @include table-root;
    left: 0;

    .#{$namespace}-vl__horizontal,
    .#{$namespace}-vl__vertical {
      z-index: 2;
    }
  }

  @include e('left') {
    @include table-root;
    left: 0;
    box-shadow: 2px 0 4px 0 rgb(0 0 0 / 6%);
    @include hidden-scrollbar;
  }

  @include e('right') {
    @include table-root;
    right: 0;
    box-shadow: -2px 0 4px 0 rgb(0 0 0 / 6%);
    @include hidden-scrollbar;

    @include e('header-row') {
      @include safe-padding;
    }

    @include e('row') {
      @include safe-padding;
    }
  }

  @include e('header-wrapper') {
    overflow: hidden;
  }

  @include e('header') {
    position: relative;
    overflow: hidden;

    .#{$namespace}-checkbox {
      z-index: 0;
    }
  }

  @include e('footer') {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  @include e('empty') {
    position: absolute;
    left: 0;
  }

  @include e('overlay') {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
  }

  @include e('header-row') {
    display: flex;
    border-bottom: getCssVar('table', 'border');

    @include e('header-cell') {
      height: 100%;
      user-select: none;
      overflow: hidden;
      background-color: getCssVar('table-header', 'bg-color');
      color: getCssVar('table-header', 'text-color');
      font-weight: bold;
      @include center-flex;
      @include cell-padding;
      @include cell-alignment;

      @include when(sortable) {
        cursor: pointer;
      }

      &:hover {
        .#{$namespace}-icon {
          display: block;
        }
      }
    }

    @include e('sort-icon') {
      transition: opacity, display getCssVar('transition-duration', '');
      opacity: 0.6;
      display: none;

      @include when(sorting) {
        display: block;
        opacity: 1;
      }
    }
  }

  @include e('row') {
    border-bottom: getCssVar('table', 'border');

    @include center-flex;
    transition: background-color getCssVar('transition-duration', '');

    @include when('hovered') {
      background-color: getCssVar('table-row', 'hover-bg-color');
    }

    &:hover {
      background-color: getCssVar('table-row', 'hover-bg-color');
    }

    @include e('row-cell') {
      height: 100%;
      overflow: hidden;
      @include center-flex;
      @include cell-padding;
      @include cell-alignment;
    }

    @include e('expand-icon') {
      margin: 0 4px;
      cursor: pointer;
      user-select: none;

      svg {
        transition: transform getCssVar('transition-duration', '');
      }

      @include when(expanded) {
        svg {
          transform: rotate(90deg);
        }
      }
    }
  }

  &:not(.is-dynamic) {
    @include e('cell-text') {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @include when(dynamic) {
    @include e('row') {
      overflow: hidden;
      align-items: stretch;

      @include e('row-cell') {
        overflow-wrap: break-word;
      }
    }
  }
}


code:
@use 'sass:map';

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

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

@include b(table) {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: fit-content;
  width: 100%;
  max-width: 100%;
  background-color: getCssVar('table-bg-color');
  font-size: 14px;
  color: getCssVar('table-text-color');

  @include e(inner-wrapper) {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    // 表格底部伪 border，总是有的
    &::before {
      @include extend-rule(border-pseudo);
      left: 0;
      bottom: 0;
      height: 1px;
    }
  }

  tbody {
    &:focus-visible {
      outline: none;
    }
  }

  &.has-footer {
    &.#{$namespace}-table--scrollable-y,
    &.#{$namespace}-table--fluid-height {
      tr:last-child td.#{$namespace}-table__cell {
        border-bottom-color: transparent;
      }
    }
  }

  // when data is empty
  @include e(empty-block) {
    position: sticky;
    left: 0;
    min-height: 60px;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(empty-text) {
    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
    // set empty text line height up to contrainer min-height as workaround.
    line-height: 60px;
    width: 50%;
    color: getCssVar('text-color', 'secondary');
  }

  // expand the row
  @include e(expand-column) {
    .cell {
      padding: 0;
      text-align: center;
      user-select: none;
    }
  }

  @include e(expand-icon) {
    position: relative;
    cursor: pointer;
    color: getCssVar('text-color', 'regular');
    font-size: 12px;
    transition: transform getCssVar('transition-duration-fast') ease-in-out;
    height: 20px;

    @include m(expanded) {
      transform: rotate(90deg);
    }

    > .#{$namespace}-icon {
      font-size: 12px;
    }
  }

  @include e(expanded-cell) {
    background-color: getCssVar('table-expanded-cell-bg-color');

    // increase the weight purely
    &[class*='cell'] {
      padding: 20px 50px;
    }

    &:hover {
      background-color: transparent !important;
    }
  }

  @include e(placeholder) {
    display: inline-block;
    width: 20px;
  }

  @include e(append-wrapper) {
    // avoid overlapping margin https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
    overflow: hidden;
  }

  @include m(fit) {
    border-right: 0;
    border-bottom: 0;

    .#{$namespace}-table__cell.gutter {
      border-right-width: 1px;
    }

    @include e(inner-wrapper) {
      &::before {
        width: 100%;
      }
    }
  }

  thead {
    color: getCssVar('table-header-text-color');

    th {
      font-weight: 600;
    }

    &.is-group {
      th.#{$namespace}-table__cell {
        background: getCssVar('fill-color', 'light');
      }
    }
  }

  .#{$namespace}-table__cell {
    padding: map.get($table-padding, 'default');
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    z-index: getCssVar('table-index');

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

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

    &.gutter {
      width: 15px;
      border-right-width: 0;
      border-bottom-width: 0;
      padding: 0;
    }

    &.is-hidden {
      > * {
        visibility: hidden;
      }
    }
  }

  .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 23px;
    padding: 0 12px;

    &.#{$namespace}-tooltip {
      white-space: nowrap;
      min-width: 50px;
    }
  }

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

      .#{$namespace}-table__cell {
        padding: map.get($table-padding, $size);
      }

      .cell {
        padding: map.get($table-cell-padding, $size);
      }
    }
  }

  tr {
    background-color: getCssVar('table-tr-bg-color');

    input[type='checkbox'] {
      margin: 0;
    }
  }

  th.#{$namespace}-table__cell.is-leaf,
  td.#{$namespace}-table__cell {
    border-bottom: getCssVar('table-border');
  }

  th.#{$namespace}-table__cell.is-sortable {
    cursor: pointer;
  }

  th.#{$namespace}-table__cell {
    background-color: getCssVar('table-header-bg-color');

    > .cell.highlight {
      color: getCssVar('color-primary');
    }

    &.required > div::before {
      display: inline-block;
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff4d51;
      margin-right: 5px;
      vertical-align: middle;
    }
  }

  td.#{$namespace}-table__cell {
    div {
      box-sizing: border-box;
    }

    &.gutter {
      width: 0;
    }
  }

  // 拥有多级表头
  @include m((group, border)) {
    @include share-rule(border-pseudo) {
      content: '';
      position: absolute;
      background-color: getCssVar('table-border-color');
      z-index: calc(getCssVar('table-index') + 2);
    }
  }

  // table--border
  @include m(border) {
    @include e(inner-wrapper) {
      &::after {
        @include extend-rule(border-pseudo);
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        z-index: calc(getCssVar('table-index') + 2);
      }
    }

    &::before {
      @include extend-rule(border-pseudo);
      top: -1px;
      left: 0;
      width: 1px;
      height: 100%;
    }

    &::after {
      @include extend-rule(border-pseudo);
      top: -1px;
      right: 0;
      width: 1px;
      height: 100%;
    }

    @include e(inner-wrapper) {
      border-right: none;
      border-bottom: none;
    }

    @include e(footer-wrapper) {
      position: relative;
      flex-shrink: 0;
    }

    .#{$namespace}-table__cell {
      border-right: getCssVar('table-border');
    }

    th.#{$namespace}-table__cell.gutter:last-of-type {
      border-bottom: getCssVar('table-border');
      border-bottom-width: 1px;
    }

    & th.#{$namespace}-table__cell {
      border-bottom: getCssVar('table-border');
    }
  }

  @include m(hidden) {
    visibility: hidden;
  }

  @include e((header-wrapper, body-wrapper, footer-wrapper)) {
    width: 100%;

    tr {
      td,
      th {
        &.#{$namespace}-table-fixed-column--left,
        &.#{$namespace}-table-fixed-column--right {
          position: sticky !important;
          background: inherit;
          z-index: calc(getCssVar('table-index') + 1);

          &.is-last-column,
          &.is-first-column {
            &::before {
              content: '';
              position: absolute;
              top: 0px;
              width: 10px;
              bottom: -1px;
              overflow-x: hidden;
              overflow-y: hidden;
              box-shadow: none;
              touch-action: none;
              pointer-events: none;
            }
          }

          &.is-first-column {
            &::before {
              left: -10px;
            }
          }

          &.is-last-column {
            &::before {
              right: -10px;
              box-shadow: none;
            }
          }
        }

        &.#{$namespace}-table__fixed-right-patch {
          position: sticky !important;
          z-index: calc(getCssVar('table-index') + 1);
          background: #fff;
          right: 0;
        }
      }
    }
  }

  @include e(header-wrapper) {
    flex-shrink: 0;

    tr {
      th {
        &.#{$namespace}-table-fixed-column--left,
        &.#{$namespace}-table-fixed-column--right {
          background-color: getCssVar('table-header-bg-color');
        }
      }
    }
  }

  @include e((header, body, footer)) {
    table-layout: fixed;
    border-collapse: separate;
  }

  @include e((header-wrapper)) {
    overflow: hidden;

    & tbody td.#{$namespace}-table__cell {
      background-color: getCssVar('table-row-hover-bg-color');
      color: getCssVar('table-text-color');
    }
  }

  @include e((footer-wrapper)) {
    overflow: hidden;
    flex-shrink: 0;

    tfoot td.#{$namespace}-table__cell {
      background-color: getCssVar('table-row-hover-bg-color');
      color: getCssVar('table-text-color');
    }
  }

  @include e((header-wrapper, body-wrapper)) {
    .#{$namespace}-table-column--selection {
      > .cell {
        display: inline-flex;
        align-items: center;
        height: 23px;
      }

      .#{$namespace}-checkbox {
        height: unset;
      }
    }
  }

  @include when(scrolling-left) {
    .#{$namespace}-table-fixed-column--right.is-first-column {
      &::before {
        box-shadow: getCssVar('table-fixed-right-column');
      }
    }

    &.#{$namespace}-table--border {
      .#{$namespace}-table-fixed-column--left {
        &.is-last-column {
          &.#{$namespace}-table__cell {
            border-right: getCssVar('table-border');
          }
        }
      }
    }

    th.#{$namespace}-table-fixed-column--left {
      background-color: getCssVar('table-header-bg-color');
    }
  }

  @include when(scrolling-right) {
    .#{$namespace}-table-fixed-column--left.is-last-column {
      &::before {
        box-shadow: getCssVar('table-fixed-left-column');
      }
    }

    .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
      border-right: none;
    }

    th.#{$namespace}-table-fixed-column--right {
      background-color: getCssVar('table-header-bg-color');
    }
  }

  @include when(scrolling-middle) {
    .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
      border-right: none;
    }

    .#{$namespace}-table-fixed-column--right.is-first-column {
      &::before {
        box-shadow: getCssVar('table-fixed-right-column');
      }
    }

    .#{$namespace}-table-fixed-column--left.is-last-column {
      &::before {
        box-shadow: getCssVar('table-fixed-left-column');
      }
    }
  }

  @include when(scrolling-none) {
    .#{$namespace}-table-fixed-column--left,
    .#{$namespace}-table-fixed-column--right {
      &.is-first-column,
      &.is-last-column {
        &::before {
          box-shadow: none;
        }
      }
    }

    th.#{$namespace}-table-fixed-column--left,
    th.#{$namespace}-table-fixed-column--right {
      background-color: getCssVar('table-header-bg-color');
    }
  }

  @include e(body-wrapper) {
    overflow: hidden;
    position: relative;
    flex: 1;

    .#{$namespace}-scrollbar__bar {
      z-index: calc(getCssVar('table-index') + 2);
    }
  }

  .caret-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 14px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
  }

  .sort-caret {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    position: absolute;
    left: 7px;

    &.ascending {
      border-bottom-color: getCssVar('text-color', 'placeholder');
      top: -5px;
    }

    &.descending {
      border-top-color: getCssVar('text-color', 'placeholder');
      bottom: -3px;
    }
  }

  .ascending .sort-caret.ascending {
    border-bottom-color: getCssVar('color-primary');
  }

  .descending .sort-caret.descending {
    border-top-color: getCssVar('color-primary');
  }

  .hidden-columns {
    visibility: hidden;
    position: absolute;
    z-index: -1;
  }

  @include m(striped) {
    & .#{$namespace}-table__body {
      & tr.#{$namespace}-table__row--striped {
        td.#{$namespace}-table__cell {
          background: getCssVar('fill-color', 'lighter');
        }

        &.current-row td.#{$namespace}-table__cell {
          background-color: getCssVar('table-current-row-bg-color');
        }
      }
    }
  }

  @include e(body) {
    tr.hover-row {
      &,
      &.#{$namespace}-table__row--striped {
        &,
        &.current-row {
          > td.#{$namespace}-table__cell {
            background-color: getCssVar('table-row-hover-bg-color');
          }
        }
      }
    }

    tr > td.hover-cell {
      background-color: getCssVar('table-row-hover-bg-color');
    }

    tr.current-row > td.#{$namespace}-table__cell {
      background-color: getCssVar('table-current-row-bg-color');
    }
  }

  &.#{$namespace}-table--scrollable-y {
    @include e(body-header) {
      position: sticky;
      top: 0;
      z-index: calc(getCssVar('table-index') + 2);
    }

    @include e(body-footer) {
      position: sticky;
      bottom: 0;
      z-index: calc(getCssVar('table-index') + 2);
    }
  }

  @include e(column-resize-proxy) {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: getCssVar('table-border');
    z-index: calc(getCssVar('table-index') + 9);
  }

  @include e(column-filter-trigger) {
    display: inline-block;
    cursor: pointer;

    & i {
      color: getCssVar('color-info');
      font-size: 14px;
      vertical-align: middle;
    }
  }

  @include e(border-left-patch) {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    z-index: calc(getCssVar('table-index') + 2);
    position: absolute;
    background-color: getCssVar('table-border-color');
  }

  @include e(border-bottom-patch) {
    left: 0;
    height: 1px;
    z-index: calc(getCssVar('table-index') + 2);
    position: absolute;
    background-color: getCssVar('table-border-color');
  }

  @include e(border-right-patch) {
    top: 0;
    height: 100%;
    width: 1px;
    z-index: calc(getCssVar('table-index') + 2);
    position: absolute;
    background-color: getCssVar('table-border-color');
  }

  @include m(enable-row-transition) {
    .#{$namespace}-table__body td.#{$namespace}-table__cell {
      transition: background-color 0.25s ease;
    }
  }

  @include m(enable-row-hover) {
    .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
      background-color: getCssVar('table-row-hover-bg-color');
    }
  }

  [class*='#{$namespace}-table__row--level'] {
    .#{$namespace}-table__expand-icon {
      display: inline-block;
      width: 12px;
      line-height: 12px;
      height: 12px;
      text-align: center;
      margin-right: 8px;
    }
  }

  @include b(table) {
    &.#{$namespace}-table--border {
      .#{$namespace}-table__cell {
        border-right: getCssVar('table-border');
      }
    }
  }

  &:not(.#{$namespace}-table--border) {
    .#{$namespace}-table__cell {
      border-right: none;
    }

    > .#{$namespace}-table__inner-wrapper {
      &::after {
        content: none;
      }
    }
  }
}


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

@include b(tabs) {
  @include set-component-css-var('tabs', $tabs);
  display: flex;

  @include e(header) {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  @include e(header-vertical) {
    flex-direction: column;
  }
  @include e(active-bar) {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: getCssVar('color-primary');
    z-index: 1;
    transition: width getCssVar('transition-duration')
        getCssVar('transition-function-ease-in-out-bezier'),
      transform getCssVar('transition-duration')
        getCssVar('transition-function-ease-in-out-bezier');
    list-style: none;
  }
  @include e(new-tab) {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid getCssVar('border-color');
    height: 20px;
    width: 20px;
    line-height: 20px;
    margin: 10px 0 10px 10px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    color: getCssVar('text-color', 'primary');
    cursor: pointer;
    transition: all 0.15s;

    .is-icon-plus {
      height: inherit;
      width: inherit;
      transform: scale(0.8, 0.8);

      svg {
        vertical-align: middle;
      }
    }

    &:hover {
      color: getCssVar('color-primary');
    }
  }
  @include e(new-tab-vertical) {
    margin-left: 0;
  }
  @include e(nav-wrap) {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
    flex: 1 auto;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: getCssVar('border-color-light');
      z-index: getCssVar('index-normal');
    }

    @include when(scrollable) {
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
  @include e(nav-scroll) {
    overflow: hidden;
  }
  @include e((nav-next, nav-prev)) {
    position: absolute;
    cursor: pointer;
    line-height: 44px;
    font-size: 12px;
    color: getCssVar('text-color', 'secondary');
    width: 20px;
    text-align: center;
  }
  @include e(nav-next) {
    right: 0;
  }
  @include e(nav-prev) {
    left: 0;
  }
  @include e(nav) {
    display: flex;
    white-space: nowrap;
    position: relative;
    transition: transform getCssVar('transition-duration');
    float: left;
    z-index: calc(#{getCssVar('index-normal')} + 1);

    @include when(stretch) {
      min-width: 100%;
      display: flex;
      & > * {
        flex: 1;
        text-align: center;
      }
    }
  }
  @include e(item) {
    padding: 0 20px;
    height: getCssVar('tabs', 'header-height');
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    font-size: getCssVar('font-size-base');
    font-weight: 500;
    color: getCssVar('text-color', 'primary');
    position: relative;

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

    &:focus-visible {
      box-shadow: 0 0 2px 2px getCssVar('color-primary') inset;
      border-radius: 3px;
    }

    & .is-icon-close {
      border-radius: 50%;
      text-align: center;
      transition: all getCssVar('transition-duration')
        getCssVar('transition-function-ease-in-out-bezier');
      margin-left: 5px;

      &:before {
        transform: scale(0.9);
        display: inline-block;
      }

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

    @include when(active) {
      color: getCssVar('color-primary');
    }

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

    @include when(disabled) {
      color: getCssVar('disabled-text-color');
      cursor: not-allowed;
    }
  }
  @include e(content) {
    overflow: hidden;
    position: relative;
    flex-grow: 1;
  }
  @include m((top, bottom)) {
    > .#{$namespace}-tabs__header {
      .#{$namespace}-tabs__item:nth-child(2) {
        padding-left: 0;
      }
      .#{$namespace}-tabs__item:last-child {
        padding-right: 0;
      }
    }

    &.#{$namespace}-tabs--border-card,
    &.#{$namespace}-tabs--card {
      > .#{$namespace}-tabs__header {
        .#{$namespace}-tabs__item:nth-child(2) {
          padding-left: 20px;
        }
        .#{$namespace}-tabs__item:last-child {
          padding-right: 20px;
        }
      }
    }
  }
  @include m(card) {
    > .#{$namespace}-tabs__header {
      border-bottom: 1px solid getCssVar('border-color-light');
      height: getCssVar('tabs', 'header-height');
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
      content: none;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
      border: 1px solid getCssVar('border-color-light');
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      box-sizing: border-box;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
      display: none;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .is-icon-close {
      position: relative;
      font-size: 12px;
      width: 0;
      height: 14px;
      overflow: hidden;
      right: -2px;
      transform-origin: 100% 50%;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
      border-bottom: 1px solid transparent;
      border-left: 1px solid getCssVar('border-color-light');
      transition: color getCssVar('transition-duration')
          getCssVar('transition-function-ease-in-out-bezier'),
        padding getCssVar('transition-duration')
          getCssVar('transition-function-ease-in-out-bezier');

      &:first-child {
        border-left: none;
      }

      &.is-closable {
        &:hover {
          padding-left: 13px;
          padding-right: 13px;

          & .is-icon-close {
            width: 14px;
          }
        }
      }

      &.is-active {
        border-bottom-color: getCssVar('bg-color');

        &.is-closable {
          padding-left: 20px;
          padding-right: 20px;

          .is-icon-close {
            width: 14px;
          }
        }
      }
    }
  }
  @include m(border-card) {
    background: getCssVar('bg-color', 'overlay');
    border: 1px solid getCssVar('border-color');

    > .#{$namespace}-tabs__content {
      padding: 15px;
    }
    > .#{$namespace}-tabs__header {
      background-color: getCssVar('fill-color', 'light');
      border-bottom: 1px solid getCssVar('border-color-light');
      margin: 0;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
      content: none;
    }
    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
      transition: all getCssVar('transition-duration')
        getCssVar('transition-function-ease-in-out-bezier');
      border: 1px solid transparent;
      margin-top: -1px;
      color: getCssVar('text-color', 'secondary');

      &:first-child {
        margin-left: -1px;
      }

      & + .#{$namespace}-tabs__item {
        margin-left: -1px;
      }

      &.is-active {
        color: getCssVar('color-primary');
        background-color: getCssVar('bg-color', 'overlay');
        border-right-color: getCssVar('border-color');
        border-left-color: getCssVar('border-color');
      }

      &:not(.is-disabled):hover {
        color: getCssVar('color-primary');
      }

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

    > .#{$namespace}-tabs__header
      .is-scrollable
      .#{$namespace}-tabs__item:first-child {
      margin-left: 0;
    }
  }
  @include m(bottom) {
    flex-direction: column;

    .#{$namespace}-tabs__header.is-bottom {
      margin-bottom: 0;
      margin-top: 10px;
    }
    &.#{$namespace}-tabs--border-card {
      .#{$namespace}-tabs__header.is-bottom {
        border-bottom: 0;
        border-top: 1px solid getCssVar('border-color');
      }

      .#{$namespace}-tabs__nav-wrap.is-bottom {
        margin-top: -1px;
        margin-bottom: 0;
      }

      .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
        border: 1px solid transparent;
      }

      .#{$namespace}-tabs__item.is-bottom {
        margin: 0 -1px -1px;
      }
    }
  }
  @include m((left, right)) {
    overflow: hidden;

    .#{$namespace}-tabs__header.is-left,
    .#{$namespace}-tabs__header.is-right,
    .#{$namespace}-tabs__nav-wrap.is-left,
    .#{$namespace}-tabs__nav-wrap.is-right,
    .#{$namespace}-tabs__nav-scroll {
      height: 100%;
    }

    .#{$namespace}-tabs__active-bar.is-left,
    .#{$namespace}-tabs__active-bar.is-right {
      top: 0;
      bottom: auto;
      width: 2px;
      height: auto;
    }

    .#{$namespace}-tabs__nav-wrap.is-left,
    .#{$namespace}-tabs__nav-wrap.is-right {
      margin-bottom: 0;

      > .#{$namespace}-tabs__nav-prev,
      > .#{$namespace}-tabs__nav-next {
        height: 30px;
        line-height: 30px;
        width: 100%;
        text-align: center;
        cursor: pointer;

        i {
          transform: rotateZ(90deg);
        }
      }

      > .#{$namespace}-tabs__nav-prev {
        left: auto;
        top: 0;
      }

      > .#{$namespace}-tabs__nav-next {
        right: auto;
        bottom: 0;
      }

      &.is-scrollable {
        padding: 30px 0;
      }

      &::after {
        height: 100%;
        width: 2px;
        bottom: auto;
        top: 0;
      }
    }

    .#{$namespace}-tabs__nav.is-left,
    .#{$namespace}-tabs__nav.is-right {
      flex-direction: column;
    }

    .#{$namespace}-tabs__item.is-left {
      justify-content: flex-end;
    }

    .#{$namespace}-tabs__item.is-right {
      justify-content: flex-start;
    }
  }
  @include m(left) {
    flex-direction: row-reverse;

    .#{$namespace}-tabs__header.is-left {
      margin-bottom: 0;
      margin-right: 10px;
    }
    .#{$namespace}-tabs__nav-wrap.is-left {
      margin-right: -1px;

      &::after {
        left: auto;
        right: 0;
      }
    }
    .#{$namespace}-tabs__active-bar.is-left {
      right: 0;
      left: auto;
    }
    .#{$namespace}-tabs__item.is-left {
      text-align: right;
    }

    &.#{$namespace}-tabs--card {
      .#{$namespace}-tabs__active-bar.is-left {
        display: none;
      }

      .#{$namespace}-tabs__item.is-left {
        border-left: none;
        border-right: 1px solid getCssVar('border-color-light');
        border-bottom: none;
        border-top: 1px solid getCssVar('border-color-light');
        text-align: left;
      }

      .#{$namespace}-tabs__item.is-left:first-child {
        border-right: 1px solid getCssVar('border-color-light');
        border-top: none;
      }

      .#{$namespace}-tabs__item.is-left.is-active {
        border: 1px solid getCssVar('border-color-light');
        border-right-color: #fff;
        border-left: none;
        border-bottom: none;

        &:first-child {
          border-top: none;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .#{$namespace}-tabs__nav {
        border-radius: 4px 0 0 4px;
        border-bottom: 1px solid getCssVar('border-color-light');
        border-right: none;
      }

      .#{$namespace}-tabs__new-tab {
        float: none;
      }
    }

    &.#{$namespace}-tabs--border-card {
      .#{$namespace}-tabs__header.is-left {
        border-right: 1px solid getCssVar('border-color');
      }

      .#{$namespace}-tabs__item.is-left {
        border: 1px solid transparent;
        margin: -1px 0 -1px -1px;

        &.is-active {
          border-color: transparent;
          border-top-color: rgb(209, 219, 229);
          border-bottom-color: rgb(209, 219, 229);
        }
      }
    }
  }
  @include m(right) {
    .#{$namespace}-tabs__header.is-right {
      margin-bottom: 0;
      margin-left: 10px;
    }

    .#{$namespace}-tabs__nav-wrap.is-right {
      margin-left: -1px;

      &::after {
        left: 0;
        right: auto;
      }
    }

    .#{$namespace}-tabs__active-bar.is-right {
      left: 0;
    }

    &.#{$namespace}-tabs--card {
      .#{$namespace}-tabs__active-bar.is-right {
        display: none;
      }

      .#{$namespace}-tabs__item.is-right {
        border-bottom: none;
        border-top: 1px solid getCssVar('border-color-light');
      }

      .#{$namespace}-tabs__item.is-right:first-child {
        border-left: 1px solid getCssVar('border-color-light');
        border-top: none;
      }

      .#{$namespace}-tabs__item.is-right.is-active {
        border: 1px solid getCssVar('border-color-light');
        border-left-color: #fff;
        border-right: none;
        border-bottom: none;

        &:first-child {
          border-top: none;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .#{$namespace}-tabs__nav {
        border-radius: 0 4px 4px 0;
        border-bottom: 1px solid getCssVar('border-color-light');
        border-left: none;
      }
    }
    &.#{$namespace}-tabs--border-card {
      .#{$namespace}-tabs__header.is-right {
        border-left: 1px solid getCssVar('border-color');
      }

      .#{$namespace}-tabs__item.is-right {
        border: 1px solid transparent;
        margin: -1px -1px -1px 0;

        &.is-active {
          border-color: transparent;
          border-top-color: rgb(209, 219, 229);
          border-bottom-color: rgb(209, 219, 229);
        }
      }
    }
  }
  @include m(top) {
    flex-direction: column-reverse;
  }
}

.slideInRight-transition,
.slideInLeft-transition {
  display: inline-block;
}

.slideInRight-enter {
  animation: slideInRight-enter getCssVar('transition-duration');
}

.slideInRight-leave {
  position: absolute;
  left: 0;
  right: 0;
  animation: slideInRight-leave getCssVar('transition-duration');
}

.slideInLeft-enter {
  animation: slideInLeft-enter getCssVar('transition-duration');
}

.slideInLeft-leave {
  position: absolute;
  left: 0;
  right: 0;
  animation: slideInLeft-leave getCssVar('transition-duration');
}

@keyframes slideInRight-enter {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateX(0);
  }
}

@keyframes slideInRight-leave {
  0% {
    transform-origin: 0 0;
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInLeft-enter {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateX(0);
  }
}

@keyframes slideInLeft-leave {
  0% {
    transform-origin: 0 0;
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(-100%);
    opacity: 0;
  }
}


code:
@use 'sass:map';

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

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

$tag-border-width: 1px;

$tag-icon-span-gap: () !default;
$tag-icon-span-gap: map.merge(
  (
    'large': 8px,
    'default': 6px,
    'small': 4px,
  ),
  $tag-icon-span-gap
);

@function returnVarList($var, $type: 'primary') {
  $list: ('fill-color', 'blank');

  @if $var !=false {
    $list: ('color', $type, $var);
  }

  @return $list;
}

// false mean --el-color-white
@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
  @include css-var-from-global(
    ('tag', 'bg-color'),
    returnVarList($backgroundColorWeight)
  );
  @include css-var-from-global(
    ('tag', 'border-color'),
    returnVarList($borderColorWeight)
  );
  @include css-var-from-global(
    ('tag', 'hover-color'),
    returnVarList($hoverColorWeight)
  );

  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include css-var-from-global(
        ('tag', 'bg-color'),
        returnVarList($backgroundColorWeight, $type)
      );
      @include css-var-from-global(
        ('tag', 'border-color'),
        returnVarList($borderColorWeight, $type)
      );
      @include css-var-from-global(
        ('tag', 'hover-color'),
        returnVarList($hoverColorWeight, $type)
      );
    }
  }
}

@include b(tag) {
  background-color: getCssVar('tag-bg-color');
  border-color: getCssVar('tag-border-color');
  color: getCssVar('tag-text-color');

  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  height: map.get($tag-height, 'default');
  padding: 0 map.get($tag-padding, 'default') - $border-width;

  font-size: getCssVar('tag-font-size');
  line-height: 1;
  border-width: $tag-border-width;
  border-style: solid;
  border-radius: getCssVar('tag-border-radius');
  box-sizing: border-box;
  white-space: nowrap;

  @include set-css-var-value('icon-size', 14px);
  @include genTheme('light-9', 'light-8', '');

  @include when(hit) {
    border-color: getCssVar('color', 'primary');
  }

  @include when(round) {
    border-radius: getCssVar('tag', 'border-radius-rounded');
  }

  .#{$namespace}-tag__close {
    flex-shrink: 0;
    color: getCssVar('tag', 'text-color');

    &:hover {
      color: getCssVar('color-white');
      background-color: getCssVar('tag-hover-color');
    }
  }

  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include css-var-from-global(('tag', 'text-color'), ('color', $type));
    }
  }

  $svg-margin-size: 1px;

  .#{$namespace}-icon {
    border-radius: 50%;
    cursor: pointer;

    font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2});
    height: getCssVar('icon-size');
    width: getCssVar('icon-size');
  }

  .#{$namespace}-tag__close {
    margin-left: map.get($tag-icon-span-gap, 'default');
  }

  @include m(dark) {
    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
    @include genTheme('', '', 'light-3');

    @each $type in $types {
      &.#{bem('tag', '', $type)} {
        @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
      }
    }
  }

  @include m(plain) {
    @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
    @include genTheme(false, 'light-5', '');
  }

  &.is-closable {
    padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
  }

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

      @include set-css-var-value(
        'icon-size',
        #{map.get($tag-icon-size, $size)}
      );

      .#{$namespace}-tag__close {
        margin-left: map.get($tag-icon-span-gap, $size);
      }

      &.is-closable {
        padding-right: map.get($tag-icon-span-gap, $size) - $border-width;
      }
    }
  }

  @include m(small) {
    .#{$namespace}-icon-close {
      transform: scale(0.8);
    }
  }

  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include when(hit) {
        border-color: getCssVar('color', $type);
      }
    }
  }
}


code:
@use 'sass:map';

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

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

@include b(text) {
  align-self: center;
  margin: 0;
  padding: 0;
  font-size: getCssVar('text', 'font-size');
  color: getCssVar('text', 'color');
  overflow-wrap: break-word;

  @include when(truncated) {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  @include when(line-clamp) {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

  @each $type in $types {
    &.#{bem('text', '', $type)} {
      @include css-var-from-global(('text', 'color'), ('color', $type));
    }
  }

  & > .#{bem('icon')} {
    vertical-align: -2px;
  }
}


code:
@use './date-picker/picker.scss';
@use './date-picker/picker-panel.scss';
@use './date-picker/time-spinner.scss';
@use './date-picker/time-picker.scss';
@use './date-picker/time-range-picker.scss';


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

.time-select {
  margin: 5px 0;
  min-width: 0;

  .#{$namespace}-picker-panel__content {
    max-height: 200px;
    margin: 0;
  }

  &-item {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px;

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

    &:hover {
      background-color: getCssVar('fill-color', 'light');
      font-weight: bold;
      cursor: pointer;
    }
  }

  .time-select-item.selected:not(.disabled) {
    color: getCssVar('color-primary');
    font-weight: bold;
  }
}


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

@include b(timeline-item) {
  position: relative;
  padding-bottom: 20px;

  @include e(wrapper) {
    position: relative;
    padding-left: 28px;
    top: -3px;
  }

  @include e(tail) {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid getCssVar('timeline-node-color');
  }

  & .#{$namespace}-timeline-item__icon {
    color: getCssVar('color-white');
    font-size: getCssVar('font-size-small');
  }

  @include e(node) {
    position: absolute;
    background-color: getCssVar('timeline-node-color');
    border-color: getCssVar('timeline-node-color');
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    @include m(normal) {
      left: -1px;
      width: getCssVar('timeline-node-size-normal');
      height: getCssVar('timeline-node-size-normal');
    }
    @include m(large) {
      left: -2px;
      width: getCssVar('timeline-node-size-large');
      height: getCssVar('timeline-node-size-large');
    }
    @include when(hollow) {
      background: getCssVar('color-white');
      border-style: solid;
      border-width: 2px;
    }

    @each $type in (primary, success, warning, danger, info) {
      @include m($type) {
        background-color: getCssVar('color', $type);
        border-color: getCssVar('color', $type);
      }
    }
  }

  @include e(dot) {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

  @include e(timestamp) {
    color: getCssVar('text-color', 'secondary');
    line-height: 1;
    font-size: getCssVar('font-size-small');

    @include when(top) {
      margin-bottom: 8px;
      padding-top: 4px;
    }
    @include when(bottom) {
      margin-top: 8px;
    }
  }
}


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

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

@include b(timeline) {
  margin: 0;
  font-size: getCssVar('font-size', 'base');
  list-style: none;

  .#{$namespace}-timeline-item:last-child {
    .#{$namespace}-timeline-item__tail {
      display: none;
    }
  }

  .#{$namespace}-timeline-item__center {
    display: flex;
    align-items: center;

    .#{$namespace}-timeline-item__wrapper {
      width: 100%;
    }

    .#{$namespace}-timeline-item__tail {
      top: 0;
    }
  }

  .#{$namespace}-timeline-item__center:first-child {
    .#{$namespace}-timeline-item__tail {
      height: calc(50% + 10px);
      top: calc(50% - 10px);
    }
  }

  .#{$namespace}-timeline-item__center:last-child {
    .#{$namespace}-timeline-item__tail {
      display: block;
      height: calc(50% - 10px);
    }
  }
}


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

@include b(tooltip-v2) {
  @include e(content) {
    --#{$namespace}-tooltip-v2-padding: 5px 10px;
    --#{$namespace}-tooltip-v2-border-radius: 4px;

    @include css-var-from-global(
      ('tooltip-v2', 'border-color'),
      ('border-color')
    );

    border-radius: getCssVar('tooltip-v2-border-radius');
    color: getCssVar('color-black');
    background-color: getCssVar('color-white');
    padding: getCssVar('tooltip-v2-padding');
    border: 1px solid getCssVar('border-color');

    $content-selector: &;

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

    @include e(arrow) {
      position: absolute;
      color: getCssVar('color-white');
      width: var(--#{$namespace}-tooltip-v2-arrow-width);
      height: var(--#{$namespace}-tooltip-v2-arrow-height);
      pointer-events: none;
      left: var(--#{$namespace}-tooltip-v2-arrow-x);
      top: var(--#{$namespace}-tooltip-v2-arrow-y);

      &::before {
        content: '';
        width: 0;
        height: 0;
        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
          transparent;
        position: absolute;
      }

      &::after {
        content: '';
        width: 0;
        height: 0;
        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
          transparent;
        position: absolute;
      }

      @each $side, $opposite in $sides {
        #{$content-selector}[data-side^='#{$side}'] & {
          #{$opposite}: 0;
        }

        #{$content-selector}[data-side^='#{$side}'] &::before {
          border-#{$side}-color: var(--#{$namespace}-color-white);
          border-#{$side}-width: var(
            --#{$namespace}-tooltip-v2-arrow-border-width
          );
          border-#{$opposite}: 0;
          #{$side}: calc(100% - 1px);
        }

        #{$content-selector}[data-side^='#{$side}'] &::after {
          border-#{$side}-color: var(--#{$namespace}-border-color);
          border-#{$side}-width: var(
            --#{$namespace}-tooltip-v2-arrow-border-width
          );
          border-#{$opposite}: 0;
          #{$side}: 100%;
          z-index: -1;
        }
      }
    }

    &.is-dark {
      --#{$namespace}-tooltip-v2-border-color: transparent;
      background-color: getCssVar('color-black');
      color: getCssVar('color-white');
      border-color: transparent;

      @include e(arrow) {
        background-color: getCssVar('color-black');
        border-color: transparent;
      }
    }
  }
}


code:
@use 'sass:map';

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

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

  @include e(hollow) {
    transition: all getCssVar('transition-duration') ease;
  }

  @include e(content) {
    border-radius: getCssVar('tour-border-radius');
    width: var(#{getCssVarName('tour-width')});
    padding: getCssVar('tour-padding-primary');
    background: getCssVar('tour-bg-color');
    box-shadow: getCssVar('box-shadow-light');
    box-sizing: border-box;
    overflow-wrap: break-word;
    outline: none;

    $content-selector: &;

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

    @include e(arrow) {
      position: absolute;
      background: getCssVar('tour-bg-color');
      width: 10px;
      height: 10px;
      pointer-events: none;
      transform: rotate(45deg);
      box-sizing: border-box;

      @each $side,
        $adjacency
          in (
            'top': 'left',
            'bottom': 'right',
            'left': 'bottom',
            'right': 'top'
          )
      {
        #{$content-selector}[data-side^='#{$side}'] & {
          border-#{$side}-color: transparent;
          border-#{$adjacency}-color: transparent;
        }
      }

      @each $side, $opposite in $sides {
        #{$content-selector}[data-side^='#{$side}'] & {
          #{$opposite}: -5px;
        }
      }
    }

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

      .#{$namespace}-tour__close {
        color: getCssVar('tour-close-color');
        font-size: inherit;
      }

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

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

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

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

    @include e(body) {
      color: getCssVar('tour-text-color');
      font-size: getCssVar('tour-font-size');
      img,
      video {
        max-width: 100%;
      }
    }

    @include e(footer) {
      padding-top: getCssVar('tour-padding-primary');
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
    }

    @include b(tour-indicators) {
      display: inline-block;
      flex: 1;
    }

    @include b(tour-indicator) {
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 50%;
      background: getCssVar('color', 'info-light-9');
      margin-right: 6px;

      @include when(active) {
        background: getCssVar('color', 'primary');
      }
    }
  }

  &.#{$namespace}-tour--primary {
    @include set-css-var-value('tour-title-text-color', #fff);
    @include set-css-var-value('tour-text-color', #fff);
    @include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
    @include set-css-var-value('tour-close-color', #fff);

    .#{$namespace}-tour__closebtn {
      &:focus,
      &:hover {
        .#{$namespace}-tour__close {
          color: getCssVar('tour-title-text-color');
        }
      }
    }

    .#{$namespace}-button--default {
      color: getCssVar('color', 'primary');
      border-color: getCssVar('color', 'primary');
      background: #fff;
    }

    .#{$namespace}-button--primary {
      border-color: #fff;
    }

    @include b(tour-indicator) {
      background: rgba(255, 255, 255, 0.15);
      @include when(active) {
        background: #fff;
      }
    }
  }
}

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


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

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

@include b(transfer) {
  font-size: getCssVar('font-size', 'base');

  @include e(buttons) {
    display: inline-block;
    vertical-align: middle;
    padding: 0 30px;
  }

  @include e(button) {
    vertical-align: top;

    &:nth-child(2) {
      margin: 0 0 0 10px;
    }

    i,
    span {
      font-size: 14px;
    }

    & .#{$namespace}-icon + span {
      margin-left: 0;
    }
  }
}

@include b(transfer-panel) {
  overflow: hidden;
  background: getCssVar('bg-color', 'overlay');
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: getCssVar('transfer-panel-width');
  max-height: 100%;
  box-sizing: border-box;
  position: relative;

  @include e(body) {
    height: getCssVar('transfer-panel-body-height');
    border-left: 1px solid getCssVar('transfer-border-color');
    border-right: 1px solid getCssVar('transfer-border-color');
    border-bottom: 1px solid getCssVar('transfer-border-color');
    border-bottom-left-radius: getCssVar('transfer-border-radius');
    border-bottom-right-radius: getCssVar('transfer-border-radius');
    overflow: hidden;
    @include when('with-footer') {
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  @include e(list) {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    height: getCssVar('transfer-panel-body-height');
    overflow: auto;
    box-sizing: border-box;
    @include when(filterable) {
      height: calc(100% - getCssVar('transfer-filter-height') - 30px);
      padding-top: 0;
    }
  }

  @include e(item) {
    height: getCssVar('transfer-item-height');
    line-height: getCssVar('transfer-item-height');
    padding-left: 15px;
    display: block !important;

    & + .#{$namespace}-transfer-panel__item {
      margin-left: 0;
    }

    &.#{$namespace}-checkbox {
      color: getCssVar('text-color', 'regular');
    }

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

    &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
      width: 100%;
      @include utils-ellipsis;
      display: block;
      box-sizing: border-box;
      padding-left: 22px;
      line-height: getCssVar('transfer-item-height');
    }

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

  @include e(filter) {
    text-align: center;
    padding: 15px;
    box-sizing: border-box;

    .#{$namespace}-input__inner {
      height: getCssVar('transfer-filter-height');
      width: 100%;
      font-size: 12px;
      display: inline-block;
      box-sizing: border-box;
    }

    .#{$namespace}-icon-circle-close {
      cursor: pointer;
    }
  }

  .#{$namespace}-transfer-panel__header {
    display: flex;
    align-items: center;
    height: getCssVar('transfer-panel-header-height');
    background: getCssVar('transfer-panel-header-bg-color');
    margin: 0;
    padding-left: 15px;
    border: 1px solid getCssVar('transfer-border-color');
    border-top-left-radius: getCssVar('transfer-border-radius');
    border-top-right-radius: getCssVar('transfer-border-radius');
    box-sizing: border-box;
    color: getCssVar('color-black');

    .#{$namespace}-checkbox {
      position: relative;
      display: flex;
      width: 100%;
      align-items: center;

      .#{$namespace}-checkbox__label {
        font-size: 16px;
        color: getCssVar('text-color', 'primary');
        font-weight: normal;

        span {
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translate3d(0, -50%, 0);
          color: getCssVar('text-color', 'secondary');
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }

  .#{$namespace}-transfer-panel__footer {
    height: getCssVar('transfer-panel-footer-height');
    background: getCssVar('bg-color', 'overlay');
    margin: 0;
    padding: 0;
    border: 1px solid getCssVar('transfer-border-color');
    border-bottom-left-radius: getCssVar('transfer-border-radius');
    border-bottom-right-radius: getCssVar('transfer-border-radius');
    @include utils-vertical-center;

    .#{$namespace}-checkbox {
      padding-left: 20px;
      color: getCssVar('text-color', 'regular');
    }
  }

  .#{$namespace}-transfer-panel__empty {
    margin: 0;
    height: getCssVar('transfer-item-height');
    line-height: getCssVar('transfer-item-height');
    padding: 6px 15px 0;
    color: getCssVar('text-color', 'secondary');
    text-align: center;
  }

  .#{$namespace}-checkbox__label {
    padding-left: 8px;
  }

  .#{$namespace}-checkbox__inner {
    height: 14px;
    width: 14px;
    border-radius: 3px;
    &::after {
      height: 6px;
      width: 3px;
      left: 4px;
    }
  }
}


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

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

@include b(tree-select) {
  @include e(popper) {
    // padding-left same with select option
    .#{$namespace}-tree-node__expand-icon {
      margin-left: 8px;
    }

    // remove icon when show checkbox
    .#{$namespace}-tree-node.is-checked
      > .#{$namespace}-tree-node__content
      .#{$namespace}-select-dropdown__item.selected::after {
      content: none;
    }

    .#{$namespace}-select-dropdown__list
      > .#{$namespace}-select-dropdown__item {
      padding-left: 32px;
    }

    .#{$namespace}-select-dropdown__item {
      flex: 1;
      background: transparent !important;

      // padding-left move to `el-tree-node__expand-icon`
      padding-left: 0;

      // fix: select height > tree node height
      // https://github.com/yujinpan/el-select-tree/pull/33
      height: 20px;
      line-height: 20px;
    }
  }
}


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

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

@include b(tree) {
  position: relative;
  cursor: default;
  background: getCssVar('fill-color', 'blank');
  color: getCssVar('tree-text-color');
  font-size: getCssVar('font-size', 'base');

  @include e(empty-block) {
    position: relative;
    min-height: 60px;
    text-align: center;
    width: 100%;
    height: 100%;
  }

  @include e(empty-text) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: getCssVar('text-color', 'secondary');
    font-size: getCssVar('font-size', 'base');
  }

  @include e(drop-indicator) {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: getCssVar('color-primary');
  }
}

@include b(tree-node) {
  white-space: nowrap;
  outline: none;
  &:focus {
    /* focus */
    > .#{$namespace}-tree-node__content {
      background-color: getCssVar('tree-node-hover-bg-color');
    }
  }

  @include when(drop-inner) {
    > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
      background-color: getCssVar('color-primary');
      color: #fff;
    }
  }

  @include e(content) {
    @include css-var-from-global('checkbox-height', 'tree-node-content-height');

    display: flex;
    align-items: center;
    height: getCssVar('tree-node-content-height');
    cursor: pointer;

    & > .#{$namespace}-tree-node__expand-icon {
      padding: 6px;
      box-sizing: content-box;
    }
    & > label.#{$namespace}-checkbox {
      margin-right: 8px;
    }
    &:hover {
      background-color: getCssVar('tree-node-hover-bg-color');
    }

    .#{$namespace}-tree.is-dragging & {
      cursor: move;

      & * {
        pointer-events: none;
      }
    }

    .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
      cursor: not-allowed;
    }
  }

  @include e(expand-icon) {
    cursor: pointer;
    color: getCssVar('tree-expand-icon-color');
    font-size: 12px;

    transform: rotate(0deg);
    transition: transform getCssVar('transition-duration') ease-in-out;

    &.expanded {
      transform: rotate(90deg);
    }

    &.is-leaf {
      color: transparent;
      cursor: default;
      visibility: hidden;
    }
    &.is-hidden {
      visibility: hidden;
    }
  }

  @include e(loading-icon) {
    margin-right: 8px;
    font-size: getCssVar('font-size', 'base');
    color: getCssVar('tree-expand-icon-color');
  }

  & > .#{$namespace}-tree-node__children {
    overflow: hidden;
    background-color: transparent;
  }

  &.is-expanded > .#{$namespace}-tree-node__children {
    display: block;
  }
}

.#{$namespace}-tree--highlight-current
  .#{$namespace}-tree-node.is-current
  > .#{$namespace}-tree-node__content {
  background-color: getCssVar('color-primary-light-9');
}