.@{tab-prefix-cls} {
  .reset-component();

  display: flex;

  
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;

    .@{tab-prefix-cls}-nav-wrap {
      position: relative;
      display: inline-block;
      display: flex;
      flex: auto;
      align-self: stretch;
      overflow: hidden;
      white-space: nowrap;
      transform: translate(0); 

      
      &::before,
      &::after {
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: opacity @animation-duration-slow;
        content: '';
        pointer-events: none;
      }
    }

    .@{tab-prefix-cls}-nav-list {
      position: relative;
      display: flex;
      transition: transform @animation-duration-slow;
    }

    
    .@{tab-prefix-cls}-nav-operations {
      display: flex;
      align-self: stretch;

      &-hidden {
        position: absolute;
        visibility: hidden;
        pointer-events: none;
      }
    }

    .@{tab-prefix-cls}-nav-more {
      position: relative;
      padding: @tabs-card-horizontal-padding;
      background: transparent;
      border: 0;

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 5px;
        transform: translateY(100%);
        content: '';
      }
    }

    .@{tab-prefix-cls}-nav-add {
      min-width: @tabs-card-height;
      margin-left: @tabs-card-gutter;
      padding: 0 @padding-xs;
      background: @tabs-card-head-background;
      border: @border-width-base @border-style-base @neutral-stroke-2-normal;
      border-radius: @border-radius-base @border-radius-base 0 0;
      outline: none;
      cursor: pointer;
      transition: all @animation-duration-slow @ease-in-out;

      &:hover {
        color: @brand-fg-1-hover;
      }

      &:active,
      &:focus {
        color: @brand-fg-1-active;
      }
    }
  }

  &-extra-content {
    flex: none;
  }

  &-centered {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-nav-wrap {
        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
          justify-content: center;
        }
      }
    }
  }

  
  &-ink-bar {
    position: absolute;
    background: @brand-stroke-1-normal;
    pointer-events: none;
  }

  
  &-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: @tabs-horizontal-padding;
    font-size: @font-size-body-m;
    background: transparent;
    border: 0;
    outline: none;
    color: @neutral-fg-3-normal;
    cursor: pointer;

    &-btn,
    &-remove {
      &:focus,
      &:active {
        color: @brand-fg-1-active;
      }
    }

    &-btn {
      outline: none;
      transition: all 0.3s;
    }

    &-remove {
      flex: none;
      margin-right: -@margin-xss;
      margin-left: @margin-xs;
      color: @neutral-fg-3-normal;
      font-size: @font-size-body-s;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      transition: all @animation-duration-slow;

      &:hover {
        color: @brand-bg-1-hover;
      }
    }

    &:hover {
      color: @brand-bg-1-hover;
    }

    &&-active &-btn {
      color: @brand-fg-1-normal;
      text-shadow: 0 0 0.25px currentcolor;
      &:hover {
        color: @brand-bg-1-hover;
      }
    }

    &&-disabled {
      color: @neutral-fg-disabled;
      cursor: not-allowed;
    }

    &&-disabled &-btn,
    &&-disabled &-remove {
      &:focus,
      &:active {
        color: @neutral-fg-disabled;
      }
    }

    & &-remove .@{iconfont-css-prefix} {
      margin: 0;
    }

    .@{iconfont-css-prefix} {
      margin-right: @margin-sm;
    }
  }

  &-tab + &-tab {
    margin: @tabs-horizontal-margin;
  }

  
  &-content {
    &-holder {
      flex: auto;
      min-width: 0;
      min-height: 0;
    }

    position: relative;
    width: 100%;
  }

  &-tabpane {
    outline: none;

    &-hidden {
      display: none;
    }
  }

  
  &-switch {
    &-appear,
    &-enter {
      transition: none;

      &-start {
        opacity: 0;
      }

      &-active {
        opacity: 1;
        transition: opacity @animation-duration-slow;
      }
    }

    &-leave {
      position: absolute;
      transition: none;
      inset: 0;

      &-start {
        opacity: 1;
      }

      &-active {
        opacity: 0;
        transition: opacity @animation-duration-slow;
      }
    }
  }
}

@root-entry-name: default;


@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  .reset-component();

  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 8px;
  color: @neutral-fg-2-normal;
  font-size: @font-size-body-m;
  line-height: @tag-line-height;
  white-space: nowrap;
  background: @neutral-bg-disabled;
  border: @border-width-base @border-style-base @neutral-stroke-1-normal;
  border-radius: @radius-m;
  opacity: 1;
  transition: all 0.3s;


  &,
  a,
  a:hover {
    color: @neutral-fg-2-normal;
  }

  > a:first-child:last-child {
    display: inline-block;
    margin: 0 -8px;
    padding: 0 8px;
  }


  &-close-icon {
    margin-left: 8px;
    
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
  }

  &-has-color {
    border-color: transparent;
    &,
    a,
    a:hover {
      color: @text-color-inverse;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;

    &:not(&-checked):hover {
      color: @neutral-fg-2-normal;
    }

    &:not(&-checked):hover {
      background-color: @neutral-bg-1-hover-2;
    }

    &:active,
    &-checked {
      color: @brand-fg-1-normal;
      background-color: @brand-bg-2-normal;
      border: 1px solid @brand-stroke-3-normal;
    }
  }

  &-hidden {
    display: none;
  }

  
  

  &-blue {
    color: @brand-fg-1-normal;
    background: @brand-bg-2-normal;
    border-color: @brand-stroke-3-normal;
    &-inverse {
      color: @neutral-fg-on-color;
      background: @brand-bg-1-normal;
      border-color: @brand-bg-1-normal;
    }
  }
  &-red {
    color: @status-error-fg-1-normal;
    background: @status-error-bg-2-normal;
    border-color: @status-error-stroke-2-normal;
    &-inverse {
      color: @neutral-fg-on-color;
      background: @status-error-bg-1-normal;
      border-color: @status-error-bg-1-normal;
    }
  }
  &-green {
    color: @status-success-fg-1-normal;
    background: @status-success-bg-2-normal;
    border-color: @status-success-stroke-2-normal;
    &-inverse {
      color: @neutral-fg-on-color;
      background: @status-success-bg-1-normal;
      border-color: @status-success-bg-1-normal;
    }
  }
  &-orange {
    color: @status-warning-fg-1-normal;
    background: @status-warning-bg-2-normal;
    border-color: @status-warning-stroke-2-normal;
    &-inverse {
      color: @neutral-fg-on-color;
      background: @status-warning-bg-1-normal;
      border-color: @status-warning-bg-1-normal;
    }
  }

  .make-status-color-classes(@status, @cssVariableType) {
    @bgColor: 'status-@{cssVariableType}-bg-2-normal';
    @borderColor: 'status-@{cssVariableType}-stroke-2-normal';
    @textColor: 'status-@{cssVariableType}-fg-1-normal';
    &-@{status} {
      color: @@textColor;
      background: @@bgColor;
      border-color: @@borderColor;
    }
  }

  &-processing {
    color: @brand-fg-1-normal;
    background: @brand-bg-2-normal;
    border-color: @brand-stroke-3-normal;
  }

  

  .make-status-color-classes(success, success);
  
  .make-status-color-classes(error, error);
  .make-status-color-classes(warning, warning);

  
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    margin-left: 7px;
  }
}


@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  &&-rtl {
    margin-right: 0;
    margin-left: 8px;
    direction: rtl;
    text-align: right;
  }

  &-close-icon {
    .@{tag-prefix-cls}-rtl & {
      margin-right: 3px;
      margin-left: 0;
    }
  }

  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    .@{tag-prefix-cls}-rtl& {
      margin-right: 7px;
      margin-left: 0;
    }
  }
}


@root-entry-name: default;


@root-entry-name: default;


@timeline-prefix-cls: ~'@{ant-prefix}-timeline';

.@{timeline-prefix-cls} {
  .reset-component();

  margin: 0;
  padding: 0;
  list-style: none;

  &-item {
    position: relative;
    margin: 0;
    padding-bottom: @timeline-item-padding-bottom;
    font-size: @font-size-body-m;
    list-style: none;

    &-tail {
      position: absolute;
      top: 10px;
      left: 4px;
      height: calc(100% - 10px);
      border-left: @timeline-width solid @neutral-stroke-2-normal;
    }

    &-pending &-head {
      font-size: @font-size-body-s;
      background-color: transparent;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: @neutral-bg-1-normal;
      border: @timeline-dot-border-width solid transparent;
      border-radius: 100px;

      &-blue {
        color: @brand-fg-1-normal;
        border-color: @brand-stroke-1-normal;
      }

      &-red {
        color: @status-error-fg-1-normal;
        border-color: @status-error-bg-1-normal;
      }

      &-green {
        color: @status-success-fg-1-normal;
        border-color: @status-success-bg-1-normal;
      }

      &-gray {
        color: @neutral-fg-disabled;
        border-color: @neutral-stroke-1-normal;
      }
    }

    &-head-custom {
      position: absolute;
      top: 5.5px;
      left: 5px;
      width: auto;
      height: auto;
      margin-top: 0;
      padding: 3px 1px;
      line-height: 1;
      text-align: center;
      border: 0;
      border-radius: 0;
      transform: translate(-50%, -50%);
    }

    &-content {
      position: relative;
      top: -(@font-size-body-m * @line-height-base - @font-size-body-m) + 1px;
      margin: 0 0 0 @margin-lg + 2px;
      word-break: break-word;
      color: @neutral-fg-3-normal;
      font-size: @font-size-body-s;
    }

    &-last {
      > .@{timeline-prefix-cls}-item-tail {
        display: none;
      }
      > .@{timeline-prefix-cls}-item-content {
        min-height: 48px;
      }
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right,
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item {
      &-tail,
      &-head,
      &-head-custom {
        left: 50%;
      }

      &-head {
        margin-left: -4px;

        &-custom {
          margin-left: 1px;
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          left: calc(50% - 4px);
          width: calc(50% - 14px);
          text-align: left;
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          width: calc(50% - 12px);
          margin: 0;
          text-align: right;
        }
      }
    }
  }

  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-tail,
      .@{timeline-prefix-cls}-item-head,
      .@{timeline-prefix-cls}-item-head-custom {
        left: calc(100% - 4px - @timeline-width);
      }
      .@{timeline-prefix-cls}-item-content {
        width: calc(100% - 18px);
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    display: block;
    height: calc(100% - 14px);
    border-left: 2px dotted @neutral-stroke-2-normal;
  }

  &&-reverse &-item-last &-item-tail {
    display: none;
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      top: 15px;
      display: block;
      height: calc(100% - 15px);
      border-left: 2px dotted @neutral-stroke-2-normal;
    }
    .@{timeline-prefix-cls}-item-content {
      min-height: 48px;
    }
  }
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item-label {
      position: absolute;
      top: -(@font-size-body-m * @line-height-base - @font-size-body-m) + 1px;
      width: calc(50% - 12px);
      text-align: right;
    }
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-label {
        left: calc(50% + 14px);
        width: calc(50% - 14px);
        text-align: left;
      }
    }
  }
}


@timeline-prefix-cls: ~'@{ant-prefix}-timeline';

.@{timeline-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-item {
    &-tail {
      .@{timeline-prefix-cls}-rtl & {
        right: 4px;
        left: auto;
        border-right: @timeline-width solid @timeline-color;
        border-left: none;
      }
    }

    &-head-custom {
      .@{timeline-prefix-cls}-rtl & {
        right: 5px;
        left: auto;
        transform: translate(50%, -50%);
      }
    }

    &-content {
      .@{timeline-prefix-cls}-rtl & {
        margin: 0 18px 0 0;
      }
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right,
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item {
      &-tail,
      &-head,
      &-head-custom {
        .@{timeline-prefix-cls}-rtl& {
          right: 50%;
          left: auto;
        }
      }

      &-head {
        .@{timeline-prefix-cls}-rtl& {
          margin-right: -4px;
          margin-left: 0;
        }

        &-custom {
          .@{timeline-prefix-cls}-rtl& {
            margin-right: 1px;
            margin-left: 0;
          }
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          .@{timeline-prefix-cls}-rtl& {
            right: calc(50% - 4px);
            left: auto;
            text-align: right;
          }
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          .@{timeline-prefix-cls}-rtl& {
            text-align: left;
          }
        }
      }
    }
  }

  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-tail,
      .@{timeline-prefix-cls}-item-head,
      .@{timeline-prefix-cls}-item-head-custom {
        .@{timeline-prefix-cls}-rtl& {
          right: 0;
          left: auto;
        }
      }

      .@{timeline-prefix-cls}-item-content {
        .@{timeline-prefix-cls}-rtl& {
          width: 100%;
          margin-right: 18px;
          text-align: right;
        }
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    .@{timeline-prefix-cls}-rtl& {
      border-right: 2px dotted @timeline-color;
      border-left: none;
    }
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      .@{timeline-prefix-cls}-rtl& {
        border-right: 2px dotted @timeline-color;
        border-left: none;
      }
    }
  }

  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item-label {
      .@{timeline-prefix-cls}-rtl& {
        text-align: left;
      }
    }
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-label {
        .@{timeline-prefix-cls}-rtl& {
          right: calc(50% + 14px);
          text-align: right;
        }
      }
    }
  }
}


@root-entry-name: default;


@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';

@tooltip-arrow-shadow-width: 3px;

@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
  @tooltip-arrow-shadow-width * 2;

@tooltip-arrow-offset-vertical: 5px; 
@tooltip-arrow-offset-horizontal: 13px; 


.@{tooltip-prefix-cls} {
  .reset-component();

  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  width: max-content;
  width: intrinsic;
  max-width: @tooltip-max-width;
  visibility: visible;

  &-content {
    position: relative;
  }

  &-hidden {
    display: none;
  }

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: @tooltip-distance;
  }

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: @tooltip-distance;
  }

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: @tooltip-distance;
  }

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: @tooltip-distance;
  }

  
  &-inner {
    min-width: 30px;
    min-height: 32px;
    padding: 8px 12px;
    color: @neutral-fg-on-color;
    text-align: left;
    text-decoration: none;
    word-wrap: break-word;
    background-color: @neutral-bg-inverted;
    border-radius: @radius-m;
    box-shadow: @box-shadow-base;
    font-size: @font-size-body-s;
  }

  
  &-arrow {
    position: absolute;
    z-index: 2;
    display: block;
    width: @tooltip-arrow-rotate-width;
    height: @tooltip-arrow-rotate-width;
    overflow: hidden;
    background: transparent;
    pointer-events: none;

    &-content {
      
      --antd-arrow-background-color: linear-gradient(
        to right bottom,
        @neutral-bg-inverted,
        @neutral-bg-inverted
      );

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: @tooltip-arrow-width;
      height: @tooltip-arrow-width;
      margin: auto;
      content: '';
      pointer-events: auto;
      .roundedArrow(@tooltip-arrow-width, 5px);
    }
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    bottom: 0;
    transform: translateY(100%);

    &-content {
      box-shadow: @shadow-3-down;
      transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
    }
  }

  &-placement-top &-arrow {
    left: 50%;
    transform: translateY(100%) translateX(-50%);
  }

  &-placement-topLeft &-arrow {
    left: @tooltip-arrow-offset-horizontal;
  }

  &-placement-topRight &-arrow {
    right: @tooltip-arrow-offset-horizontal;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    left: 0;
    transform: translateX(-100%);

    &-content {
      box-shadow: @shadow-3-left;
      transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
    }
  }

  &-placement-right &-arrow {
    top: 50%;
    transform: translateX(-100%) translateY(-50%);
  }

  &-placement-rightTop &-arrow {
    top: @tooltip-arrow-offset-vertical;
  }

  &-placement-rightBottom &-arrow {
    bottom: @tooltip-arrow-offset-vertical;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    right: 0;
    transform: translateX(100%);

    &-content {
      box-shadow: @shadow-3-right;
      transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
    }
  }

  &-placement-left &-arrow {
    top: 50%;
    transform: translateX(100%) translateY(-50%);
  }

  &-placement-leftTop &-arrow {
    top: @tooltip-arrow-offset-vertical;
  }

  &-placement-leftBottom &-arrow {
    bottom: @tooltip-arrow-offset-vertical;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    top: 0;
    transform: translateY(-100%);

    &-content {
      box-shadow: @shadow-3-up;
      transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
    }
  }

  &-placement-bottom &-arrow {
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
  }

  &-placement-bottomLeft &-arrow {
    left: @tooltip-arrow-offset-horizontal;
  }

  &-placement-bottomRight &-arrow {
    right: @tooltip-arrow-offset-horizontal;
  }
}

.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
  .generator-tooltip-preset-color(@i - 1);
  @color: extract(@preset-colors, @i);
  @lightColor: '@{color}-6';
  .@{tooltip-prefix-cls}-@{color} {
    .@{tooltip-prefix-cls}-inner {
      background-color: @@lightColor;
    }
    .@{tooltip-prefix-cls}-arrow {
      &-content::before {
        background: @@lightColor;
      }
    }
  }
}
.generator-tooltip-preset-color();

@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';


.@{tooltip-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
  
  &-inner {
    .@{tooltip-prefix-cls}-rtl & {
      text-align: right;
    }
  }
}


@root-entry-name: default;


@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

@table-prefix-cls: ~'@{ant-prefix}-table';
@input-prefix-cls: ~'@{ant-prefix}-input';

.@{transfer-prefix-cls}-customize-list {
  .@{transfer-prefix-cls}-list {
    flex: 1 1 50%;
    width: auto;
    height: auto;
    min-height: @transfer-list-height;
  }

  
  .@{table-prefix-cls}-wrapper {
    .@{table-prefix-cls}-small {
      border: 0;
      border-radius: 0;

      .@{table-prefix-cls}-selection-column {
        width: 40px;
        min-width: 40px;
      }

      > .@{table-prefix-cls}-content {
        
        > .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {
          background: @neutral-bg-1-hover-1;
        }

        .@{table-prefix-cls}-row:last-child td {
          border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;
        }
      }

      .@{table-prefix-cls}-body {
        margin: 0;
      }
    }

    .@{table-prefix-cls}-pagination.@{ant-prefix}-pagination {
      margin: 16px 0 4px;
    }
  }
  .@{input-prefix-cls} {
    &[disabled] {
      background-color: transparent;
    }
  }
}


@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

.transfer-status-color(@color) {
  .@{transfer-prefix-cls}-list {
    border-color: @color;

    &-search:not([disabled]) {
      border-color: @input-border-color;

      &:hover {
        .hover();
      }

      &:focus {
        .active();
      }
    }
  }
}

.@{transfer-prefix-cls} {
  &-status-error {
    .transfer-status-color(@error-color);
  }

  &-status-warning {
    .transfer-status-color(@warning-color);
  }
}


@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

@transfer-header-vertical-padding: ceil(
  ((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2)
);

.@{transfer-prefix-cls} {
  .reset-component();

  position: relative;
  display: flex;
  align-items: stretch;

  &-disabled {
    .@{transfer-prefix-cls}-list {
      background: @component-background
    }
  }

  &-list {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: @transfer-list-height;
    border: @border-width-base @border-style-base @neutral-stroke-2-normal;
    border-radius: @radius-m;

    &-with-pagination {
      width: 250px;
      height: auto;
    }

    &-search {
      .anticon-search {
        color: @neutral-fg-3-normal;
      }
    }

    &-checkall {
      width: 100%;
      height: 40px;
      padding: 6px 12px;
      transition: all .3s;
    }

    &-header {
      display: flex;
      flex: none;
      align-items: center;
      height: @transfer-header-height;
      
      padding: 8px 16px;
      color: @neutral-fg-1-normal;
      background: @neutral-bg-4-hover;
      border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;
      border-radius: @radius-m @radius-m 0 0;
      font-weight: @font-weight-bold;
      position: relative;
      > *:not(:last-child) {
        margin-right: 4px;
      }

      > * {
        flex: none;
      }

      &-title {
        
        overflow: hidden;
        white-space: nowrap;
        
        text-overflow: ellipsis;
      }

      &-dropdown {
        font-size: 10px;
        transform: translateY(10%);
        cursor: pointer;

        &[disabled] {
          cursor: not-allowed;
        }
      }

      &-clearall {
        min-width: 48px;
        width: 48px;
        height: 24px;
        position: absolute;
        right: 4px;
        top: 10px
      }
    }

    &-body {
      display: flex;
      flex: auto;
      flex-direction: column;
      overflow: hidden;
      font-size: @font-size-body-m;

      &-search-wrapper {
        position: relative;
        flex: none;
        padding: @padding-sm;
      }
    }

    &-content {
      flex: auto;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;

      &-item {
        display: flex;
        align-items: center;
        min-height: @transfer-item-height;
        padding: @transfer-item-padding-vertical @control-padding-horizontal;
        line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
        transition: all 0.3s;
        height: 40px;
        > *:not(:last-child) {
          margin-right: 8px;
        }

        > * {
          flex: none;
        }

        &-text {
          flex: auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &-remove {
          width: 16px;
          height: 16px;
          position: relative;
          color: @neutral-fg-3-normal;
          cursor: pointer;
          transition: all 0.3s;
          font-size: @font-size-body-m + 2px;
          z-index:2;

          svg {
            fill: currentColor;
          }

          &::after {
            position: absolute;
            top: -@transfer-item-padding-vertical;
            right: -50%;
            bottom: -@transfer-item-padding-vertical;
            left: -50%;
            border-radius: 4px;
            z-index: -1;
            transition: opacity .3s;
            content: '';
          }
          
        }
        
      }

      &-item:not(&-item-disabled) {
        &:hover {
          background-color: @neutral-bg-1-hover-1;
          cursor: pointer;
        }

        &.@{transfer-prefix-cls}-list-content-item-checked:hover {
          background-color: @neutral-bg-1-hover-1;
        }
      }

      
      


      &-item-disabled {
        color: @neutral-fg-disabled;
        cursor: not-allowed;
      }
    }

    &-pagination {
      padding: @padding-xs 0;
      text-align: right;
      
    }

    &-body-not-found {
      flex: none;
      width: 100%;
      margin: auto 0;
      text-align: center;
    }

    
  }

  &-operation {
    display: flex;
    flex: none;
    flex-direction: column;
    align-self: center;
    margin: 0 8px;
    vertical-align: middle;

    .@{ant-prefix}-btn {
      display: block;

      &:first-child {
        margin-bottom: 4px;
      }

      .@{iconfont-css-prefix} {
        font-size: 12px;
      }
    }
  }

  .@{ant-prefix}-empty-image {
    max-height: (@transfer-header-height / 2) - 22;
  }
}


@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

.@{transfer-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-list {
    &-search {
      .@{transfer-prefix-cls}-rtl & {
        padding-right: @control-padding-horizontal-sm;
        padding-left: 24px;
      }

      &-action {
        .@{transfer-prefix-cls}-rtl & {
          right: auto;
          left: 12px;
        }
      }
    }

    &-header {
      > *:not(:last-child) {
        .@{transfer-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 4px;
        }
      }

      .@{transfer-prefix-cls}-rtl & {
        right: 0;
        left: auto;
      }

      &-title {
        .@{transfer-prefix-cls}-rtl & {
          text-align: left;
        }
      }
    }

    &-content {
      &-item {
        > *:not(:last-child) {
          .@{transfer-prefix-cls}-rtl & {
            margin-right: 0;
            margin-left: 8px;
          }
        }
      }
    }

    &-pagination {
      .@{transfer-prefix-cls}-rtl & {
        text-align: left;
      }
    }

    &-footer {
      .@{transfer-prefix-cls}-rtl & {
        right: 0;
        left: auto;
      }
    }
  }
}


@root-entry-name: default;


@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';
@tree-node-padding: (@padding-xs / 2);

@tree-node-hightlight-color: inherit;
@tree-node-highlight-color: @tree-node-hightlight-color;

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{select-tree-prefix-cls}-switcher-icon {
    display: inline-block;
    font-size: 10px;
    vertical-align: baseline;

    svg {
      transition: transform 0.3s;
    }
  }
}

.drop-indicator() {
  .@{tree-prefix-cls}-drop-indicator {
    position: absolute;
    
    z-index: 1;
    height: 2px;
    background-color: @primary-color;
    border-radius: 1px;
    pointer-events: none;

    &::after {
      position: absolute;
      top: -3px;
      left: -6px;
      width: 8px;
      height: 8px;
      background-color: transparent;
      border: 2px solid @primary-color;
      border-radius: 50%;
      content: '';
    }
  }
}

.antTreeFn(@custom-tree-prefix-cls) {
  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
  .reset-component();
  background: @tree-bg;
  border-radius: @radius-m;
  transition: background-color 0.3s;

  &-focused:not(:hover):not(&-active-focused) {
    background: @primary-1;
  }

  
  &-list-holder-inner {
    align-items: flex-start;
  }

  &.@{custom-tree-prefix-cls}-block-node {
    .@{custom-tree-prefix-cls}-list-holder-inner {
      align-items: stretch;

      
      .@{custom-tree-prefix-cls}-node-content-wrapper {
        flex: auto;
      }

      
      .@{custom-tree-node-prefix-cls}.dragging {
        position: relative;

        &::after {
          position: absolute;
          top: 0;
          right: 0;
          bottom: @tree-node-padding;
          left: 0;
          border: 1px solid @primary-color;
          opacity: 0;
          animation: ant-tree-node-fx-do-not-use 0.3s;
          animation-play-state: running;
          animation-fill-mode: forwards;
          content: '';
          pointer-events: none;
        }
      }
    }
  }

  
  .@{custom-tree-node-prefix-cls} {
    display: flex;
    align-items: flex-start;
    
    padding: 0 0 0 @tree-node-padding;
    outline: none;
    height: @tree-node-height;
    width:100%;
    box-sizing: border-box;
    margin-bottom: 4px;
    
    &-disabled {
      
      .@{custom-tree-prefix-cls}-node-content-wrapper {
        color: @neutral-fg-disabled;
        cursor: not-allowed;

        &:hover {
          background: transparent;
        }
      }
    }

    &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
      background: @neutral-bg-1-hover-1;
    }

    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
      color: @neutral-fg-2-normal;
      font-weight: 500;
    }
    &-draggable {
      .@{custom-tree-prefix-cls}-draggable-icon {
        width: @tree-title-height;
        line-height: @tree-node-height;
        text-align: center;
        visibility: visible;
        opacity: 0.2;
        transition: opacity @animation-duration-slow;

        .@{custom-tree-node-prefix-cls}:hover & {
          opacity: 0.45;
        }
      }

      &.@{custom-tree-node-prefix-cls}-disabled {
        .@{custom-tree-prefix-cls}-draggable-icon {
          visibility: hidden;
        }
      }
    }
    &:hover {
      background: @neutral-bg-1-hover-1;
      .@{custom-tree-prefix-cls}-switcher {
        background: none;
      }
    }
    &-selected {
      background: @brand-bg-2-selected !important;
      
      &:hover {
        background: @neutral-bg-1-hover-1;
        
      }
    }
  }

  
  &-indent {
    align-self: stretch;
    white-space: nowrap;
    user-select: none;

    &-unit {
      display: inline-block;
      width: @tree-title-height;
    }
  }

  
  &-draggable-icon {
    visibility: hidden;
  }

  
  &-switcher {
    .antTreeSwitcherIcon();
    display: flex;
    align-items: center;
    position: relative;
    flex: none;
    align-self: stretch;
    
    margin: 0;
    line-height: @tree-node-height;
    text-align: center;
    cursor: pointer;
    user-select: none;
    height: @tree-node-height;
    color: @neutral-fg-3-normal;
    svg {
      fill: currentColor
    }

    &-noop {
      width: 16px;
      cursor: default;
    }

    &_close {
      .@{custom-tree-prefix-cls}-switcher-icon {
        svg {
          transform: rotate(-90deg);
        }
      }
    }

    &-loading-icon {
      color: @primary-color;
    }

    &-leaf-line {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 100%;
      height: 100%;
      
      &::before {
        position: absolute;
        top: 0;
        right: 12px;
        bottom: -@tree-node-padding;
        margin-left: -1px;
        border-right: 1px solid @normal-color;
        content: ' ';
      }

      &::after {
        position: absolute;
        width: @tree-title-height - 14px;
        height: @tree-node-height - 10px;
        border-bottom: 1px solid @normal-color;
        content: ' ';
      }
    }
  }

  
  &-checkbox {
    top: initial;
    
    margin: ((@tree-node-height - @checkbox-size) / 2) 0 0 4px;
  }

  
  & &-node-content-wrapper {
    display: flex;
    position: relative;
    z-index: auto;
    min-height: @tree-node-height;
    margin: 0;
    padding: 0 4px;
    color: inherit;
    line-height: @tree-node-height;
    background: transparent;
    border-radius: @radius-m;
    cursor: pointer;
    transition: background-color 0.3s, border 0s, line-height 0s, box-shadow 0s;

    

    

    
    .@{custom-tree-prefix-cls}-iconEle {
      
      display: flex;
      
      height: @tree-node-height;
      align-items: center;
      padding-right: 4px;
      color: @neutral-fg-3-normal;
      svg {
        fill: currentColor
      }

      &:empty {
        display: none;
      }
    }
    
  }

  
  &-unselectable &-node-content-wrapper:hover {
    background-color: transparent;
  }

  
  &-node-content-wrapper {
    line-height: @tree-node-height;
    user-select: none;

    .drop-indicator();
  }

  .@{custom-tree-node-prefix-cls}.drop-container {
    > [draggable] {
      box-shadow: 0 0 0 2px @primary-color;
    }
  }

  
  &-show-line {
    
    .@{custom-tree-prefix-cls}-indent {
      &-unit {
        position: relative;
        height: 100%;

        &::before {
          position: absolute;
          top: 0;
          right: (@tree-title-height / 2);
          bottom: -@tree-node-padding;
          border-right: 1px solid @neutral-stroke-2-normal;
          content: '';
        }

        &-end {
          &::before {
            display: none;
          }
        }
      }
    }

    
    .@{custom-tree-prefix-cls}-switcher {
      background: @component-background;

      &-line-icon {
        
        vertical-align: -0.15em;
      }
    }
  }

  .@{custom-tree-node-prefix-cls}-leaf-last {
    .@{custom-tree-prefix-cls}-switcher {
      &-leaf-line {
        &::before {
          top: auto !important;
          bottom: auto !important;
          height: @tree-node-height - 10px !important;
        }
      }
    }
  }
}

@keyframes ant-tree-node-fx-do-not-use {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');

.@{tree-select-prefix-cls} {
  
  &-dropdown {
    padding: @padding-xs (@padding-xs / 2);
    max-height: 280px !important;

    &-rtl {
      direction: rtl;
    }
    
    .@{select-tree-prefix-cls} {
      border-radius: 0;

      &-list-holder-inner {
        align-items: stretch;

        .@{select-tree-prefix-cls}-treenode {
          .@{select-tree-prefix-cls}-node-content-wrapper {
            flex: auto;
          }
        }
      }
    }
  }
}

.@{select-tree-prefix-cls} {
  .antTreeFn(@select-tree-prefix-cls);

  
  & &-switcher {
    &_close {
      .@{select-tree-prefix-cls}-switcher-icon {
        svg {
          .@{tree-select-prefix-cls}-dropdown-rtl & {
            transform: rotate(90deg);
          }
        }
      }
    }

    &-loading-icon {
      .@{tree-select-prefix-cls}-dropdown-rtl & {
        transform: scaleY(-1);
      }
    }
  }
}

@root-entry-name: default;


@tree-prefix-cls: ~'@{ant-prefix}-tree';

.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
  
  .@{tree-prefix-cls}-treenode {
    position: relative;

    
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 4px;
      left: 0;
      transition: background-color 0.3s;
      content: '';
      pointer-events: none;
      height: @tree-node-height;
    }

    

    
    > * {
      z-index: 1;
    }

    
    .@{tree-prefix-cls}-switcher {
      transition: all 0.3s;
    }

    
    .@{tree-prefix-cls}-node-content-wrapper {
      border-radius: 0;
      user-select: none;
      width: 100%;
      &:hover {
        background: transparent;
      }

      &.@{tree-prefix-cls}-node-selected {
        
        background: transparent;
      }
    }

    
    &-selected {
      
      .@{tree-prefix-cls}-node-content-wrapper {
        background: transparent;
      }
      &::before {
        background-color: transparent !important;
      }
    }
  }
}


@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');

.@{tree-prefix-cls} {
  .antTreeFn(@tree-prefix-cls);
}


@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';

.@{tree-prefix-cls} {
  &-rtl {
    direction: rtl;
    .@{tree-prefix-cls}-node-content-wrapper[draggable='true'] {
      .@{tree-prefix-cls}-drop-indicator {
        &::after {
          right: -6px;
          left: unset;
        }
      }
    }
  }

  
  .@{tree-node-prefix-cls} {
    &-rtl {
      direction: rtl;
    }
  }

  
  &-switcher {
    &_close {
      .@{tree-prefix-cls}-switcher-icon {
        svg {
          .@{tree-prefix-cls}-rtl & {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
  
  &-show-line {
    
    .@{tree-prefix-cls}-indent {
      &-unit {
        &::before {
          .@{tree-prefix-cls}-rtl& {
            right: auto;
            left: -(@tree-title-height / 2) - 1px;
            border-right: none;
            border-left: 1px solid @border-color-base;
          }
        }
      }
    }
  }
  
  &-checkbox {
    .@{tree-prefix-cls}-rtl & {
      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
    }
  }
}

.@{select-tree-prefix-cls} {
  
  &-checkbox {
    .@{tree-prefix-cls}-select-dropdown-rtl & {
      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
    }
  }
}


@root-entry-name: default;


@typography-prefix-cls: ~'@{ant-prefix}-typography';


.@{typography-prefix-cls} {
  color: @neutral-fg-2-normal;
  word-break: break-word;

  &&-secondary {
    color: @neutral-fg-3-normal;
  }

  &&-success {
    color: @status-success-fg-1-normal;
  }

  &&-warning {
    color: @status-warning-fg-1-normal;
  }

  &&-danger {
    color: @status-error-fg-1-normal;

    a&:active,
    a&:focus {
      color: @status-error-fg-1-active;
    }

    a&:hover {
      color: @status-error-fg-1-hover;
    }
  }

  &&-disabled {
    color: @neutral-fg-disabled;
    cursor: not-allowed;
    user-select: none;
  }

  
  div&,
  p {
    .typography-paragraph();
  }

  h1&,
  div&-h1,
  div&-h1 > textarea,
  h1 {
    .typography-title-1();
  }