}
     &.@{avatar-prefix-cls}-icon {
         font-size: @font-size;
         >.@{iconfont-css-prefix}{
             margin: 0;
        }
    }
}
 .@{avatar-prefix-cls}-group {
     display: inline-flex;
     .@{avatar-prefix-cls}{
         border: 1px solid @avatar-group-border-color;
         &:not(:first-child) {
             margin-left: @avatar-group-overlapping;
        }
    }
     &-popover {
         .@{ant-prefix}-avatar + .@{ant-prefix}-avatar {
             margin-left: @avatar-group-space;
        }
    }
}
 .@{avatar-prefix-cls}-group {
     &-rtl {
         .@{avatar-prefix-cls}:not(:first-child) {
             margin-right: @avatar-group-overlapping;
             margin-left: 0;
        }
    }
     &-popover.@{ant-prefix}-popover-rtl {
         .@{ant-prefix}-avatar + .@{ant-prefix}-avatar {
             margin-right: @avatar-group-space;
             margin-left: 0;
        }
    }
}
 @root-entry-name: default;
 @backtop-prefix-cls: ~'@{ant-prefix}-back-top';
 .@{backtop-prefix-cls}{
     .reset-component();
     position: fixed;
     right: 100px;
     bottom: 50px;
     z-index: @zindex-back-top;
     width: 40px;
     height: 40px;
     cursor: pointer;
     &:empty {
         display: none;
    }
     &-rtl {
         right: auto;
         left: 100px;
         direction: rtl;
    }
     &-content {
         width: 40px;
         height: 40px;
         overflow: hidden;
         color: @back-top-color;
         text-align: center;
         background-color: @back-top-bg;
         border-radius: 20px;
         transition: all 0.3s;
         &:hover {
             background-color: @back-top-hover-bg;
             transition: all 0.3s;
        }
    }
     &-icon {
         font-size: 24px;
         line-height: 40px;
    }
}
 @media screen and (max-width: @screen-md) {
     .@{backtop-prefix-cls}{
         right: 60px;
         &-rtl {
             right: auto;
             left: 60px;
        }
    }
}
 @media screen and (max-width: @screen-xs) {
     .@{backtop-prefix-cls}{
         right: 20px;
         &-rtl {
             right: auto;
             left: 20px;
        }
    }
}
 @root-entry-name: default;
 @badge-prefix-cls: ~'@{ant-prefix}-badge';
 @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
 .@{badge-prefix-cls}{
     .reset-component();
     position: relative;
     display: inline-block;
     line-height: 1;
     &-count {
         z-index: @zindex-badge;
         min-width: @badge-height;
         height: @badge-height;
         color: @neutral-fg-on-color;
         font-weight: @font-weight-regular;
         font-size: @font-size-digit-s;
         line-height: @badge-height;
         white-space: nowrap;
         text-align: center;
         background: @status-error-fg-1-normal;
         border-radius: (@badge-height / 2);
         a, a:hover {
             color: @neutral-fg-on-color;
        }
    }
     &-count-sm {
         min-width: @badge-height-sm;
         height: @badge-height-sm;
         padding: 0;
         font-size: @font-size-body-s;
         line-height: @badge-height-sm;
         border-radius: (@badge-height-sm / 2);
    }
     &-multiple-words {
         padding: 0 4px;
    }
     &-dot {
         z-index: @zindex-badge;
         width: @badge-dot-size;
         min-width: @badge-dot-size;
         height: @badge-dot-size;
         background: @highlight-color;
         border-radius: 100%;
    }
     &-dot.@{number-prefix-cls}{
         transition: background 1.5s;
    }
     &-count, &-dot, .@{number-prefix-cls}-custom-component {
         position: absolute;
         top: 0;
         right: 0;
         transform: translate(50%, -50%);
         transform-origin: 100% 0%;
         &.@{iconfont-css-prefix}-spin {
             animation: antBadgeLoadingCircle 1s infinite linear;
        }
    }
     &-status {
         line-height: inherit;
         vertical-align: baseline;
         &-dot {
             position: relative;
             top: -1px;
             display: inline-block;
             width: @badge-status-size;
             height: @badge-status-size;
             vertical-align: middle;
             border-radius: 50%;
        }
         &-success {
             background-color: @status-success-bg-1-normal;
        }
         &-processing {
             position: relative;
             background-color: @brand-bg-1-normal;
             &::after {
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 border: 1px solid @processing-color;
                 border-radius: 50%;
                 animation: antStatusProcessing 1.2s infinite ease-in-out;
                 content: '';
            }
        }
         &-default {
             background-color: @neutral-fg-5-normal;
        }
         &-error {
             background-color: @status-error-bg-1-normal;
        }
         &-warning {
             background-color: @status-warning-bg-1-normal;
        }
         .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
             .make-color-classes(@i - 1);
             @color: extract(@preset-colors, @i);
             @darkColor: '@{color}-6';
             &-@{color}{
                 background: @@darkColor;
            }
        }
         .make-color-classes();
         &-text {
             margin-left: 6px;
             color: @neutral-fg-2-normal;
             font-size: @font-size-body-m;
        }
    }
     &-zoom-appear, &-zoom-enter {
         animation: antZoomBadgeIn @animation-duration-slow @ease-out-back;
         animation-fill-mode: both;
    }
     &-zoom-leave {
         animation: antZoomBadgeOut @animation-duration-slow @ease-in-back;
         animation-fill-mode: both;
    }
     &-not-a-wrapper {
         .@{badge-prefix-cls}-zoom-appear, .@{badge-prefix-cls}-zoom-enter {
             animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back;
        }
         .@{badge-prefix-cls}-zoom-leave {
             animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back;
        }
         &:not(.@{badge-prefix-cls}-status) {
             vertical-align: middle;
        }
         .@{number-prefix-cls}-custom-component, .@{badge-prefix-cls}-count {
             transform: none;
        }
         .@{number-prefix-cls}-custom-component, .@{number-prefix-cls}{
             position: relative;
             top: auto;
             display: block;
             transform-origin: 50% 50%;
        }
    }
}
 @keyframes antStatusProcessing {
     0% {
         transform: scale(0.8);
         opacity: 0.5;
    }
     100% {
         transform: scale(2.4);
         opacity: 0;
    }
}
 .safari-fix-motion() {
     -webkit-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
}
 .@{number-prefix-cls}{
     overflow: hidden;
     direction: ltr;
     &-only {
         position: relative;
         display: inline-block;
         height: @badge-height;
         transition: all @animation-duration-slow @ease-in-out;
         .safari-fix-motion;
         > p.@{number-prefix-cls}-only-unit {
             height: @badge-height;
             margin: 0;
             .safari-fix-motion;
        }
    }
     &-symbol {
         vertical-align: top;
    }
}
 @keyframes antZoomBadgeIn {
     0% {
         transform: scale(0) translate(50%, -50%);
         opacity: 0;
    }
     100% {
         transform: scale(1) translate(50%, -50%);
    }
}
 @keyframes antZoomBadgeOut {
     0% {
         transform: scale(1) translate(50%, -50%);
    }
     100% {
         transform: scale(0) translate(50%, -50%);
         opacity: 0;
    }
}
 @keyframes antNoWrapperZoomBadgeIn {
     0% {
         transform: scale(0);
         opacity: 0;
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes antNoWrapperZoomBadgeOut {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(0);
         opacity: 0;
    }
}
 @keyframes antBadgeLoadingCircle {
     0% {
         transform-origin: 50%;
    }
     100% {
         transform: translate(50%, -50%) rotate(360deg);
         transform-origin: 50%;
    }
}
 @ribbon-prefix-cls: ~'@{ant-prefix}-ribbon';
 @ribbon-wrapper-prefix-cls: ~'@{ant-prefix}-ribbon-wrapper';
 .@{ribbon-wrapper-prefix-cls}{
     position: relative;
}
 .@{ribbon-prefix-cls}{
     .reset-component();
     position: absolute;
     top: 8px;
     height: 22px;
     padding: 0 8px;
     color: @badge-text-color;
     line-height: 22px;
     white-space: nowrap;
     background-color: @brand-bg-1-normal;
     border-radius: @radius-s;
     &-text {
         color: @white;
    }
     &-corner {
         position: absolute;
         top: 100%;
         width: 8px;
         height: 8px;
         color: currentcolor;
         border: 4px solid;
         transform: scaleY(0.75);
         transform-origin: top;
         &::after {
             position: absolute;
             top: -4px;
             left: -4px;
             width: inherit;
             height: inherit;
             color: rgba(0, 0, 0, 0.25);
             border: inherit;
             content: '';
        }
    }
     .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
         .make-color-classes(@i - 1);
         @color: extract(@preset-colors, @i);
         @darkColor: '@{color}-6';
         &-color-@{color}{
             color: @@darkColor;
             background: @@darkColor;
        }
    }
     .make-color-classes();
     &.@{ribbon-prefix-cls}-placement-end {
         right: -8px;
         border-bottom-right-radius: 0;
         .@{ribbon-prefix-cls}-corner {
             right: 0;
             border-color: currentcolor transparent transparent currentcolor;
        }
    }
     &.@{ribbon-prefix-cls}-placement-start {
         left: -8px;
         border-bottom-left-radius: 0;
         .@{ribbon-prefix-cls}-corner {
             left: 0;
             border-color: currentcolor currentcolor transparent transparent;
        }
    }
}
 .@{badge-prefix-cls}{
     &-rtl {
         direction: rtl;
    }
     &:not(&-not-a-wrapper) &-count, &:not(&-not-a-wrapper) &-dot, &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
         .@{badge-prefix-cls}-rtl& {
             right: auto;
             left: 0;
             direction: ltr;
             transform: translate(-50%, -50%);
             transform-origin: 0% 0%;
        }
    }
     &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
         right: auto;
         left: 0;
         transform: translate(-50%, -50%);
         transform-origin: 0% 0%;
    }
     &-status {
         &-text {
             .@{badge-prefix-cls}-rtl & {
                 margin-right: 8px;
                 margin-left: 0;
            }
        }
    }
     &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
         .@{badge-prefix-cls}-zoom-appear, .@{badge-prefix-cls}-zoom-enter {
             animation-name: antZoomBadgeInRtl;
        }
         .@{badge-prefix-cls}-zoom-leave {
             animation-name: antZoomBadgeOutRtl;
        }
    }
}
 .@{ribbon-prefix-cls}-rtl {
     direction: rtl;
     &.@{ribbon-prefix-cls}-placement-end {
         right: unset;
         left: -8px;
         border-bottom-right-radius: @border-radius-sm;
         border-bottom-left-radius: 0;
         .@{ribbon-prefix-cls}-corner {
             right: unset;
             left: 0;
             border-color: currentcolor currentcolor transparent transparent;
             &::after {
                 border-color: currentcolor currentcolor transparent transparent;
            }
        }
    }
     &.@{ribbon-prefix-cls}-placement-start {
         right: -8px;
         left: unset;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: @border-radius-sm;
         .@{ribbon-prefix-cls}-corner {
             right: 0;
             left: unset;
             border-color: currentcolor transparent transparent currentcolor;
             &::after {
                 border-color: currentcolor transparent transparent currentcolor;
            }
        }
    }
}
 @keyframes antZoomBadgeInRtl {
     0% {
         transform: scale(0) translate(-50%, -50%);
         opacity: 0;
    }
     100% {
         transform: scale(1) translate(-50%, -50%);
    }
}
 @keyframes antZoomBadgeOutRtl {
     0% {
         transform: scale(1) translate(-50%, -50%);
    }
     100% {
         transform: scale(0) translate(-50%, -50%);
         opacity: 0;
    }
}
 @root-entry-name: default;
 @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
 .@{breadcrumb-prefix-cls}{
     .reset-component();
     color: @neutral-fg-3-normal;
     font-size: @font-size-body-m;
     .@{iconfont-css-prefix}{
         font-size: @font-size-body-m;
    }
     ol {
         display: flex;
         flex-wrap: wrap;
         margin: 0;
         padding: 0;
         list-style: none;
    }
     a {
         color: @neutral-fg-3-normal;
         transition: color 0.3s;
         &:hover {
             color: @brand-fg-1-hover;
        }
    }
     li:last-child {
         color: @neutral-fg-2-normal;
         font-weight: @font-weight-bold;
         a {
             color: @neutral-fg-2-normal;
        }
    }
     li:last-child > &-separator {
         display: none;
    }
     &-separator {
         margin: @breadcrumb-separator-margin;
         color: @neutral-fg-3-normal;
    }
     &-link {
         > .@{iconfont-css-prefix}+ span, > .@{iconfont-css-prefix}+ a {
             margin-left: 4px;
        }
    }
     &-overlay-link {
         > .@{iconfont-css-prefix}{
             margin-left: 4px;
        }
    }
}
 .@{breadcrumb-prefix-cls}{
     &-rtl {
         .clearfix();
         direction: rtl;
         > span {
             float: right;
        }
    }
     &-link {
         > .@{iconfont-css-prefix}+ span, > .@{iconfont-css-prefix}+ a {
             .@{breadcrumb-prefix-cls}-rtl & {
                 margin-right: 4px;
                 margin-left: 0;
            }
        }
    }
     &-overlay-link {
         > .@{iconfont-css-prefix}{
             .@{breadcrumb-prefix-cls}-rtl & {
                 margin-right: 4px;
                 margin-left: 0;
            }
        }
    }
}
 @root-entry-name: default;
 .button-size(@height;
 @padding-horizontal;
 @font-size;
 @border-radius) {
     @padding-vertical: max( (round(((@height - @font-size * @line-height-base) / 2) * 10) / 10) - @border-width-base, 0 );
     height: @height;
     padding: @padding-vertical @padding-horizontal;
     font-size: @font-size;
     border-radius: @border-radius;
}
 .button-color(@color;
 @background;
 @border) {
     color: @color;
     border-color: @border;
     & when not(@background = null) {
         background: @background;
    }
     > a:only-child {
         color: currentcolor;
         &::after {
             top: 0;
             right: 0;
             bottom: 0;
             left: 0;
             background: transparent;
             content: '';
        }
    }
}
 .button-disabled(@color: @neutral-fg-disabled;
 @background: @neutral-bg-disabled;
 @border: @neutral-stroke-disabled) {
     &[disabled] {
         &, &:hover, &:focus, &:active {
             .button-color(@color;
             @background;
             @border);
             text-shadow: none;
             box-shadow: none;
        }
    }
}
 .button-variant-primary(@color;
 @background;
 @backgroundHover: yellow;
 @backgroundActive: yellow) {
     .button-color(@color;
     @background;
     @background);
     text-shadow: @btn-text-shadow;
     box-shadow: @btn-primary-shadow;
     &:hover, &:focus {
         & when (@theme = dark) {
             .button-color( @color;
             ~`colorPalette('@{background}', 7) `;
             ~`colorPalette('@{background}', 7) ` );
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @color;
             @backgroundHover;
             @backgroundHover );
        }
         & when (@theme = variable) {
             .button-color(@color;
             @backgroundHover;
             @backgroundHover);
        }
    }
     &:active {
         & when (@theme = dark) {
             .button-color( @color;
             ~`colorPalette('@{background}', 5) `;
             ~`colorPalette('@{background}', 5) ` );
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @color;
             @backgroundActive;
             @backgroundActive );
        }
         & when (@theme = variable) {
             .button-color(@color;
             @backgroundActive;
             @backgroundActive);
        }
    }
     .button-disabled();
}
 .button-variant-other(@color;
 @background;
 @border) {
     .button-color(@color;
     @background;
     @border);
     &:hover, &:focus {
         & when (@theme = dark) {
             .button-color(@primary-5;
             @background;
             @primary-5);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @brand-stroke-1-hover;
             @background;
             @brand-stroke-1-hover );
        }
         & when (@theme = variable) {
             .button-color(@brand-stroke-1-hover;
             @background;
             @brand-stroke-1-hover);
        }
    }
     &:active {
         & when (@theme = dark) {
             .button-color(@primary-7;
             @background;
             @primary-7);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @brand-stroke-1-active;
             @background;
             @brand-stroke-1-active );
        }
         & when (@theme = variable) {
             .button-color(@brand-stroke-1-active;
             @background;
             @brand-stroke-1-active);
        }
    }
     .button-disabled();
}
 .button-variant-ghost(@color;
 @border;
 @borderHover: yellow;
 @borderActive: yellow) {
     .button-color(@color;
     null;
     @border);
     text-shadow: none;
     &:hover, &:focus {
         & when (@border = transparent) {
             & when (@theme = dark) {
                 .button-color(~`colorPalette('@{color}', 7) `;
                 null;
                 transparent);
            }
             & when (not (@theme = dark) and not (@theme = variable)) {
                 .button-color(@borderHover;
                 null;
                 transparent);
            }
             & when (@theme = variable) {
                 .button-color(@borderActive;
                 transparent;
                 transparent);
            }
        }
         & when not (@border = transparent) {
             & when (@theme = dark) {
                 .button-color( ~`colorPalette('@{color}', 7) `;
                 null;
                 ~`colorPalette('@{color}', 7) ` );
            }
             & when (not (@theme = dark) and not (@theme = variable)) {
                 .button-color( @borderHover;
                 null;
                 @borderHover );
            }
             & when (@theme = variable) {
                 .button-color(@borderHover;
                 transparent;
                 @borderHover);
            }
        }
    }
     &:active {
         & when (@border = transparent) {
             & when (@theme = dark) {
                 .button-color(~`colorPalette('@{color}', 5) `;
                 null;
                 transparent);
            }
             & when (not (@theme = dark) and not (@theme = variable)) {
                 .button-color(@borderActive;
                 null;
                 transparent);
            }
             & when (@theme = variable) {
                 .button-color(@borderActive;
                 transparent;
                 transparent);
            }
        }
         & when not (@border = transparent) {
             & when (@theme = dark) {
                 .button-color( ~`colorPalette('@{color}', 5) `;
                 null;
                 ~`colorPalette('@{color}', 5) ` );
            }
             & when (not (@theme = dark) and not (@theme = variable)) {
                 .button-color( @borderActive;
                 null;
                 @borderActive );
            }
             & when (@theme = variable) {
                 .button-color(@borderActive;
                 transparent;
                 @borderActive);
            }
        }
    }
     .button-disabled();
}
 .button-group-base(@btnClassName) {
     position: relative;
     display: inline-flex;
     > .@{btnClassName}, > span > .@{btnClassName}{
         position: relative;
         &:hover, &:focus, &:active {
             z-index: 2;
        }
         &[disabled] {
             z-index: 0;
        }
    }
     .@{btnClassName}-icon-only {
         font-size: @font-size-body-m;
    }
}
 .btn() {
     position: relative;
     display: inline-flex;
     font-weight: @font-weight-regular;
     white-space: nowrap;
     text-align: center;
     background-image: none;
     border: @btn-border-width @btn-border-style transparent;
     box-shadow: @btn-shadow;
     cursor: pointer;
     transition: all 0.3s @ease-in-out;
     user-select: none;
     touch-action: manipulation;
     min-width: 60px;
     max-width: 256px;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
     .button-size( @btn-height-base;
     @btn-padding-horizontal-base;
     @font-size-body-m;
     @radius-m );
     > .@{iconfont-css-prefix}{
         line-height: 1;
         font-size: 20px;
    }
     &, &:active, &:focus {
         outline: 0;
    }
     &:not([disabled]):hover {
         text-decoration: none;
    }
     &:not([disabled]):active {
         outline: 0;
         box-shadow: none;
    }
     &[disabled] {
         cursor: not-allowed;
         > * {
             pointer-events: none;
        }
    }
     &-lg {
         .button-size( @btn-height-lg;
         @btn-padding-horizontal-lg;
         @font-size-body-m;
         @radius-m );
    }
     &-sm {
         max-width: 192px;
         min-width: 48px;
         .button-size( @btn-height-sm;
         @btn-padding-horizontal-sm;
         @font-size-body-s;
         @radius-m );
    }
     .button-virtual-text {
         position: absolute !important;
         white-space: nowrap !important;
         top: 0 !important;
         visibility: hidden !important;
         z-index: -10000 !important;
         width: auto !important;
    }
}
 .btn-primary() {
     .button-variant-primary(@neutral-fg-on-color;
     @brand-bg-1-normal;
     @brand-bg-1-hover;
     @brand-bg-1-active);
}
 .btn-default() {
     .button-variant-other(@neutral-fg-2-normal;
     @neutral-bg-2-normal;
     @neutral-stroke-1-normal;
     );
     &:hover, &:focus, &:active {
         text-decoration: none;
         background: @neutral-bg-2-normal;
    }
}
 .btn-ghost() {
     .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}
 .btn-dashed() {
     .button-variant-other(@neutral-fg-2-normal, @neutral-bg-2-normal, @neutral-stroke-1-normal);
     border-style: dashed;
}
 .btn-danger() {
     .button-variant-primary(@neutral-fg-on-color, @status-error-bg-1-normal, @status-error-bg-1-hover, @status-error-bg-1-active);
}
 .btn-danger-default() {
     .button-color(@status-error-fg-1-normal, @neutral-bg-2-normal, @status-error-stroke-1-normal);
     &:hover, &:focus {
         & when (@theme = dark) {
             .button-color( ~`colorPalette('@{error-color}', 7) `;
             @neutral-bg-2-normal;
             ~`colorPalette('@{error-color}', 7) ` );
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @status-error-fg-1-hover;
             @neutral-bg-2-normal;
             @status-error-stroke-1-hover );
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-hover;
             @neutral-bg-2-normal;
             @status-error-stroke-1-hover);
        }
    }
     &:active {
         & when (@theme = dark) {
             .button-color( ~`colorPalette('@{error-color}', 5) `;
             @neutral-bg-2-normal;
             ~`colorPalette('@{error-color}', 5) ` );
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color( @status-error-fg-1-active;
             @neutral-bg-2-normal;
             @status-error-stroke-1-active );
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-active;
             @neutral-bg-2-normal;
             @status-error-stroke-1-active);
        }
    }
     .button-disabled();
}
 .btn-danger-link() {
     .button-variant-other(@status-error-fg-1-normal, transparent, transparent);
     box-shadow: none;
     &:hover, &:focus {
         & when (@theme = dark) {
             .button-color(~`colorPalette('@{error-color}', 7) `;
             transparent;
             transparent);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color(@status-error-fg-1-hover;
             transparent;
             transparent);
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-hover;
             transparent;
             transparent);
        }
    }
     &:active {
         & when (@theme = dark) {
             .button-color(~`colorPalette('@{error-color}', 5) `;
             transparent;
             transparent);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color(@status-error-fg-1-active;
             transparent;
             transparent);
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-active;
             transparent;
             transparent);
        }
    }
     .button-disabled(@neutral-fg-disabled;
     transparent;
     transparent);
}
 .btn-link() {
     .button-variant-other(@brand-fg-1-normal, transparent, transparent);
     box-shadow: none;
     &:hover, &:focus {
         color: @brand-fg-1-hover;
         background: transparent;
         border-color: transparent;
    }
     &:active {
         color: @brand-fg-1-active;
         border-color: transparent;
         background: transparent;
    }
     .button-disabled(@disabled-color;
     transparent;
     transparent);
}
 .btn-href-disabled() {
     cursor: not-allowed;
     > * {
         pointer-events: none;
    }
     &, &:hover, &:focus, &:active {
         .button-color(@neutral-fg-disabled,transparent, transparent);
         text-shadow: none;
         box-shadow: none;
    }
}
 .btn-text() {
     .button-variant-other(@brand-fg-1-normal, transparent, transparent);
     box-shadow: none;
     &:hover, &:focus {
         color: @brand-fg-1-normal;
         background: @neutral-bg-1-hover-2;
         border-color: transparent;
    }
     &:active {
         color: @brand-fg-1-normal;
         background: @neutral-bg-1-active-2;
         border-color: transparent;
    }
     .button-disabled(@neutral-fg-disabled,transparent,transparent);
}
 .btn-danger-text() {
     .button-variant-other(@status-error-fg-1-normal, transparent, transparent);
     box-shadow: none;
     &:hover, &:focus {
         & when (@theme = dark) {
             .button-color(~`colorPalette('@{error-color}', 7) `;
             @neutral-bg-1-hover-2;
             transparent);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color(@status-error-fg-1-hover;
             @neutral-bg-1-hover-2;
             transparent);
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-hover;
             @neutral-bg-1-hover-2;
             transparent);
        }
    }
     &:active {
         & when (@theme = dark) {
             .button-color(~`colorPalette('@{error-color}', 5) `;
             fadein(@neutral-bg-1-active-2, 1%);
             transparent);
        }
         & when (not (@theme = dark) and not (@theme = variable)) {
             .button-color(@status-error-fg-1-active;
             fadein(@neutral-bg-1-active-2, 1%);
             transparent);
        }
         & when (@theme = variable) {
             .button-color(@status-error-fg-1-active;
             fadein(@neutral-bg-1-active-2, 1%);
             transparent);
        }
    }
     .button-disabled(@neutral-fg-disabled);
}
 .btn-round(@btnClassName: btn) {
     .button-size(@btn-circle-size;
     (@btn-circle-size / 2);
     @font-size-body-m;
     @btn-circle-size);
     &.@{btnClassName}-lg {
         .button-size( @btn-circle-size-lg;
         (@btn-circle-size-lg / 2);
         @btn-font-size-lg;
         @btn-circle-size-lg );
    }
     &.@{btnClassName}-sm {
         .button-size( @btn-circle-size-sm;
         (@btn-circle-size-sm / 2);
         @font-size-body-m;
         @btn-circle-size-sm );
    }
}
 .btn-square(@btnClassName: btn) {
     .square(@btn-square-size);
     .button-size(@btn-square-size;
     0;
     @btn-square-only-icon-size;
     @radius-m);
     & > * {
         font-size: @btn-square-only-icon-size;
    }
     &.@{btnClassName}-lg {
         .square(@btn-square-size-lg);
         .button-size(@btn-square-size-lg;
         0;
         @btn-square-only-icon-size-lg;
         @radius-m);
         & > * {
             font-size: @btn-square-only-icon-size-lg;
        }
    }
     &.@{btnClassName}-sm {
         .square(@btn-square-size-sm);
         .button-size(@btn-square-size-sm;
         0;
         @btn-square-only-icon-size-sm;
         @radius-m);
         & > * {
             font-size: @btn-square-only-icon-size-sm;
        }
    }
}
 .btn-circle(@btnClassName: btn) {
     min-width: @btn-height-base;
     padding-right: 0;
     padding-left: 0;
     text-align: center;
     border-radius: 50%;
     &.@{btnClassName}-lg {
         min-width: @btn-height-lg;
         border-radius: 50%;
    }
     &.@{btnClassName}-sm {
         min-width: @btn-height-sm;
         border-radius: 50%;
    }
}
 .btn-group(@btnClassName: btn) {
     .button-group-base(@btnClassName);
     .@{btnClassName}+ .@{btnClassName}, .@{btnClassName}+ &, span + .@{btnClassName}, .@{btnClassName}+ span, > span + span, & + .@{btnClassName}, & + & {
         margin-left: -1px;
    }
     .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
         border-left-color: transparent;
    }
     .@{btnClassName}{
         border-radius: 0;
    }
     > .@{btnClassName}:first-child, > span:first-child > .@{btnClassName}{
         margin-left: 0;
    }
     > .@{btnClassName}:only-child {
         border-radius: @radius-m;
    }
     > span:only-child > .@{btnClassName}{
         border-radius: @radius-m;
    }
     > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName}{
         border-top-left-radius: @radius-m;
         border-bottom-left-radius: @radius-m;
    }
     > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName}{
         border-top-right-radius: @radius-m;
         border-bottom-right-radius: @radius-m;
    }
     &-sm {
         > .@{btnClassName}:only-child {
             border-radius: @radius-m;
        }
         > span:only-child > .@{btnClassName}{
             border-radius: @radius-m;
        }
         > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName}{
             border-top-left-radius: @radius-m;
             border-bottom-left-radius: @radius-m;
        }
         > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName}{
             border-top-right-radius: @radius-m;
             border-bottom-right-radius: @radius-m;
        }
    }
     & > & {
         float: left;
    }
     & > &:not(:first-child):not(:last-child) > .@{btnClassName}{
         border-radius: 0;
    }
     & > &:first-child:not(:last-child) {
         > .@{btnClassName}:last-child {
             padding-right: 8px;
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
        }
    }
     & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
         padding-left: 8px;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
    }
}
 @btn-prefix-cls: ~'@{ant-prefix}-btn';
 @btn-ghost-color: @text-color;
 @btn-ghost-bg: transparent;
 @btn-ghost-border: @border-color-base;
 .@{btn-prefix-cls}{
     line-height: @font-line-height;
     .btn();
     .btn-default();
     > span {
         display: inline-block;
    }
     > span:not(.@{iconfont-css-prefix}):not(.button-virtual-text) {
         width: auto;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
    }
     &-primary {
         .btn-primary();
         .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
             border-right-color: @primary-5;
             border-left-color: @primary-5;
             &:disabled {
                 border-color: @neutral-stroke-1-normal;
            }
        }
         .@{btn-prefix-cls}-group &:first-child {
             &:not(:last-child) {
                 border-right-color: @primary-5;
                 &[disabled] {
                     border-right-color: @neutral-stroke-1-normal;
                }
            }
        }
         .@{btn-prefix-cls}-group &:last-child:not(:first-child), .@{btn-prefix-cls}-group & + & {
             border-left-color: @primary-5;
             &[disabled] {
                 border-left-color: @neutral-stroke-1-normal;
            }
        }
    }
     &-ghost {
         .btn-ghost();
    }
     &-dashed {
         .btn-dashed();
    }
     &-danger {
         .btn-danger();
    }
     &-link {
         .btn-link();
    }
     &-text {
         .btn-text();
    }
     &-text&-icon-only:not(:disabled) {
         color: @neutral-fg-2-normal;
         &:hover, &:active {
             color: @neutral-fg-2-normal;
        }
    }
     &-dangerous {
         .btn-danger-default();
    }
     &-dangerous&-primary {
         .btn-danger();
    }
     &-dangerous&-link {
         .btn-danger-link();
    }
     &-dangerous&-text {
         .btn-danger-text();
    }
     &-icon-only {
         min-width: auto;
         .btn-square(@btn-prefix-cls);
         > .@{iconfont-css-prefix}{
             display: flex;
             justify-content: center;
        }
         .@{iconfont-css-prefix}-loading {
             padding: 0 !important;
        }
    }
     a&-icon-only {
         > .@{iconfont-css-prefix}{
             display: inline;
        }
    }
     &-round {
         .btn-round(@btn-prefix-cls);
         &.@{btn-prefix-cls}-icon-only {
             width: auto;
        }
    }
     &-circle {
         .btn-circle(@btn-prefix-cls);
    }
     &::before {
         position: absolute;
         top: -@btn-border-width;
         right: -@btn-border-width;
         bottom: -@btn-border-width;
         left: -@btn-border-width;
         z-index: 1;
         display: none;
         border-radius: inherit;
         opacity: 0.35;
         transition: opacity 0.2s;
         content: '';
         pointer-events: none;
    }
     .@{iconfont-css-prefix}{
         transition: margin-left 0.3s @ease-in-out;
         &.@{iconfont-css-prefix}-plus, &.@{iconfont-css-prefix}-minus {
             > svg {
                 shape-rendering: optimizespeed;
            }
        }
    }
     &&-loading {
         position: relative;
         border: none;
         cursor: default;
         &.@{btn-prefix-cls}-primary {
             background-color: @brand-bg-1-hover;
        }
         &.@{btn-prefix-cls}-danger {
             background-color: @status-error-bg-1-hover;
        }
         &.@{btn-prefix-cls}-default {
             color: @neutral-fg-2-normal;
             border: 1px solid @neutral-stroke-1-normal;
        }
         &::before {
             display: block;
        }
    }
     & > &-loading-icon {
         transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
         .@{iconfont-css-prefix}{
             padding-right: @padding-xs;
             animation: none;
             svg {
                 animation: loadingCircle 1s infinite linear;
            }
        }
    }
     &-group {
         .btn-group(@btn-prefix-cls);
    }
     &:focus > span, &:active > span {
         position: relative;
    }
     > .@{iconfont-css-prefix}+ span, > span + .@{iconfont-css-prefix}{
         margin-left: 4px;
         vertical-align: top;
    }
     &&-background-ghost {
         color: @btn-default-ghost-color;
         border-color: @btn-default-ghost-border;
         &, &:hover, &:active, &:focus {
             background: @btn-default-ghost-bg;
        }
         &:hover, &:focus {
             color: @primary-color-hover;
             border-color: @primary-color-hover;
        }
         &:active {
             color: @primary-color-active;
             border-color: @primary-color-active;
        }
         &[disabled] {
             color: @disabled-color;
             background: @btn-default-ghost-bg;
             border-color: @neutral-stroke-1-normal;
        }
    }
     &-background-ghost&-primary {
         .button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active);
    }
     &-background-ghost&-danger {
         .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
    }
     &-background-ghost&-dangerous {
         .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
    }
     &-background-ghost&-dangerous&-link {
         .button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active);
    }
     &-two-chinese-chars::first-letter {
         letter-spacing: 0.34em;
    }
     &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
         margin-right: -0.34em;
         letter-spacing: 0.34em;
    }
     &&-block {
         width: 100%;
         max-width: none;
    }
     &:empty {
         display: inline-block;
         width: 0;
         visibility: hidden;
         content: '\a0';
    }
}
 a.@{btn-prefix-cls}{
     line-height: @btn-height-base - 2px;
     &-disabled {
         .btn-href-disabled();
    }
     &-lg {
         line-height: @btn-height-lg - 2px;
    }
     &-sm {
         line-height: @btn-height-sm - 2px;
    }
}
 .ant-btn-compact-item.ant-btn.ant-btn-compact-first-item:not(.ant-btn-compact-last-item):not(.ant-btn-compact-item-rtl) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}
 .ant-btn-compact-item.ant-btn.ant-btn-compact-last-item:not(.ant-btn-compact-first-item):not(.ant-btn-compact-item-rtl) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}
 .ant-btn-icon-only.ant-btn-compact-item {
     flex: none;
}
 .ant-btn-compact-item:not(.ant-btn-compact-last-item):not(.ant-btn-compact-item-rtl) {
     margin-right: -1px;
}
 .ant-btn-compact-item:hover, .ant-btn-compact-item:focus, .ant-btn-compact-item:active {
     z-index: 2;
}
 .@{btn-prefix-cls}{
     &-rtl {
         direction: rtl;
    }
     &-primary {
         .@{btn-prefix-cls}-group &:last-child:not(:first-child), .@{btn-prefix-cls}-group & + & {
             .@{btn-prefix-cls}-group-rtl& {
                 border-right-color: @primary-5;
                 border-left-color: @neutral-stroke-1-normal;
            }
             &[disabled] {
                 .@{btn-prefix-cls}-group-rtl& {
                     border-right-color: @neutral-stroke-1-normal;
                     border-left-color: @primary-5;
                }
            }
        }
    }
     & > &-loading-icon {
         .@{iconfont-css-prefix}{
             .@{btn-prefix-cls}-rtl& {
                 padding-right: 0;
                 padding-left: @margin-xs;
            }
        }
    }
     > .@{iconfont-css-prefix}+ span, > span + .@{iconfont-css-prefix}{
         .@{btn-prefix-cls}-rtl& {
             margin-right: 8px;
             margin-left: 0;
        }
    }
}
 .btn-group(@btnClassName: btn) {
     .@{btnClassName}+ .@{btnClassName}, .@{btnClassName}+ &, span + .@{btnClassName}, .@{btnClassName}+ span, > span + span, & + .@{btnClassName}, & + & {
         .@{btnClassName}-rtl&, .@{btnClassName}-group-rtl& {
             margin-right: -1px;
             margin-left: auto;
        }
    }
     &.@{btnClassName}-group-rtl {
         direction: rtl;
    }
     > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName}{
         .@{btnClassName}-group-rtl& {
             border-radius: 0 @radius-m @radius-m 0;
        }
    }
     > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName}{
         .@{btnClassName}-group-rtl& {
             border-radius: @radius-m 0 0 @radius-m;
        }
    }
     &-sm {
         > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName}{
             .@{btnClassName}-group-rtl& {
                 border-radius: 0 @radius-m @radius-m 0;
            }
        }
         > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName}{
             .@{btnClassName}-group-rtl& {
                 border-radius: @radius-m 0 0 @radius-m;
            }
        }
    }
}
 @root-entry-name: default;
 @calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
 @calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
 .@{calendar-prefix-cls}{
     .reset-component();
     background: @calendar-full-bg;
     &-header {
         display: flex;
         justify-content: flex-end;
         padding: @padding-sm 0;
         .@{calendar-prefix-cls}-year-select {
             min-width: 80px;
        }
         .@{calendar-prefix-cls}-month-select {
             min-width: 70px;
             margin-left: @padding-xs;
        }
         .@{calendar-prefix-cls}-mode-switch {
             margin-left: @padding-xs;
        }
    }
     .@{calendar-picker-prefix-cls}-panel {
         background: @calendar-full-panel-bg;
         border: 0;
         border-top: @border-width-base @border-style-base @neutral-stroke-2-normal;
         border-radius: 0;
         .@{calendar-picker-prefix-cls}-month-panel, .@{calendar-picker-prefix-cls}-date-panel {
             width: auto;
        }
         .@{calendar-picker-prefix-cls}-body {
             padding: @padding-xs 0;
        }
         .@{calendar-picker-prefix-cls}-content {
             width: 100%;
        }
    }
     &-mini {
         border-radius: @radius-m;
         .@{calendar-picker-prefix-cls}-calendar-header {
             padding-right: @padding-xs;
             padding-left: @padding-xs;
        }
         .@{calendar-picker-prefix-cls}-panel {
             border-radius: 0 0 @radius-m @radius-m;
        }
         .@{calendar-picker-prefix-cls}-content {
             height: 256px;
             th {
                 height: auto;
                 padding: 0;
                 line-height: 18px;
            }
        }
         .@{calendar-picker-prefix-cls}-cell::before {
             pointer-events: none;
        }
    }
     &-full {
         .@{calendar-picker-prefix-cls}-panel {
             display: block;
             width: 100%;
             text-align: left;
             background: @calendar-full-bg;
             border: 0;
             .@{calendar-picker-prefix-cls}-body {
                 th, td {
                     padding: 0;
                }
                 th {
                     height: auto;
                     padding: 0 12px 5px 0;
                     line-height: 18px;
                }
            }
             .@{calendar-picker-prefix-cls}-cell {
                 &::before {
                     display: none;
                }
                 &:hover {
                     .@{calendar-prefix-cls}-date {
                         background: @neutral-bg-4-hover;
                    }
                }
                 .@{calendar-prefix-cls}-date-today::before {
                     display: none;
                }
                 &-selected, &-selected:hover {
                     .@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-date-today {
                         background: @brand-bg-2-selected;
                         .@{calendar-prefix-cls}-date-value {
                             color: @brand-fg-1-normal;
                        }
                    }
                }
            }
             .@{calendar-prefix-cls}-date {
                 display: block;
                 width: auto;
                 height: auto;
                 margin: 0 (@padding-xs / 2);
                 padding: (@padding-xs / 2) @padding-xs 0;
                 border: 0;
                 border-top: 2px solid @neutral-stroke-2-normal;
                 border-radius: 0;
                 transition: background 0.3s;
                 &-value {
                     line-height: 24px;
                     transition: color 0.3s;
                }
                 &-content {
                     position: static;
                     width: auto;
                     height: 86px;
                     overflow-y: auto;
                     color: @neutral-fg-2-normal;
                     line-height: @line-height-base;
                     text-align: left;
                }
                 &-today {
                     border-color: @brand-bg-1-normal;
                     .@{calendar-prefix-cls}-date-value {
                         color: @neutral-fg-2-normal;
                    }
                }
            }
        }
    }
}
 @media only screen and (max-width: @screen-xs) {
     .@{calendar-prefix-cls}{
         &-header {
             display: block;
             .@{calendar-prefix-cls}-year-select {
                 width: 50%;
            }
             .@{calendar-prefix-cls}-month-select {
                 width: ~'calc(50% - @{padding-xs})';
            }
             .@{calendar-prefix-cls}-mode-switch {
                 width: 100%;
                 margin-top: @padding-xs;
                 margin-left: 0;
                 > label {
                     width: 50%;
                     text-align: center;
                }
            }
        }
    }
}
 .@{calendar-prefix-cls}{
     &-rtl {
         direction: rtl;
    }
     &-header {
         .@{calendar-prefix-cls}-month-select {
             .@{calendar-prefix-cls}-rtl & {
                 margin-right: @padding-xs;
                 margin-left: 0;
            }
        }
         .@{calendar-prefix-cls}-mode-switch {
             .@{calendar-prefix-cls}-rtl & {
                 margin-right: @padding-xs;
                 margin-left: 0;
            }
        }
    }
     &-full {
         .@{calendar-picker-prefix-cls}-panel {
             .@{calendar-prefix-cls}-rtl& {
                 text-align: left;
            }
             .@{calendar-picker-prefix-cls}-body {
                 th {
                     .@{calendar-prefix-cls}-rtl& {
                         padding: 0 0 5px 12px;
                    }
                }
            }
             .@{calendar-prefix-cls}-date {
                 &-content {
                     .@{calendar-prefix-cls}-rtl& {
                         text-align: right;
                    }
                }
            }
        }
    }
}
 @root-entry-name: default;
 @card-prefix-cls: ~'@{ant-prefix}-card';
 @card-hoverable-hover-border: transparent;
 @card-action-icon-size: 16px;
 @gradient-min: fade(@card-skeleton-bg, 20%);
 @gradient-max: fade(@card-skeleton-bg, 40%);
 .@{card-prefix-cls}{
     .reset-component();
     position: relative;
     background: @neutral-bg-4-normal;
     border-radius: @radius-l;
     transition: box-shadow 0.3s, border-color 0.3s;
     &-rtl {
         direction: rtl;
    }
     &-hoverable {
         cursor: pointer;
         transition: box-shadow 0.3s, border-color 0.3s;
         &:hover {
             border-color: @brand-bg-1-hover;
             box-shadow: @shadow-1-down;
        }
    }
     &-bordered {
         border: @border-width-base @border-style-base @neutral-stroke-2-normal;
    }
     &-head {
         min-height: @card-head-height;
         margin-bottom: -1px;
         padding: 0 @card-padding-base;
         color: @neutral-fg-2-normal;
         font-weight: @font-weight-bold;
         font-size: @font-size-title-s;
         background: @card-head-background;
         border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;
         border-radius: @radius-l @radius-l 0 0;
         .clearfix();
         &-wrapper {
             display: flex;
             align-items: center;
        }
         &-title {
             display: inline-block;
             flex: 1;
             padding: @card-head-padding 0;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             > .@{ant-prefix}-typography, > .@{ant-prefix}-typography-edit-content {
                 left: 0;
                 margin-top: 0;
                 margin-bottom: 0;
            }
        }
         .@{ant-prefix}-tabs-top {
             clear: both;
             margin-bottom: @card-head-tabs-margin-bottom;
             color: @text-color;
             font-weight: normal;
             font-size: @font-size-base;
             &-bar {
                 border-bottom: @border-width-base @border-style-base @border-color-split;
            }
        }
    }
     &-extra {
         margin-left: auto;
         padding: @card-head-padding 0;
         color: @neutral-fg-2-normal;
         font-weight: normal;
         font-size: @font-size-body-m;
         .@{card-prefix-cls}-rtl & {
             margin-right: auto;
             margin-left: 0;
        }
    }
     &-body {
         padding: @card-padding-base;
         .clearfix();
    }
     &-contain-grid &-body {
         display: flex;
         flex-wrap: wrap;
    }
     &-contain-grid:not(&-loading) &-body {
         margin: -1px 0 0 -1px;
         padding: 0;
    }
     &-grid {
         width: 33.33%;
         padding: @card-padding-base;
         border: 0;
         border-radius: 0;
         box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset;
         transition: all 0.3s;
         &-hoverable {
             &:hover {
                 position: relative;
                 z-index: 1;
                 box-shadow: @shadow-1-down;
            }
        }
    }
     &-contain-tabs > &-head &-head-title {
         min-height: @card-head-height - @card-head-padding;
         padding-bottom: 0;
    }
     &-contain-tabs > &-head &-extra {
         padding-bottom: 0;
    }
     &-bordered &-cover {
         margin-top: -1px;
         margin-right: -1px;
         margin-left: -1px;
    }
     &-cover {
         > * {
             display: block;
             width: 100%;
        }
         img {
             border-radius: @radius-l @radius-l 0 0;
        }
    }
     &-actions {
         display: flex;
         justify-content: flex-end;
         margin: 0;
         padding: 0 16px;
         list-style: none;
         background: @neutral-bg-4-hover;
         .clearfix();
         & > li {
             height: 44px;
             line-height: 44px;
             color: @neutral-fg-3-normal;
             text-align: center;
             > span {
                 position: relative;
                 display: block;
                 min-width: 32px;
                 font-size: @font-size-body-m;
                 cursor: pointer;
                 &:hover {
                     color: @brand-fg-1-hover;
                     transition: color 0.3s;
                }
                 a:not(.@{ant-prefix}-btn), > .@{iconfont-css-prefix}{
                     display: inline-block;
                     width: 32px;
                     height: 32px;
                     color: @neutral-fg-3-normal;
                     line-height: 32px;
                     transition: color 0.3s;
                     border-radius: @radius-m;
                     &:hover {
                         color: @neutral-fg-3-normal;
                         background-color: @neutral-bg-1-hover-2;
                    }
                }
                 > .@{iconfont-css-prefix}{
                     font-size: @font-size-body-m;
                     line-height: 32px;
                }
            }
        }
    }
     &-type-inner &-head {
         padding: 0 @card-padding-base;
         background: @background-color-light;
         &-title {
             padding: @card-inner-head-padding 0;
             font-size: @font-size-base;
        }
    }
     &-type-inner &-body {
         padding: 16px @card-padding-base;
    }
     &-type-inner &-extra {
         padding: @card-inner-head-padding + 1.5px 0;
    }
     &-meta {
         display: flex;
         margin: -4px 0;
         .clearfix();
         &-avatar {
             padding-right: 16px;
             .@{card-prefix-cls}-rtl & {
                 padding-right: 0;
                 padding-left: 16px;
            }
        }
         &-detail {
             flex: 1;
             overflow: hidden;
             > div:not(:last-child) {
                 margin-bottom: @margin-xs;
            }
        }
         &-title {
             overflow: hidden;
             color: @neutral-fg-2-normal;
             font-weight: @font-weight-bold;
             font-size: @font-size-title-s;
             white-space: nowrap;
             text-overflow: ellipsis;
        }
         &-description {
             color: @neutral-fg-2-normal;
        }
    }
     &-loading {
         overflow: hidden;
    }
     &-loading &-body {
         user-select: none;
    }
}
 .@{card-prefix-cls}-small {
     > .@{card-prefix-cls}-head {
         min-height: @card-head-height-sm;
         padding: 0 @card-padding-base-sm;
         font-size: @card-head-font-size-sm;
         > .@{card-prefix-cls}-head-wrapper {
             > .@{card-prefix-cls}-head-title {
                 padding: @card-head-padding-sm 0;
            }
             > .@{card-prefix-cls}-extra {
                 padding: @card-head-padding-sm 0;
                 font-size: @card-head-font-size-sm;
            }
        }
    }
     > .@{card-prefix-cls}-body {
         padding: @card-padding-base-sm;
    }
}
 @root-entry-name: default;
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
 @carousel-dot-margin: 4px;
 .@{carousel-prefix-cls}{
     .reset-component();
     .slick-slider {
         position: relative;
         display: block;
         box-sizing: border-box;
         touch-action: pan-y;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: transparent;
    }
     .slick-list {
         position: relative;
         display: block;
         margin: 0;
         padding: 0;
         overflow: hidden;
         &:focus {
             outline: none;
        }
         &.dragging {
             cursor: pointer;
        }
         .slick-slide {
             pointer-events: none;
             input.@{ant-prefix}-radio-input, input.@{ant-prefix}-checkbox-input {
                 visibility: hidden;
            }
             &.slick-active {
                 pointer-events: auto;
                 input.@{ant-prefix}-radio-input, input.@{ant-prefix}-checkbox-input {
                     visibility: visible;
                }
            }
             > div > div {
                 vertical-align: bottom;
            }
        }
    }
     .slick-slider .slick-track, .slick-slider .slick-list {
         transform: translate3d(0, 0, 0);
         touch-action: pan-y;
    }
     .slick-track {
         position: relative;
         top: 0;
         left: 0;
         display: block;
         &::before, &::after {
             display: table;
             content: '';
        }
         &::after {
             clear: both;
        }
         .slick-loading & {
             visibility: hidden;
        }
    }
     .slick-slide {
         display: none;
         float: left;
         height: 100%;
         min-height: 1px;
         img {
             display: block;
        }
         &.slick-loading img {
             display: none;
        }
         &.dragging img {
             pointer-events: none;
        }
    }
     .slick-initialized .slick-slide {
         display: block;
    }
     .slick-loading .slick-slide {
         visibility: hidden;
    }
     .slick-vertical .slick-slide {
         display: block;
         height: auto;
    }
     .slick-arrow.slick-hidden {
         display: none;
    }
     .slick-prev, .slick-next {
         position: absolute;
         top: 50%;
         display: block;
         width: 40px;
         height: 40px;
         margin-top: -20px;
         padding: 0;
         color: @neutral-fg-on-color;
         font-size: inherit;
         line-height: 40px;
         background: @neutral-bg-transparent-normal;
         border: 0;
         outline: none;
         cursor: pointer;
         z-index: 2;
         border-radius: @radius-m;
         &.slick-disabled::before {
             opacity: 0.25;
        }
    }
     .slick-prev {
         left: 20px;
         &::before {
             content: '←';
        }
    }
     .slick-next {
         right: 20px;
         &::before {
             content: '→';
        }
    }
     .slick-dots {
         position: absolute;
         right: 0;
         bottom: 0;
         left: 0;
         z-index: 15;
         display: flex !important;