bottom: 12px;
    }

    &-top {
      top: 12px;
      bottom: auto;
    }

    li {
      position: relative;
      display: inline-block;
      flex: 0 1 auto;
      box-sizing: content-box;
      width: @carousel-dot-width;
      height: @carousel-dot-height;
      margin: 0 @carousel-dot-margin;
      padding: 0;
      text-align: center;
      text-indent: -999px;
      vertical-align: top;
      transition: all 0.5s;

      button {
        position: relative;
        display: block;
        width: 100%;
        height: @carousel-dot-height;
        padding: 0;
        color: transparent;
        font-size: 0;
        background: @component-background;
        border: 0;
        border-radius: 1px;
        outline: none;
        cursor: pointer;
        opacity: 0.3;
        transition: all 0.5s;

        &:hover,
        &:focus {
          opacity: 0.75;
        }

        &::after {
          position: absolute;
          top: -@carousel-dot-margin;
          right: -@carousel-dot-margin;
          bottom: -@carousel-dot-margin;
          left: -@carousel-dot-margin;
          content: '';
        }
      }

      &.slick-active {
        width: @carousel-dot-active-width;

        & button {
          background: @component-background;
          opacity: 1;
        }

        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    top: 50%;
    bottom: auto;
    flex-direction: column;
    width: @carousel-dot-height;
    height: auto;
    margin: 0;
    transform: translateY(-50%);

    &-left {
      right: auto;
      left: 12px;
    }

    &-right {
      right: 12px;
      left: auto;
    }

    li {
      width: @carousel-dot-height;
      height: @carousel-dot-width;
      margin: @carousel-dot-margin 0;
      vertical-align: baseline;

      button {
        width: @carousel-dot-height;
        height: @carousel-dot-width;
      }

      &.slick-active {
        width: @carousel-dot-height;
        height: @carousel-dot-active-width;

        button {
          width: @carousel-dot-height;
          height: @carousel-dot-active-width;
        }
      }
    }
  }
}


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

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

  .slick-track {
    .@{carousel-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  .slick-prev {
    .@{carousel-prefix-cls}-rtl & {
      right: -25px;
      left: auto;

      &::before {
        content: '→';
      }
    }
  }

  .slick-next {
    .@{carousel-prefix-cls}-rtl & {
      right: auto;
      left: -25px;

      &::before {
        content: '←';
      }
    }
  }

  
  .slick-dots {
    .@{carousel-prefix-cls}-rtl& {
      flex-direction: row-reverse;
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    .@{carousel-prefix-cls}-rtl& {
      flex-direction: column;
    }
  }
}


@root-entry-name: default;


.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
  
  .@{checkbox-prefix-cls} {
    .reset-component();
    display: inline-block;
    position: relative;
    top: 0.2em;
    line-height: 1;
    white-space: nowrap;
    outline: none;
    cursor: pointer;

    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner {
      border-color: @brand-stroke-comp-hover;
    }
    .@{checkbox-prefix-cls}-wrapper:active &-inner,
    &:active &-inner {
      border-color: @brand-stroke-comp-active;
    }

    &-checked::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid transparent;
      border-radius: @radius-s;
      visibility: hidden;
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: backwards;
      content: '';
    }

    &:hover::after,
    .@{checkbox-prefix-cls}-wrapper:hover &::after {
      visibility: visible;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      direction: ltr;
      background-color: @neutral-bg-5-normal;
      border: @checkbox-border-width @border-style-base @neutral-stroke-accessible;
      border-radius: @radius-s;
      
      
      border-collapse: separate;
      transition: all 0.3s;

      &::after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;

        position: absolute;
        top: 50%;
        
        
        left: 21.5%;
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid @neutral-fg-on-color;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        opacity: 0;
        transition: all 0.1s @ease-in-back, opacity 0.1s;
        content: ' ';
      }
    }

    &-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
      opacity: 0;
    }
  }

  
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
    position: absolute;
    display: table;
    border: 2px solid @neutral-fg-on-color;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s @ease-out-back 0.1s;
    content: ' ';
  }

  .@{checkbox-prefix-cls}-checked {
    .@{checkbox-inner-prefix-cls} {
      background-color: @brand-fg-comp-normal;
      border-color: @brand-fg-comp-normal;
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    cursor: not-allowed;

    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}::after {
        border-color: @neutral-fg-disabled;
        animation-name: none;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
      pointer-events: none;
    }

    .@{checkbox-inner-prefix-cls} {
      background-color: @neutral-bg-disabled;
      border-color: @neutral-stroke-disabled !important;

      &::after {
        border-color: @neutral-stroke-disabled;
        border-collapse: separate;
        animation-name: none;
      }
    }

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

    
    &:hover::after,
    .@{checkbox-prefix-cls}-wrapper:hover &::after {
      visibility: hidden;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    .reset-component();
    display: inline-flex;
    align-items: baseline;
    line-height: unset;
    cursor: pointer;

    &::after {
      display: inline-block;
      width: 0;
      overflow: hidden;
      content: '\a0';
    }

    &.@{checkbox-prefix-cls}-wrapper-disabled {
      cursor: not-allowed;
    }

    & + & {
      margin-left: 8px;
    }

    &&-in-form-item {
      input[type='checkbox'] {
        width: 14px;
        height: 14px;
      }
    }
    &:not(.@{checkbox-prefix-cls}-wrapper-disabled):hover {
      .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner {
        background-color: @brand-fg-comp-hover;
        border-color: @brand-fg-comp-hover;
      }      
    }
    &:not(.@{checkbox-prefix-cls}-wrapper-disabled):active {
      .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner {
        background-color: @brand-fg-comp-active;
        border-color: @brand-fg-comp-active;
      }      
    }
    &:not(.@{checkbox-prefix-cls}-wrapper-disabled):hover {
      .@{checkbox-prefix-cls}-indeterminate {
        .@{checkbox-inner-prefix-cls}::after {
          background-color: @brand-fg-comp-hover;
        }
      }
    }
    &:not(.@{checkbox-prefix-cls}-wrapper-disabled):active {
      .@{checkbox-prefix-cls}-indeterminate {
        .@{checkbox-inner-prefix-cls}::after {
          background-color: @brand-fg-comp-active;
        }
      }
    }
  }

  .@{checkbox-prefix-cls} + span {
    padding-right: 8px;
    padding-left: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    .reset-component();
    display: inline-block;

    &-item {
      margin-right: @checkbox-group-item-margin-right;

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

    &-item + &-item {
      margin-left: 0;
    }
  }

  
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @neutral-bg-5-normal;
      border-color: @brand-stroke-1-selected;
    }
    .@{checkbox-inner-prefix-cls}::after {
      @indeterminate-width: @checkbox-size - 8px;
      @indeterminate-height: @checkbox-size - 8px;

      top: 50%;
      left: 50%;
      width: @indeterminate-width;
      height: @indeterminate-height;
      background-color: @brand-fg-comp-normal;
      border: 0;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      content: ' ';
    }

    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
      background-color: @neutral-bg-disabled;
      border-color: @neutral-stroke-disabled;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}


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

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

.@{cascader-prefix-cls} {
  width: 184px;

  &-checkbox {
    top: 0;
    margin-right: @padding-xs;
  }

  &-menus {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;

    &.@{cascader-prefix-cls}-menu-empty {
      .@{cascader-prefix-cls}-menu {
        width: 100%;
        height: auto;
      }
    }
  }

  &-menu {
    flex-grow: 1;
    min-width: 111px;
    height: 180px;
    margin: 0;
    margin: -@dropdown-edge-child-vertical-padding 0;
    padding: @cascader-dropdown-edge-child-vertical-padding;
    overflow: auto;
    vertical-align: top;
    list-style: none;
    border-right: @border-width-base @border-style-base @neutral-stroke-1-normal;
    -ms-overflow-style: -ms-autohiding-scrollbar; 

    &-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
      overflow: hidden;
      line-height: @cascader-dropdown-line-height;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: @neutral-bg-1-hover-1;
      }

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

        &:hover {
          background: transparent;
        }
      }

      .@{cascader-prefix-cls}-menu-empty & {
        color: @neutral-fg-disabled;
        cursor: default;
        pointer-events: none;
      }

      &-active:not(&-disabled) {
        &,
        &:hover {
          background-color: @brand-bg-2-selected;
        }
      }

      &-content {
        flex: auto;
      }

      &-expand &-expand-icon,
      &-loading-icon {
        margin-left: @padding-xss;
        color: @neutral-fg-3-normal;
        font-size: 10px;

        .@{cascader-prefix-cls}-menu-item-disabled& {
          color: @neutral-fg-disabled;
        }
      }

      &-keyword {
        color: @highlight-color;
      }
    }
  }

  
  .compact-item(@cascader-prefix-cls);
}


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

.@{cascader-prefix-cls}-rtl {
  .@{cascader-prefix-cls}-menu-item {
    &-expand-icon,
    &-loading-icon {
      margin-right: @padding-xss;
      margin-left: 0;
    }
  }

  .@{cascader-prefix-cls}-checkbox {
    top: 0;
    margin-right: 0;
    margin-left: @padding-xs;
  }
}


@root-entry-name: default;


.antCheckboxFn();


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

  .@{checkbox-prefix-cls}-group {
    &-item {
      .@{checkbox-prefix-cls}-group-rtl & {
        margin-right: 0;
        margin-left: @checkbox-group-item-margin-right;
      }

      &:last-child {
        .@{checkbox-prefix-cls}-group-rtl & {
          margin-left: 0 !important;
        }
      }
    }

    &-item + &-item {
      .@{checkbox-prefix-cls}-group-rtl & {
        margin-left: @checkbox-group-item-margin-right;
      }
    }
  }
}


@root-entry-name: default;


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

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

  background-color: @neutral-bg-4-normal;
  border: @border-width-base @border-style-base @neutral-stroke-2-normal;
  border-bottom: 0;
  border-radius: @radius-m;

  & > &-item {
    border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;

    &:last-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: 0 0 @radius-m @radius-m;
      }
    }

    > .@{collapse-prefix-cls}-header {
      position: relative; 
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      padding: @collapse-header-padding;
      color: @neutral-fg-1-normal;
      line-height: @font-line-height;
      font-weight: @font-weight-bold;
      font-size: @font-size-body-m-strong;
      cursor: pointer;
      transition: all 0.3s, visibility 0s;

      .@{collapse-prefix-cls}-arrow {
        display: inline-block;
        margin-right: @margin-sm;
        font-size: @font-size-body-m;
        vertical-align: -1px;

        & svg {
          transition: transform 0.24s;
        }
      }

      .@{collapse-prefix-cls}-header-text {
        flex: auto;
      }

      .@{collapse-prefix-cls}-extra {
        margin-left: auto;
      }

      &:focus {
        outline: none;
      }
    }

    .@{collapse-prefix-cls}-header-collapsible-only {
      cursor: default;
      .@{collapse-prefix-cls}-header-text {
        flex: none;
        cursor: pointer;
      }
    }

    .@{collapse-prefix-cls}-icon-collapsible-only {
      cursor: default;
      .@{collapse-prefix-cls}-expand-icon {
        cursor: pointer;
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        padding-left: @padding-sm;
      }
    }
  }

  
  &-icon-position-end {
    & > .@{collapse-prefix-cls}-item {
      > .@{collapse-prefix-cls}-header {
        position: relative;
        padding: @collapse-header-padding;
        padding-right: @collapse-header-padding-extra;

        .@{collapse-prefix-cls}-arrow {
          position: absolute;
          top: 50%;
          right: @padding-md;
          left: auto;
          margin: 0;
          transform: translateY(-50%);
        }
      }
    }
  }

  &-content {
    color: @neutral-fg-3-normal;
    background-color: @neutral-bg-4-normal;
    

    & > &-box {
      padding: 4px 20px @collapse-content-padding 40px;
    }

    &-hidden {
      display: none;
    }
  }

  &-item:last-child {
    > .@{collapse-prefix-cls}-content {
      border-radius: 0 0 @radius-m @radius-m;
    }
  }

  &-borderless {
    background-color: @neutral-bg-4-normal;
    border: 0;
  }

  &-borderless > &-item {
    border-bottom: none;
  }

  &-borderless > &-item:last-child,
  &-borderless > &-item:last-child &-header {
    border-radius: 0;
  }

  
  &-borderless > &-item:last-child {
    border-bottom: 0;
  }

  &-borderless > &-item > &-content {
    background-color: transparent;
    border-top: 0;
  }

  &-borderless > &-item > &-content > &-content-box {
    padding-top: 4px;
  }

  &-ghost {
    background-color: transparent;
    border: 0;
    > .@{collapse-prefix-cls}-item {
      border-bottom: 0;
      > .@{collapse-prefix-cls}-content {
        background-color: transparent;
        border-top: 0;
        > .@{collapse-prefix-cls}-content-box {
          padding-top: 12px;
          padding-bottom: 12px;
        }
      }
    }
  }

  & &-item-disabled > &-header {
    &,
    & > .arrow {
      color: @neutral-fg-disabled;
      cursor: not-allowed;
    }
  }
}


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

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

    
    &.@{collapse-prefix-cls}.@{collapse-prefix-cls}-icon-position-end {
      & > .@{collapse-prefix-cls}-item {
        > .@{collapse-prefix-cls}-header {
          position: relative;
          padding: @collapse-header-padding;
          padding-left: @collapse-header-padding-extra;

          .@{collapse-prefix-cls}-arrow {
            position: absolute;
            top: 50%;
            right: auto;
            left: @padding-md;
            margin: 0;
            transform: translateY(-50%);
          }
        }
      }
    }
  }

  & > &-item {
    > .@{collapse-prefix-cls}-header {
      .@{collapse-prefix-cls}-rtl & {
        padding: @collapse-header-padding;
        padding-right: @collapse-header-padding-extra;
      }

      .@{collapse-prefix-cls}-arrow {
        .@{collapse-prefix-cls}-rtl& {
          margin-right: 0;
          margin-left: @margin-sm;
        }

        & svg {
          .@{collapse-prefix-cls}-rtl& {
            transform: rotate(180deg);
          }
        }
      }

      .@{collapse-prefix-cls}-extra {
        .@{collapse-prefix-cls}-rtl& {
          margin-right: auto;
          margin-left: 0;
        }
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        .@{collapse-prefix-cls}-rtl& {
          padding-right: @padding-sm;
          padding-left: 0;
        }
      }
    }
  }
}


@root-entry-name: default;


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

.@{comment-prefix-cls} {
  position: relative;
  background-color: @comment-bg;

  &-inner {
    display: flex;
    padding: @comment-padding-base;
  }

  &-avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: @margin-sm;
    cursor: pointer;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }

  &-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 1px;
    font-size: @comment-font-size-base;
    word-wrap: break-word;

    &-author {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: @margin-xss;
      font-size: @comment-font-size-base;

      & > a,
      & > span {
        padding-right: @padding-xs;
        font-size: @comment-font-size-sm;
        line-height: 18px;
      }

      &-name {
        color: @comment-author-name-color;
        font-size: @comment-font-size-base;
        transition: color 0.3s;

        > * {
          color: @comment-author-name-color;

          &:hover {
            color: @comment-author-name-color;
          }
        }
      }

      &-time {
        color: @comment-author-time-color;
        white-space: nowrap;
        cursor: auto;
      }
    }

    &-detail p {
      margin-bottom: @comment-content-detail-p-margin-bottom;
      white-space: pre-wrap;
    }
  }

  &-actions {
    margin-top: @comment-actions-margin-top;
    margin-bottom: @comment-actions-margin-bottom;
    padding-left: 0;

    > li {
      display: inline-block;
      color: @comment-action-color;

      > span {
        margin-right: 10px;
        color: @comment-action-color;
        font-size: @comment-font-size-sm;
        cursor: pointer;
        transition: color 0.3s;
        user-select: none;

        &:hover {
          color: @comment-action-hover-color;
        }
      }
    }
  }

  &-nested {
    margin-left: @comment-nest-indent;
  }
}


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

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

  &-avatar {
    .@{comment-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 12px;
    }
  }

  &-content {
    &-author {
      & > a,
      & > span {
        .@{comment-prefix-cls}-rtl & {
          padding-right: 0;
          padding-left: 8px;
        }
      }
    }
  }

  &-actions {
    .@{comment-prefix-cls}-rtl & {
      padding-right: 0;
    }

    > li {
      > span {
        .@{comment-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 10px;
        }
      }
    }
  }

  &-nested {
    .@{comment-prefix-cls}-rtl & {
      margin-right: @comment-nest-indent;
      margin-left: 0;
    }
  }
}


@root-entry-name: default;



@root-entry-name: default;


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

.picker-status-color(
  @text-color: @input-color;
  @border-color: @input-border-color;
  @background-color: @input-bg;
  @hoverBorderColor: @primary-color-hover;
  @outlineColor: @primary-color-outline;
) {
  &.@{picker-prefix-cls} {
    &,
    &:not([disabled]):hover {
      background-color: @background-color;
      border-color: @border-color;
    }

    &-focused,
    &:focus {
      .active(@text-color, @hoverBorderColor, @outlineColor);
    }

    .@{picker-prefix-cls}-active-bar {
      background: @hoverBorderColor;
    }
  }
}

.@{picker-prefix-cls} {
  &-status-error {
    .picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
  }

  &-status-warning {
    .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
  }
}


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

.picker-padding(@input-height, @font-size, @padding-horizontal) {
  
  @font-height: floor(@font-size * @line-height-base) + 2;
  @padding-top: max(((@input-height - @font-height) / 2), 0);
  @padding-bottom: max(@input-height - @font-height - @padding-top, 0);
  padding: @padding-top @padding-horizontal @padding-bottom;
}

.@{picker-prefix-cls} {
  @arrow-size: @popover-arrow-width;

  .reset-component();
  .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
  position: relative;
  display: inline-flex;
  align-items: center;
  background: @neutral-bg-5-normal;
  border: @border-width-base @border-style-base @neutral-stroke-1-normal;
  border-radius: @control-border-radius;
  transition: border @animation-duration-slow, box-shadow @animation-duration-slow;

  &:hover,
  &-focused {
    .hover();
  }

  &-focused {
    .active();
  }

  &&-disabled {
    background: @neutral-bg-disabled;
    border-color: @neutral-stroke-disabled;
    cursor: not-allowed;
  }

  &&-disabled &-suffix {
    color: @neutral-fg-disabled;
  }

  &&-borderless {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  
  &-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;

    > input {
      .input();
      flex: auto;

      
      
      min-width: 1px;
      height: auto;
      padding: 0;
      background: transparent;

      border: 0;

      &:focus {
        box-shadow: none;
      }

      &[disabled] {
        background: transparent;
      }
    }

    &:hover {
      .@{picker-prefix-cls}-clear {
        opacity: 1;
      }
    }


    
    &-placeholder {
      > input {
        color: @neutral-fg-2-normal;
      }
    }
  }

  
  &-large {
    .picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);

    .@{picker-prefix-cls}-input > input {
      font-size: @font-size-lg;
    }
  }

  &-small {
    .picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
  }

  &-suffix {
    display: flex;
    flex: none;
    align-self: center;
    margin-left: (@padding-xs / 2);
    color: @neutral-fg-3-normal;
    line-height: 1;
    pointer-events: none;

    > * {
      vertical-align: top;

      &:not(:last-child) {
        margin-right: 8px;
      }
    }
  }

  &-clear {
    position: absolute;
    top: 50%;
    right: 0;
    color: @neutral-fg-3-normal;
    line-height: 1;
    background: @neutral-bg-5-normal;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity @animation-duration-slow, color @animation-duration-slow;

    > * {
      vertical-align: top;
    }

    
  }

  &-separator {
    position: relative;
    display: inline-block;
    width: 1em;
    height: @font-size-lg;
    color: @neutral-fg-3-normal;
    font-size: @font-size-lg;
    vertical-align: top;
    cursor: default;

    .@{picker-prefix-cls}-focused & {
      color: @neutral-fg-3-normal;
    }

    .@{picker-prefix-cls}-range-separator & {
      .@{picker-prefix-cls}-disabled & {
        cursor: not-allowed;
      }
    }
  }

  
  &-range {
    position: relative;
    display: inline-flex;

    
    .@{picker-prefix-cls}-clear {
      right: @input-padding-horizontal-base;
    }

    &:hover {
      .@{picker-prefix-cls}-clear {
        opacity: 1;
      }
    }

    
    .@{picker-prefix-cls}-active-bar {
      bottom: -@border-width-base;
      height: 2px;
      margin-left: @input-padding-horizontal-base;
      background: @brand-bg-1-active;
      opacity: 0;
      transition: all @animation-duration-slow ease-out;
      pointer-events: none;
    }

    &.@{picker-prefix-cls}-focused {
      .@{picker-prefix-cls}-active-bar {
        opacity: 1;
      }
    }

    &-separator {
      align-items: center;
      padding: 0 @padding-xs;
      line-height: 1;
    }

    &.@{picker-prefix-cls}-small {
      .@{picker-prefix-cls}-clear {
        right: @input-padding-horizontal-sm;
      }

      .@{picker-prefix-cls}-active-bar {
        margin-left: @input-padding-horizontal-sm;
      }
    }
  }

  
  &-dropdown {
    .reset-component();
    position: absolute;
    
    
    top: -9999px;
    left: -9999px;
    z-index: @zindex-picker;

    &-hidden {
      display: none;
    }

    &-placement-bottomLeft {
      .@{picker-prefix-cls}-range-arrow {
        top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
        display: block;
        transform: rotate(-135deg) translateY(1px);
      }
    }

    &-placement-topLeft {
      .@{picker-prefix-cls}-range-arrow {
        bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
        display: block;
        transform: rotate(45deg);
      }
    }

    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
      animation-name: antSlideDownIn;
    }

    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
      animation-name: antSlideUpIn;
    }

    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
      animation-name: antSlideDownOut;
    }

    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
      animation-name: antSlideUpOut;
    }
  }

  &-dropdown-range {
    padding: (@arrow-size * 2 / 3) 0;

    &-hidden {
      display: none;
    }
  }

  
  &-dropdown &-panel > &-time-panel {
    padding-top: (@padding-xs / 2);
  }

  
  &-ranges {
    margin-bottom: 0;
    padding: (@padding-xs / 2) @padding-sm;
    overflow: hidden;
    line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2);
    text-align: left;
    list-style: none;

    > li {
      display: inline-block;
    }

    
    .@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
      color: @primary-color;
      background: @primary-1;
      border-color: @primary-3;
      cursor: pointer;
    }

    .@{picker-prefix-cls}-ok {
      float: right;
      margin-left: @padding-xs;
    }
  }

  &-range-wrapper {
    display: flex;
  }

  &-range-arrow {
    position: absolute;
    z-index: 1;
    width: @arrow-size;
    height: @arrow-size;
    margin-left: @input-padding-horizontal-base * 1.5;
    box-shadow: 2px 2px 6px -2px fade(@black, 10%); 
    transition: left @animation-duration-slow ease-out;
    .roundedArrow(@arrow-size, 5px, @neutral-bg-5-normal);
  }

  &-panel-container {
    overflow: hidden;
    vertical-align: top;
    background: @neutral-bg-5-normal;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    transition: margin @animation-duration-slow;

    .@{picker-prefix-cls}-panels {
      display: inline-flex;
      flex-wrap: nowrap;
      direction: ltr;
    }

    .@{picker-prefix-cls}-panel {
      vertical-align: top;
      background: transparent;
      border-width: 0 0 @border-width-base 0;
      border-radius: 0;

      .@{picker-prefix-cls}-content,
      table {
        text-align: center;
      }

      &-focused {
        border-color: @border-color-split;
      }
    }
  }

  
  .compact-item(@picker-prefix-cls, null, ~'@{picker-prefix-cls}-focused');
}

@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';

.@{picker-prefix-cls} {
  @picker-arrow-size: 7px;
  @picker-year-month-cell-width: 60px;
  @picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;

  &-panel {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    background: @calendar-bg;
    border: @border-width-base @border-style-base @neutral-stroke-2-normal;
    border-radius: @radius-m;
    outline: none;

    &-focused {
      border-color: @primary-color;
    }
  }

  
  
  
  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel,
  &-week-panel,
  &-date-panel,
  &-time-panel {
    display: flex;
    flex-direction: column;
    width: @picker-panel-width;
  }

  
  &-header {
    display: flex;
    padding: 0 @padding-xs;
    color: @neutral-fg-2-normal;
    border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;
    font-size: @font-size-body-m-strong;
    
    > * {
      flex: none;
    }

    button {
      padding: 0;
      color: @neutral-fg-3-normal;
      line-height: @picker-text-height;
      background: transparent;
      border: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;
    }

    > button {
      min-width: 1.6em;
      font-size: @font-size-body-m;

      
    }

    &-view {
      flex: auto;
      font-weight: @font-weight-bold;
      line-height: @picker-text-height;

      button {
        color: inherit;
        font-weight: inherit;

        &:not(:first-child) {
          margin-left: @padding-xs;
        }

        
      }
    }
  }

  
  &-prev-icon,
  &-next-icon,
  &-super-prev-icon,
  &-super-next-icon {
    position: relative;
    display: inline-block;
    width: @picker-arrow-size;
    height: @picker-arrow-size;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-super-prev-icon,
  &-super-next-icon {
    &::after {
      position: absolute;
      top: ceil((@picker-arrow-size / 2));
      left: ceil((@picker-arrow-size / 2));
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-prev-icon,
  &-super-prev-icon {
    transform: rotate(-45deg);
  }

  &-next-icon,
  &-super-next-icon {
    transform: rotate(135deg);
  }

  
  &-content {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    th,
    td {
      position: relative;
      min-width: 24px;
      font-weight: 400;
    }

    th {
      height: 30px;
      color: @text-color;
      line-height: 30px;
    }
  }

  .picker-cell-inner(@cellClassName) {
    &::before {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      z-index: 1;
      height: @picker-panel-cell-height;
      transform: translateY(-50%);
      transition: all @animation-duration-slow;
      content: '';
    }

    
    .@{cellClassName} {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: @picker-panel-cell-height;
      height: @picker-panel-cell-height;
      line-height: @picker-panel-cell-height;
      border-radius: @radius-m;
      transition: background @animation-duration-slow, border @animation-duration-slow;
    }

    
    &:hover:not(&-in-view),
    &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
      .@{cellClassName} {
        background: @neutral-bg-1-hover-1;
      }
    }

    
    &-in-view&-today .@{cellClassName} {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border: @border-width-base @border-style-base @brand-stroke-1-normal;
        border-radius: @radius-m;
        content: '';
      }
    }

    
    &-in-view&-in-range {
      position: relative;

      &::before {
        background: @brand-bg-2-selected;
      }
    }

    
    &-in-view&-selected .@{cellClassName},
    &-in-view&-range-start .@{cellClassName},
    &-in-view&-range-end .@{cellClassName} {
      color: @neutral-fg-on-color;
      background: @brand-bg-1-selected;
    }

    &-in-view&-range-start:not(&-range-start-single),
    &-in-view&-range-end:not(&-range-end-single) {
      &::before {
        background: @brand-bg-2-selected;
      }
    }

    &-in-view&-range-start::before {
      left: 50%;
    }

    &-in-view&-range-end::before {
      right: 50%;
    }

    
    &-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-start&-range-start-single,
    &-in-view&-range-hover-start&-range-start&-range-end&-range-end-near-hover,
    &-in-view&-range-hover-end&-range-start&-range-end&-range-start-near-hover,
    &-in-view&-range-hover-end&-range-end-single,
    &-in-view&-range-hover:not(&-in-range) {
      &::after {
        position: absolute;
        top: 50%;
        z-index: 0;
        height: 24px;
        border-top: @border-width-base dashed @picker-date-hover-range-border-color;
        border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
        transform: translateY(-50%);
        transition: all @animation-duration-slow;
        content: '';
      }
    }

    
    &-range-hover-start::after,
    &-range-hover-end::after,
    &-range-hover::after {
      right: 0;
      left: 2px;
    }

    
    

    
    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
      border-radius: @radius-m 0 0 @radius-m;
    }

    
    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
      border-radius: 0 @radius-m @radius-m 0;
    }

    
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
      &::after {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        
        transition: all @animation-duration-slow;
        content: '';
      }
    }

    .@{picker-prefix-cls}-date-panel
      &-in-view&-in-range&-range-hover-start
      .@{cellClassName}::after {
      right: -5px - @border-width-base;
      left: 0;
    }

    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
      right: 0;
      left: -5px - @border-width-base;
    }

    
    &-range-hover&-range-start::after {
      right: 50%;
    }

    &-range-hover&-range-end::after {
      left: 50%;
    }

    
    tr > &-in-view&-range-hover:first-child::after,
    tr > &-in-view&-range-hover-end:first-child::after,
    &-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
    &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
    &-in-view&-range-hover-start::after {
      left: 6px;
      border-left: @border-width-base dashed @picker-date-hover-range-border-color;
      border-top-left-radius: @radius-m;
      border-bottom-left-radius: @radius-m;
    }

    
    tr > &-in-view&-range-hover:last-child::after,
    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
    &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
    &-in-view&-range-hover-end::after {
      right: 6px;
      border-right: @border-width-base dashed @picker-date-hover-range-border-color;
      border-top-right-radius: @radius-m;
      border-bottom-right-radius: @radius-m;
    }

    
    &-disabled {
      color: @neutral-fg-disabled;
      pointer-events: none;

      .@{cellClassName} {
        background: transparent;
      }

      &::before {
        background: @neutral-bg-disabled;
      }
    }
    &-disabled&-today .@{cellClassName}::before {
      border-color: @neutral-stroke-disabled;
    }
  }

  &-cell {
    padding: 3px 0;
    color: @neutral-fg-disabled;
    cursor: pointer;

    
    &-in-view {
      color: @neutral-fg-2-normal;
    }

    .picker-cell-inner(~'@{picker-cell-inner-cls}');
  }

  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    .@{picker-prefix-cls}-content {
      height: @picker-panel-without-time-cell-height * 4;
    }

    .@{picker-cell-inner-cls} {
      padding: 0 @padding-xs;
    }
  }

  &-quarter-panel {
    .@{picker-prefix-cls}-content {
      height: 56px;
    }
  }

  
  &-footer {
    width: min-content;
    min-width: 100%;
    line-height: @picker-text-height - 2 * @border-width-base;
    text-align: center;
    border-bottom: @border-width-base @border-style-base transparent;

    .@{picker-prefix-cls}-panel & {
      border-top: @border-width-base @border-style-base @neutral-stroke-2-normal;
    }

    &-extra {
      padding: 0 @padding-sm;
      line-height: @picker-text-height - 2 * @border-width-base;
      text-align: left;

      &:not(:last-child) {
        border-bottom: @border-width-base @border-style-base @neutral-stroke-2-normal;
      }
    }
  }

  &-now {
    text-align: left;
  }

  &-today-btn {
    color: @brand-fg-1-normal;

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

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

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

  
  
  

  
  &-decade-panel {
    .@{picker-cell-inner-cls} {
      padding: 0 (@padding-xs / 2);
    }

    .@{picker-prefix-cls}-cell::before {
      display: none;
    }
  }

  
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    @hover-cell-fixed-distance: (
      (((@picker-panel-width - @padding-xs * 2) / 3) - @picker-year-month-cell-width) / 2
    );

    .@{picker-prefix-cls}-body {
      padding: 0 @padding-xs;
    }

    .@{picker-cell-inner-cls} {
      width: @picker-year-month-cell-width;
    }

    .@{picker-prefix-cls}-cell-range-hover-start::after {
      left: @hover-cell-fixed-distance;
      border-left: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: @radius-m 0 0 @radius-m;

      .@{picker-prefix-cls}-panel-rtl & {
        right: @hover-cell-fixed-distance;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: 0 @radius-m @radius-m 0;
      }
    }
    .@{picker-prefix-cls}-cell-range-hover-end::after {
      right: @hover-cell-fixed-distance;
      border-right: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: 0 @radius-m @radius-m 0;

      .@{picker-prefix-cls}-panel-rtl & {
        left: @hover-cell-fixed-distance;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: @radius-m 0 0 @radius-m;
      }
    }
  }

  
  &-week-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-xs @padding-sm;
    }

    
    .@{picker-prefix-cls}-cell {
      &:hover .@{picker-cell-inner-cls},
      &-selected .@{picker-cell-inner-cls},
      .@{picker-cell-inner-cls} {
        background: transparent !important;
      }
    }

    &-row {
      td {
        transition: background @animation-duration-slow;
      }

      &:hover td { 
        background: @neutral-bg-1-hover-1;
      }

      &-selected td,
      &-selected:hover td {
        background: @brand-bg-1-selected;

        &.@{picker-prefix-cls}-cell-week {
          color: fade(@text-color-inverse, 50%);
        }

        &.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
          border-color: @text-color-inverse;
        }

        .@{picker-cell-inner-cls} {
          color: @text-color-inverse;
        }
      }
    }
  }

  
  &-date-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-xs @padding-sm;
    }

    .@{picker-prefix-cls}-content {
      width: @picker-panel-cell-width * 7;

      th {
        width: @picker-panel-cell-width;
      }
    }
  }

  
  &-datetime-panel {
    display: flex;

    .@{picker-prefix-cls}-time-panel {
      border-left: @border-width-base @border-style-base @neutral-stroke-2-normal;
    }

    .@{picker-prefix-cls}-date-panel,
    .@{picker-prefix-cls}-time-panel {
      transition: opacity @animation-duration-slow;
    }

    
    &-active {
      .@{picker-prefix-cls}-date-panel,
      .@{picker-prefix-cls}-time-panel {
        opacity: 0.3;

        &-active {
          opacity: 1;
        }
      }
    }
  }

  
  &-time-panel {
    width: auto;
    min-width: auto;

    .@{picker-prefix-cls}-content {
      display: flex;
      flex: auto;
      height: @picker-time-panel-column-height;
    }

    &-column {
      flex: 1 0 auto;
      width: @picker-time-panel-column-width;
      margin: 0;
      padding: 0;
      overflow-y: hidden;
      text-align: left;
      list-style: none;
      transition: background @animation-duration-slow;

      &::after {
        display: block;
        height: @picker-time-panel-column-height - @picker-time-panel-cell-height;
        content: '';
        .@{picker-prefix-cls}-datetime-panel & {
          height: @picker-time-panel-column-height - @picker-time-panel-cell-height + 2 *
            @border-width-base;
        }
      }

      &:not(:first-child) {
        border-left: @border-width-base @border-style-base @neutral-stroke-2-normal;
      }

      &-active {
        background: @calendar-column-active-bg;
      }