color: @menu-dark-selected-item-text-color;
      }
    }
  }

  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
    background-color: @menu-dark-item-active-bg;
  }

  
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a,
    > span > a {
      color: @disabled-color-dark !important;
      opacity: 0.8;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color-dark !important;
      > .@{menu-prefix-cls}-submenu-arrow {
        &::before,
        &::after {
          background: @disabled-color-dark !important;
        }
      }
    }
  }
}


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

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

  &-item-group-title {
    .@{menu-prefix-cls}-rtl & {
      text-align: right;
    }
  }

  &-inline,
  &-vertical {
    .@{menu-prefix-cls}-rtl& {
      border-right: none;
      border-left: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-dark&-inline,
  &-dark&-vertical {
    .@{menu-prefix-cls}-rtl& {
      border-left: none;
    }
  }

  &-vertical&-sub,
  &-vertical-left&-sub,
  &-vertical-right&-sub {
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      .@{menu-prefix-cls}-rtl& {
        transform-origin: top right;
      }
    }
  }

  &-item,
  &-submenu-title {
    .@{menu-prefix-cls}-item-icon,
    .@{iconfont-css-prefix} {
      .@{menu-prefix-cls}-rtl & {
        margin-right: auto;
        margin-left: @menu-icon-margin-right;
      }
    }

    &.@{menu-prefix-cls}-item-only-child {
      > .@{menu-prefix-cls}-item-icon,
      > .@{iconfont-css-prefix} {
        .@{menu-prefix-cls}-rtl & {
          margin-left: 0;
        }
      }
    }
  }

  &-submenu {
    &-rtl.@{menu-prefix-cls}-submenu-popup {
      transform-origin: 100% 0;
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        .@{menu-prefix-cls}-rtl & {
          right: auto;
          left: 16px;
        }
      }
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        &::before {
          .@{menu-prefix-cls}-rtl & {
            transform: rotate(-45deg) translateY(-2px);
          }
        }

        &::after {
          .@{menu-prefix-cls}-rtl & {
            transform: rotate(45deg) translateY(2px);
          }
        }
      }
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    .@{menu-prefix-cls}-item {
      &::after {
        .@{menu-prefix-cls}-rtl& {
          right: auto;
          left: 0;
        }
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        text-align: right;
      }
    }
  }

  &-inline {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 0;
        padding-left: 34px;
      }
    }
  }

  &-vertical {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 16px;
        padding-left: 34px;
      }
    }
  }

  &-inline-collapsed&-vertical {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
      }
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl & {
        padding: 0 28px 0 16px;
      }
    }
  }

  &-sub&-inline {
    border: 0;
    & .@{menu-prefix-cls}-item-group-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 32px;
        padding-left: 0;
      }
    }
  }
}


@root-entry-name: default;


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

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

  position: fixed;
  top: 8px;
  left: 0;
  z-index: @zindex-message;
  width: 100%;
  pointer-events: none;

  &-notice {
    display: flex;
    justify-content: center;
    padding: 8px;
    
  }

  &-notice-content {
    display: inline-block;
    padding: @message-notice-content-padding;
    background: @neutral-bg-3-normal;
    border-radius: @radius-m;
    box-shadow: @shadow-3-down;
    pointer-events: all;
    max-width: 520px;
  }

  &-success,
  &-error,
  &-warning,
  &-info,
  &-loading {
    display: flex;
  }

  &-success .@{iconfont-css-prefix} {
    color: @status-success-bg-1-normal;
  }

  &-error .@{iconfont-css-prefix} {
    color: @status-error-bg-1-normal;
  }

  &-warning .@{iconfont-css-prefix} {
    color: @status-warning-bg-1-normal;
  }

  &-info .@{iconfont-css-prefix},
  &-loading .@{iconfont-css-prefix} {
    color: @brand-bg-1-normal;
  }

  .@{iconfont-css-prefix} {
    position: relative;
    top: 1px;
    margin-right: 8px;
    font-size: @font-size-body-m;
  }

  &-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active {
    animation-name: MessageMoveOut;
    animation-duration: 0.3s;
  }
}
.ant-message-notice{
  .anticon-loading{
    height: 14px;
    top: 3px !important;
  }
}
@keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1;
  }

  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}


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

.@{message-prefix-cls}-rtl {
  direction: rtl;

  span {
    direction: rtl;
  }

  .@{iconfont-css-prefix} {
    margin-right: 0;
    margin-left: 8px;
  }
}


@root-entry-name: default;

@dialog-prefix-cls: ~'@{ant-prefix}-modal';

.@{dialog-prefix-cls} {
  .reset-component();
  .modal-mask();

  position: relative;
  top: 80px;
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding-bottom: 24px;

  &-wrap {
    z-index: @zindex-modal;
  }

  &-title {
    margin: 0;
    color: @neutral-fg-1-normal;
    font-weight: @font-weight-bold;
    font-size: @font-size-title-s;
    line-height: 22px;
    word-wrap: break-word;
  }

  &-content {
    position: relative;
    background-color: @neutral-bg-3-normal;
    background-clip: padding-box;
    border: 1px solid @neutral-stroke-3-normal;
    border-radius: @radius-l;
    box-shadow: @shadow-3-down;
    pointer-events: auto;
  }

  &-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: @zindex-popup-close;
    padding: 0;
    color: @neutral-fg-3-normal;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-x {
      display: block;
      width: @modal-header-close-size;
      height: @modal-header-close-size;
      font-size: @font-size-lg;
      font-style: normal;
      line-height: @modal-header-close-size;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      border-radius: @radius-m;
      &:hover {
        background: @neutral-bg-1-hover-2;
      }
    }

    &:focus,
    &:hover {
      text-decoration: none;
    }
  }

  &-header {
    padding: 12px 16px;
    
    color: @neutral-fg-1-normal;
    background: @neutral-bg-3-normal;
    border-bottom: @modal-header-border-width @modal-header-border-style
      @neutral-stroke-2-normal;
    border-radius: @radius-l @radius-l 0 0;
  }

  &-body {
    padding: @modal-body-padding @modal-body-padding 32px @modal-body-padding;
    font-size: @font-size-body-m;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-footer {
    padding: 12px 16px;
    
    text-align: right;
    background: @neutral-bg-3-normal;
    border-top: @modal-footer-border-width @modal-footer-border-style
      @neutral-stroke-2-normal;
    border-radius: 0 0 @radius-l @radius-l;

    .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
      margin-bottom: 0;
      margin-left: 12px;
    }
  }

  &-open {
    overflow: hidden;
  }
}

.@{dialog-prefix-cls}-centered {
  text-align: center;

  &::before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
  }
  .@{dialog-prefix-cls} {
    top: 0;
    display: inline-block;
    padding-bottom: 0;
    text-align: left;
    vertical-align: middle;
  }
}

@media (max-width: @screen-sm-max) {
  .@{dialog-prefix-cls} {
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }
  .@{dialog-prefix-cls}-centered {
    .@{dialog-prefix-cls} {
      flex: 1;
    }
  }
}


@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';

.@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
    display: none;
  }

  .@{ant-prefix}-modal-body {
    padding: @modal-confirm-body-padding;
  }

  &-body-wrapper {
    .clearfix();
  }

  &-body {
    .@{confirm-prefix-cls}-title {
      display: block;
      
      
      overflow: hidden;
      color: @neutral-fg-1-normal;
      font-weight: 500;
      font-size: @font-size-body-m-strong;
      font-weight: @font-weight-bold;
      line-height: 1.4;
    }

    .@{confirm-prefix-cls}-content {
      margin-top: 8px;
      color: @neutral-fg-2-normal;
      font-size: @font-size-body-m;
    }

    > .@{iconfont-css-prefix} {
      position: relative;
      float: left;
      margin-right: 8px;

      
      + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
        margin-left: 28px;
      }
    }
  }

  .@{confirm-prefix-cls}-btns {
    margin-top: 12px;
    text-align: right;

    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
      margin-bottom: 0;
      margin-left: 12px;
    }
  }

  &-error &-body > .@{iconfont-css-prefix} {
    color: @status-error-fg-1-normal;
  }

  &-warning &-body > .@{iconfont-css-prefix},
  &-confirm &-body > .@{iconfont-css-prefix} {
    color: @status-warning-fg-1-normal;
  }

  &-info &-body > .@{iconfont-css-prefix} {
    color: @brand-fg-1-normal;
  }

  &-success &-body > .@{iconfont-css-prefix} {
    color: @status-success-fg-1-normal;
  }

  
  .@{ant-prefix}-zoom-leave .@{confirm-prefix-cls}-btns {
    pointer-events: none;
  }
}


@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';

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

  &-close {
    .@{dialog-wrap-rtl-cls} & {
      right: initial;
      left: 0;
    }
  }

  &-footer {
    .@{dialog-wrap-rtl-cls} & {
      text-align: left;
    }
    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
      .@{dialog-wrap-rtl-cls} & {
        margin-right: 8px;
        margin-left: 0;
      }
    }
  }

  &-confirm {
    &-body {
      .@{dialog-wrap-rtl-cls} & {
        direction: rtl;
      }
      > .@{iconfont-css-prefix} {
        .@{dialog-wrap-rtl-cls} & {
          float: right;
          margin-right: 0;
          margin-left: 16px;
        }
        + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
          .@{dialog-wrap-rtl-cls} & {
            margin-right: 38px;
            margin-left: 0;
          }
        }
      }
    }

    &-btns {
      .@{dialog-wrap-rtl-cls} & {
        text-align: left;
      }
      .@{ant-prefix}-btn + .@{ant-prefix}-btn {
        .@{dialog-wrap-rtl-cls} & {
          margin-right: 8px;
          margin-left: 0;
        }
      }
    }
  }
}

.@{dialog-prefix-cls}-centered {
  .@{dialog-prefix-cls} {
    .@{dialog-wrap-rtl-cls}& {
      text-align: right;
    }
  }
}


.popover-customize-bg(@dialog-prefix-cls, @popover-background);

@root-entry-name: default;


.popover-customize-bg(@notification-prefix-cls, @popover-background);

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 360px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 20px;
@notification-margin-edge: 20px;

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

  position: fixed;
  z-index: @zindex-notification;
  margin-right: @notification-margin-edge;

  &-close-icon {
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-hook-holder {
    position: relative;
  }

  &-notice {
    position: relative;
    width: @notification-width;
    max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
    margin-bottom: @notification-margin-bottom;
    margin-left: auto;
    padding: @notification-padding;
    overflow: hidden;
    line-height: @line-height-base;
    word-wrap: break-word;
    background: @neutral-bg-3-normal;
    border-radius: @radius-m;
    box-shadow: @shadow-3-down;
    border: 1px solid @neutral-stroke-3-normal;

    .@{notification-prefix-cls}-top &,
    .@{notification-prefix-cls}-bottom & {
      margin-right: auto;
      margin-left: auto;
    }

    .@{notification-prefix-cls}-topLeft &,
    .@{notification-prefix-cls}-bottomLeft & {
      margin-right: auto;
      margin-left: 0;
    }

    &-message {
      margin-bottom: 8px;
      color: @heading-color;
      font-size: @font-size-body-m-strong;
      color: @neutral-fg-1-normal;
      font-weight: @font-weight-bold;
      line-height: 24px;

      
      &-single-line-auto-margin {
        display: block;
        width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
        max-width: 4px;
        background-color: transparent;
        pointer-events: none;

        &::before {
          display: block;
          content: '';
        }
      }
    }

    &-description {
      font-size: @font-size-body-m;
      color: @neutral-fg-2-normal;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      margin-bottom: 4px;
      margin-left: 28px;
    }

    &-with-icon &-description {
      margin-left: 28px;
    }

    
    
    
    &-icon {
      position: absolute;
      margin-left: 0;
      font-size: @font-size-headline-s;
      line-height: 24px;
    }

    .@{iconfont-css-prefix}&-icon {
      &-success {
        color: @status-success-fg-1-normal;
      }

      &-info {
        color: @brand-fg-1-normal;
      }

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

      &-error {
        color: @status-error-fg-1-normal;
      }
      &-question {
        color: @status-warning-fg-1-normal
      }
      svg {
        width: 20px;
        height: 20px;
        fill:currentColor;
      }
    }

    &-close {
      position: absolute;
      top: 16px;
      right: 22px;
      color: @neutral-fg-3-normal;
      outline: none;

      &:hover {
        & when (@theme = dark) {
          color: fade(@white, 85%);
        }
        & when not (@theme = dark) {
          color: @neutral-fg-3-normal;
        }
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-timing-function: @ease-in-out;
    animation-fill-mode: both;
  }

  &-fade-enter,
  &-fade-appear {
    .notification-fade-effect();

    opacity: 0;
    animation-play-state: paused;
  }

  &-fade-leave {
    .notification-fade-effect();

    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
}

@keyframes NotificationFadeIn {
  0% {
    left: @notification-width;
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    max-height: 150px;
    margin-bottom: @notification-margin-bottom;
    opacity: 1;
  }

  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}


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

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

  &-notice {
    &-closable &-message {
      .@{notification-prefix-cls}-rtl & {
        padding-right: 0;
        padding-left: 24px;
      }
    }

    &-with-icon &-message {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

    &-with-icon &-description {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

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

    &-close {
      .@{notification-prefix-cls}-rtl & {
        right: auto;
        left: 22px;
      }
    }

    &-btn {
      .@{notification-prefix-cls}-rtl & {
        float: left;
      }
    }
  }
}

.@{notification-prefix-cls} {
  &-top,
  &-bottom {
    margin-right: 0;
    margin-left: 0;
  }

  &-top {
    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationTopFadeIn;
    }
  }

  &-bottom {
    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationBottomFadeIn;
    }
  }

  &-topLeft,
  &-bottomLeft {
    margin-right: 0;
    margin-left: @notification-margin-edge;

    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationLeftFadeIn;
    }
  }
}

@keyframes NotificationTopFadeIn {
  0% {
    margin-top: -100%;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes NotificationBottomFadeIn {
  0% {
    margin-bottom: -100%;
    opacity: 0;
  }

  100% {
    margin-bottom: 0;
    opacity: 1;
  }
}

@keyframes NotificationLeftFadeIn {
  0% {
    right: @notification-width;
    opacity: 0;
  }

  100% {
    right: 0;
    opacity: 1;
  }
}


@root-entry-name: default;


@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

.@{pageheader-prefix-cls} {
  .reset-component();
  position: relative;
  padding: @page-header-padding-vertical @page-header-padding;
  background-color: @component-background;

  &-ghost {
    background-color: @page-header-ghost-bg;
  }

  &.has-breadcrumb {
    padding-top: @page-header-padding-breadcrumb;
  }

  &.has-footer {
    padding-bottom: 0;
  }

  &-back {
    margin-right: @margin-md;
    font-size: 16px;
    line-height: 1;

    &-button {
      .operation-unit();
      color: @page-header-back-color;
    }
  }

  .@{ant-prefix}-divider-vertical {
    height: 14px;
    margin: 0 @margin-sm;
    vertical-align: middle;
  }

  .@{ant-prefix}-breadcrumb + &-heading {
    margin-top: @margin-xs;
  }

  .text-overflow-ellipsis() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-heading {
    display: flex;
    justify-content: space-between;

    &-left {
      display: flex;
      align-items: center;
      margin: (@margin-xs / 2) 0;
      overflow: hidden;
    }

    &-title {
      margin-right: @margin-sm;
      margin-bottom: 0;
      color: @heading-color;
      font-weight: 600;
      font-size: @page-header-heading-title;
      line-height: @height-base;
      .text-overflow-ellipsis();
    }

    .@{ant-prefix}-avatar {
      margin-right: @margin-sm;
    }

    &-sub-title {
      margin-right: @margin-sm;
      color: @text-color-secondary;
      font-size: @page-header-heading-sub-title;
      line-height: @line-height-base;
      .text-overflow-ellipsis();
    }

    &-extra {
      margin: (@margin-xs / 2) 0;
      white-space: nowrap;

      > * {
        white-space: unset;
      }
    }
  }

  &-content {
    padding-top: @page-header-content-padding-vertical;
  }

  &-footer {
    margin-top: @margin-md;
    .@{ant-prefix}-tabs {
      > .@{ant-prefix}-tabs-nav {
        margin: 0;

        &::before {
          border: none;
        }
      }

      .@{ant-prefix}-tabs-tab {
        padding-top: @padding-xs;
        padding-bottom: @padding-xs;
        font-size: @page-header-tabs-tab-font-size;
      }
    }
  }

  &-compact &-heading {
    flex-wrap: wrap;
  }
}


@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

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

  &-back {
    .@{pageheader-prefix-cls}-rtl & {
      float: right;
      margin-right: 0;
      margin-left: 16px;
    }
  }

  &-heading {
    &-title {
      .@{pageheader-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: @margin-sm;
      }
    }

    .@{ant-prefix}-avatar {
      .@{pageheader-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: @margin-sm;
      }
    }

    &-sub-title {
      .@{pageheader-prefix-cls}-rtl & {
        float: right;
        margin-right: 0;
        margin-left: 12px;
      }
    }

    &-tags {
      .@{pageheader-prefix-cls}-rtl & {
        float: right;
      }
    }

    &-extra {
      .@{pageheader-prefix-cls}-rtl & {
        float: left;
      }

      > * {
        .@{pageheader-prefix-cls}-rtl & {
          margin-right: @margin-sm;
          margin-left: 0;
        }
      }

      > *:first-child {
        .@{pageheader-prefix-cls}-rtl & {
          margin-right: 0;
        }
      }
    }
  }

  &-footer {
    .@{ant-prefix}-tabs-bar {
      .@{ant-prefix}-tabs-nav {
        .@{pageheader-prefix-cls}-rtl & {
          float: right;
        }
      }
    }
  }
}


@root-entry-name: default;


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

.@{pagination-prefix-cls} {
  .reset-component();
  width: 100%;
  text-align: right;
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &::after {
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    content: ' ';
  }

  &-total-text {
    
    height: @pagination-item-size;
    margin-right: 8px;
    line-height: @pagination-item-size - 2px;
    vertical-align: middle;
    float: left;
    color: @neutral-fg-3-normal;
  }

  &-item {
    
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    margin-right: 8px;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size - 2px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    background-color: @neutral-bg-2-normal;
    border: @border-width-base @border-style-base @neutral-stroke-1-normal;
    border-radius: @radius-m;
    outline: 0;
    cursor: pointer;
    user-select: none;

    a {
      display: block;
      padding: 0 6px;
      color: @neutral-fg-3-normal;
      transition: none;

      &:hover {
        text-decoration: none;
      }
    }

    &:hover {
      border-color: @brand-stroke-1-hover;
      transition: all 0.3s;

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

    
    
    &:focus-visible {
      border-color: @primary-color;
      transition: all 0.3s;

      a {
        color: @primary-color;
      }
    }

    &-active {
      border-color: @brand-stroke-1-normal;

      a {
        color: @brand-fg-1-normal;
      }

      &:hover {
        border-color: @brand-stroke-1-hover;
      }

      &:focus-visible {
        border-color: @primary-5;
      }

      

      &:focus-visible a {
        color: @primary-5;
      }
    }
  }

  &-jump-prev,
  &-jump-next {
    outline: 0;
    .@{pagination-prefix-cls}-item-container {
      position: relative;

      .@{pagination-prefix-cls}-item-link-icon {
        color: @brand-fg-1-normal;
        font-size: @font-size-body-s;
        letter-spacing: -1px;
        opacity: 0;
        transition: all 0.2s;

        &-svg {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          
        }
      }

      .@{pagination-prefix-cls}-item-ellipsis {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        margin: auto;
        color: @neutral-fg-3-normal;
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 2px;
        text-align: center;
        text-indent: 0.13em;
        opacity: 1;
        transition: all 0.2s;
      }
    }

    &:hover {
      .@{pagination-prefix-cls}-item-link-icon {
        opacity: 1;
      }
      .@{pagination-prefix-cls}-item-ellipsis {
        opacity: 0;
      }
    }

    &:focus-visible {
      .@{pagination-prefix-cls}-item-link-icon {
        opacity: 1;
      }
      .@{pagination-prefix-cls}-item-ellipsis {
        opacity: 0;
      }
    }
  }

  &-prev,
  &-jump-prev,
  &-jump-next {
    margin-right: 8px;
  }

  &-prev,
  &-next,
  &-jump-prev,
  &-jump-next {
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    color: @neutral-fg-3-normal;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    border-radius: @radius-m;
    cursor: pointer;
    transition: all 0.3s;
  }

  &-prev,
  &-next {
    font-family: Arial, Helvetica, sans-serif;
    outline: 0;

    button {
      color: @neutral-fg-2-normal;
      cursor: pointer;
      user-select: none;
    }

    svg {
      color: @neutral-fg-3-normal;
    }

    &:hover button {
      border-color: @brand-stroke-1-hover;
    }

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

    .@{pagination-prefix-cls}-item-link {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      font-size: 12px;
      text-align: center;
      background-color: @neutral-bg-2-normal;
      border: @border-width-base @border-style-base @neutral-stroke-1-normal;
      border-radius: @radius-m;
      outline: none;
      transition: all 0.3s;
    }

    &:focus-visible .@{pagination-prefix-cls}-item-link {
      color: @primary-color;
      border-color: @primary-color;
    }

    &:hover .@{pagination-prefix-cls}-item-link {
      color: @primary-5;
      border-color: @primary-5;
    }
  }

  &-disabled {
    &,
    &:hover {
      cursor: not-allowed;
      .@{pagination-prefix-cls}-item-link {
        color: @neutral-fg-disabled;
        border-color: @neutral-stroke-2-normal;
        cursor: not-allowed;
      }
      svg {
        color: @neutral-fg-disabled;
      }
    }

    &:focus-visible {
      cursor: not-allowed;
      .@{pagination-prefix-cls}-item-link {
        color: @neutral-fg-disabled;
        border-color: @neutral-stroke-2-normal;
        cursor: not-allowed;
      }
    }
  }

  &-slash {
    margin: 0 10px 0 5px;
  }

  &-options {
    display: inline-block;
    margin-left: 16px;
    vertical-align: middle;

    
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        vertical-align: top;
      }
    }

    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
      width: auto;
    }

    &-quick-jumper {
      display: inline-block;
      height: @input-height-base;
      margin-left: @margin-xs;
      line-height: @input-height-base;
      vertical-align: top;

      input {
        .input();

        width: 50px;
        height: @input-height-base;
        margin: 0 8px;
      }
    }
  }

  &-simple &-prev,
  &-simple &-next {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
    vertical-align: top;
    .@{pagination-prefix-cls}-item-link {
      height: @pagination-item-size-sm;
      background-color: transparent;
      border: 0;

      &::after {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
      }
    }
  }

  &-simple &-simple-pager {
    display: inline-block;
    height: @pagination-item-size-sm;
    margin-right: 8px;

    input {
      box-sizing: border-box;
      height: 100%;
      margin-right: 8px;
      padding: 0 6px;
      text-align: center;
      background-color: @neutral-bg-5-normal;
      border: @border-width-base @border-style-base @neutral-stroke-1-normal;
      border-radius: @radius-m;
      outline: none;
      transition: border-color 0.3s;

      &:hover {
        border-color: @brand-stroke-1-hover;
      }

      &:focus {
        border-color: @brand-stroke-1-active;
        box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
      }

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

  &&-mini &-total-text,
  &&-mini &-simple-pager {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
  }

  &&-mini &-item {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm - 2px;
  }

  &&-mini &-item:not(&-item-active) {
    background: transparent;
    border-color: transparent;
  }

  &&-mini &-prev,
  &&-mini &-next {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm;
  }

  &&-mini &-prev &-item-link,
  &&-mini &-next &-item-link {
    background: transparent;
    border-color: transparent;

    &::after {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;
    }
  }

  &&-mini &-jump-prev,
  &&-mini &-jump-next {
    height: @pagination-item-size-sm;
    margin-right: 0;
    line-height: @pagination-item-size-sm;
  }

  &&-mini &-options {
    margin-left: 2px;

    &-size-changer {
      top: @pagination-mini-options-size-changer-top;
    }

    &-quick-jumper {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;

      input {
        .input-sm();

        width: 44px;
        height: @input-height-sm;
      }
    }
  }


  
  &&-disabled {
    cursor: not-allowed;

    .@{pagination-prefix-cls}-item {
      background: @neutral-bg-disabled;
      border-color: @neutral-stroke-disabled;
      cursor: not-allowed;

      a {
        color: @neutral-fg-disabled;
        background: transparent;
        border: none;
        cursor: not-allowed;
      }

    }

    .@{pagination-prefix-cls}-item-link {
      color: @neutral-fg-disabled;
      background:  @neutral-bg-disabled;
      border-color: @neutral-stroke-disabled;
      cursor: not-allowed;
      .@{pagination-prefix-cls}-simple& {
        background: transparent;
      }
    }

    .@{pagination-prefix-cls}-item-link-icon {
      opacity: 0;
    }

    .@{pagination-prefix-cls}-item-ellipsis {
      opacity: 1;
    }

    .@{pagination-prefix-cls}-simple-pager {
      color: @neutral-fg-disabled;
    }
  }
}

@media only screen and (max-width: @screen-lg) {
  .@{pagination-prefix-cls}-item {
    &-after-jump-prev,
    &-before-jump-next {
      display: none;
    }
  }
}

@media only screen and (max-width: @screen-sm) {
  .@{pagination-prefix-cls}-options {
    display: none;
  }
}


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

.@{pagination-prefix-cls}-rtl {
  .@{pagination-prefix-cls}-total-text {
    margin-right: 0;
    margin-left: 8px;
  }

  .@{pagination-prefix-cls}-item,
  .@{pagination-prefix-cls}-prev,
  .@{pagination-prefix-cls}-jump-prev,
  .@{pagination-prefix-cls}-jump-next {
    margin-right: 0;
    margin-left: 8px;
  }

  .@{pagination-prefix-cls}-slash {
    margin: 0 5px 0 10px;
  }

  .@{pagination-prefix-cls}-options {
    margin-right: 16px;
    margin-left: 0;

    .@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select {
      margin-right: 0;
      margin-left: 8px;
    }

    .@{pagination-prefix-cls}-options-quick-jumper {
      margin-left: 0;
    }
  }

  &.@{pagination-prefix-cls}-simple {
    .@{pagination-prefix-cls}-simple-pager {
      margin-right: 0;
      margin-left: 8px;

      input {
        margin-right: 0;
        margin-left: 8px;
      }
    }
  }

  &.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options {
    margin-right: 2px;
    margin-left: 0;
  }
}


@root-entry-name: default;


@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
@popover-prefix-cls: ~'@{ant-prefix}-popover';
.@{popconfirm-prefix-cls} {
  z-index: @zindex-popoconfirm;
  .@{popover-prefix-cls} {
    &-inner-content {
      padding-left: 0;
    }
    &-message-title {
      font-weight: 700;
      margin-bottom: 8px;
    }
    &-message-content {
      font-weight: 400;
      font-size: @font-size-body-s;
      color: @neutral-fg-2-normal
    }
  }
}

@root-entry-name: default;


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

@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) + 6px;

@popover-arrow-offset-vertical: 12px;
@popover-arrow-offset-horizontal: 16px;

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

  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindex-popover;
  max-width: 100vw;
  font-weight: normal;
  white-space: normal;
  text-align: left;
  cursor: auto;
  user-select: text;

  &-content {
    position: relative;
  }

  &::after {
    position: absolute;
    background: fade(@white, 1%);
    content: '';
  }

  &-hidden {
    display: none;
  }

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

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

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

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

  &-inner {
    background-color: @neutral-bg-3-normal;
    background-clip: padding-box;
    border-radius: @radius-m;
    padding: 16px;
    box-shadow: @shadow-3-down;
    border: 1px solid @neutral-stroke-3-normal;
    min-width: 180px;
    max-width: 360px;
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    
    &-inner {
      box-shadow: @shadow-3-down;
    }
  }

  &-title {
    
    margin-bottom: 8px; 

    
    color: @neutral-fg-1-normal;
    font-weight: 500;
    
    &-with-icon {
      padding-left: 28px;
    }
  }

  &-inner-content {
    max-width: 100%;
    
    color: @neutral-fg-2-normal;
    &-with-icon {
      padding-left: 28px;
    }
  }

  &-message {
    display: flex;
    margin-bottom: 12px;
    color: @neutral-fg-1-normal;
    font-size: @font-size-body-m-strong;

    &-icon {
      display: inline-block;
      margin-right: 28px;
      color: @brand-fg-1-normal;
      font-size: @font-size-base;
    }
  }

  &-buttons {
    text-align: right;

    button:not(:first-child) {
      margin-left: 12px;
    }
  }

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

    &-content {
      --antd-arrow-background-color: @neutral-bg-3-normal;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: @popover-arrow-width;
      height: @popover-arrow-width;
      margin: auto;
      content: '';
      pointer-events: auto;
      .roundedArrow(@popover-arrow-width, 5px);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

  &-message {
    &-icon {
      .@{popover-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: 8px;
      }
    }

    &-title {
      .@{popover-prefix-cls}-rtl & {
        padding-left: @padding-md;
      }
    }
  }

  &-buttons {
    .@{popover-prefix-cls}-rtl & {
      text-align: left;
    }

    button {
      .@{popover-prefix-cls}-rtl & {
        margin-right: 8px;
        margin-left: 0;
      }
    }
  }
}


@root-entry-name: default;