.@{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: 10px 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;


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

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

  display: inline-block;

  &-line {
    position: relative;
    width: 100%;
    font-size: @font-size-body-m;
  }

  &-steps {
    display: inline-block;

    &-outer {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    &-item {
      flex-shrink: 0;
      min-width: 2px;
      margin-right: 2px;
      background: @progress-steps-item-bg;
      transition: all 0.3s;

      &-active {
        background: @brand-bg-1-normal;
      }
    }
  }

  &-small&-line,
  &-small&-line &-text .@{iconfont-css-prefix} {
    font-size: @font-size-body-s;
  }

  &-outer {
    display: inline-block;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    .@{progress-prefix-cls}-show-info & {
      margin-right: ~'calc(-2em - 8px)';
      padding-right: ~'calc(2em + 8px)';
    }
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background-color: @neutral-stroke-2-normal;
    border-radius: @progress-radius;
  }

  &-circle-trail {
    stroke: @neutral-stroke-2-normal;
  }

  &-circle-path {
    animation: ~'@{ant-prefix}-progress-appear' 0.3s;
  }

  &-inner:not(.@{ant-prefix}-progress-circle-gradient) {
    .@{ant-prefix}-progress-circle-path {
      stroke: @brand-stroke-1-normal;
    }
  }

  &-success-bg,
  &-bg {
    position: relative;
    background-color: @brand-stroke-1-normal;
    border-radius: @progress-radius;
    transition: all 0.4s @ease-out-circ 0s;
  }

  &-success-bg {
    position: absolute;
    top: 0;
    left: 0;
    background-color: @status-success-stroke-1-normal;
  }

  &-text {
    display: inline-block;
    width: 2em;
    margin-left: 8px;
    color: @neutral-fg-2-normal;
    font-size: @progress-text-font-size;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    word-break: normal;
    .@{iconfont-css-prefix} {
      font-size: @font-size-body-m;
    }
  }

  &-status-active {
    .@{progress-prefix-cls}-bg::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: @component-background;
      border-radius: 10px;
      opacity: 0;
      animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
      content: '';
    }
  }

  &-status-exception {
    .@{progress-prefix-cls}-bg {
      background-color: @status-error-stroke-1-normal;
    }
    .@{progress-prefix-cls}-text {
      color: @status-error-stroke-1-normal;
    }
  }

  &-status-exception &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
    .@{progress-prefix-cls}-circle-path {
      stroke: @status-error-stroke-1-normal;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-bg {
      background-color: @status-success-stroke-1-normal;
    }
    .@{progress-prefix-cls}-text {
      color: @status-success-stroke-1-normal;
    }
  }

  &-status-success &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
    .@{progress-prefix-cls}-circle-path {
      stroke: @status-success-stroke-1-normal;
    }
  }

  &-circle &-inner {
    position: relative;
    line-height: 1;
    background-color: transparent;
  }

  &-circle &-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: @neutral-fg-2-normal;
    font-size: @progress-circle-text-font-size;
    line-height: 1;
    white-space: normal;
    text-align: center;
    transform: translate(-50%, -50%);

    .@{iconfont-css-prefix} {
      font-size: (14 / 12em);
    }
  }

  &-circle&-status-exception {
    .@{progress-prefix-cls}-text {
      color: @status-error-stroke-1-normal
    }
  }

  &-circle&-status-success {
    .@{progress-prefix-cls}-text {
      color: @status-success-stroke-1-normal;
    }
  }
}

@keyframes ~"@{ant-prefix}-progress-active" {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.1;
  }

  20% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }
}


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

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

  &-outer {
    .@{progress-prefix-cls}-show-info & {
      .@{progress-prefix-cls}-rtl& {
        margin-right: 0;
        margin-left: ~'calc(-2em - 8px)';
        padding-right: 0;
        padding-left: ~'calc(2em + 8px)';
      }
    }
  }

  &-success-bg {
    .@{progress-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  &-line &-text,
  &-steps &-text {
    .@{progress-prefix-cls}-rtl& {
      margin-right: 8px;
      margin-left: 0;
      text-align: right;
    }
  }
}


@root-entry-name: default;


@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-duration: 0.3s;
@radio-focus-shadow: 0 0 0 3px @slider-handle-color-focus-shadow;
@radio-button-focus-shadow: @radio-focus-shadow;

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

  display: inline-block;
  font-size: 0;

  .@{ant-prefix}-badge-count {
    z-index: 1;
  }

  > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
    border-left: none;
  }
}


.@{radio-prefix-cls}-wrapper {
  .reset-component();
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin-right: @radio-wrapper-margin-right;
  cursor: pointer;

  &-disabled {
    cursor: not-allowed;
  }

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