.fullscreen-modal,
.form-fullscreen-modal {
  overflow: hidden;

  .ant-modal {
    top: 0;
    width: 100% !important;
    height: 100%;
    max-width: calc(100vw) !important;

    &-content {
      height: 100%;
    }

    .ant-modal-body {
      .scrollbar__view {
        height: 100%;
      }
    }
  }
}

.suspension-modal {
  inset: 20px;
}

.form-fullscreen-modal {
  .ant-modal-close,
  .ant-modal-footer {
    display: none;
  }
}

.ant-modal {
  width: 520px;
  padding-bottom: 0;

  &-title {
    font-size: 16px;
    color: #333;
    line-height: 16px;
    font-weight: bold;

    .base-title {
      cursor: move !important;
    }
  }

  .ant-modal-body {
    padding: 0;

    > .scrollbar > .scrollbar__bar.is-horizontal {
      display: none;
    }
  }

  &-large {
    top: 60px;

    &--mini {
      top: 16px;
    }
  }

  &-header {
    padding: 16px;
    border-radius: 16px 16px 0 0;
    height: 50px;
    border-bottom: 1px solid #ddd;
  }

  &-content {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-radius: 16px;
  }

  &-footer {
    button + button {
      margin-left: 10px;
    }
  }

  &-close {
    font-weight: normal;
    outline: none;
  }

  &-close-x {
    display: flex;
    width: 92px;
    height: 50px;
    line-height: 50px;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
  }

  &-confirm-body {
    .ant-modal-confirm-content {
      // color: #fff;

      > * {
        color: @text-color-help-dark;
      }
    }
  }

  &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
    color: @error-color;
  }

  &-confirm-btns {
    .ant-btn:last-child {
      margin-right: 0;
    }
  }

  &-confirm-info {
    .ant-modal-confirm-body > .anticon {
      color: @warning-color;
    }
  }

  &-confirm-confirm.success {
    .ant-modal-confirm-body > .anticon {
      color: @success-color;
    }
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotation-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.form-modal {
  inset: 0;

  .ant-modal {
    .ant-modal-content {
      border-radius: 0;
      background: #f0f0f0;

      .ant-modal-header {
        height: 170px;
        border-radius: 0;
        border-bottom: 0;
        background: #f0f0f0;
        padding: 0;

        .ant-modal-title {
          .step-form-form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
            padding: 16px;
            background: #fff;

            > span {
              position: absolute;
              left: 0;
              right: 0;
              text-align: center;
            }

            .btn-box {
              .ant-btn:not(:last-child) {
                margin-right: 10px;
              }
            }
          }

          .step-box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            background: #fff;
            border-radius: 16px;
            margin: 10px;

            .ant-steps {
              width: 70%;

              .ant-steps-item-container {
                padding: 3px 0 3px 3px;
              }

              .ant-steps-item-process {
                .ant-steps-item-icon {
                  border: 2px solid #fff;
                  line-height: 30px;
                  animation: rotation 4s linear infinite;
                  position: relative;

                  &::before {
                    border: 2px dashed #1890ff;
                    content: '';
                    width: 36px;
                    height: 36px;
                    display: block;
                    border-radius: 50%;
                    position: absolute;
                    left: -4px;
                    top: -4px;
                  }

                  .ant-steps-icon {
                    display: inline-block;
                    animation: rotation-reverse 4s linear infinite;
                  }
                }
              }

              .ant-steps-item-title {
                color: #333;

                &::after {
                  background-color: #eee;
                }
              }

              .ant-steps-item-wait .ant-steps-item-icon {
                background-color: #f0f0f0;
                border-color: #f0f0f0;
                color: #cacaca;
                font-weight: bold;
              }

              .ant-steps-item-finish .ant-steps-item-icon {
                background-color: #eaf4ff;
                border-color: #eaf4ff;
                font-size: 25px;
              }
            }
          }
        }
      }

      .ant-modal-body {
        background: #fff;
        border-radius: 16px;
        margin: 0 10px;
        height: calc(100% - 178px);
        overflow: auto;

        .step-container {
          height: 100%;

          .cg-container,
          .center-container,
          .widget-config-container {
            .ant-tabs {
              border-radius: 16px;
            }

            .vben-basic-form {
              .ant-form-item:not(.ant-form-item-with-help) {
                margin-bottom: 0;
              }

              .suspensionRow {
                .ant-form-item:not(.ant-form-item-with-help) {
                  margin-bottom: 10px;
                }
              }
            }
          }
        }

        .ant-form-vertical .ant-form-item-label {
          padding-bottom: 14px;
        }

        .vben-basic-form .ant-form-item:not(.ant-form-item-with-help) {
          margin-bottom: 24px;
        }

        .ant-table-thead > tr > th {
          background: #f7fbff;
          font-weight: bold;
        }

        .step1-box {
          display: flex;
          justify-content: center;
          padding: 14px 0;

          .step1 {
            width: 70%;

            h3 {
              margin: 0 0 12px;
              font-size: 16px;
              line-height: 32px;
              color: @text-color;
            }

            h4 {
              margin: 0 0 4px;
              font-size: 14px;
              line-height: 22px;
              color: @text-color;
            }

            p {
              color: @text-color;
            }

            .database-title {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              margin-bottom: 10px;
              position: relative;

              > span {
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
                color: #27c07a;
              }
            }

            .delete-span {
              color: #ff8080;
              cursor: pointer;
            }

            .ant-table-tbody > tr > td {
              padding: 16px 8px;
            }
          }
        }
      }
    }
  }
}

.category-modal {
  .ant-modal .ant-modal-body > .scrollbar {
    padding-bottom: 0 !important;
  }
}

.fixedHeight {
  .ant-modal {
    .ant-modal-content {
      height: 100%;

      .ant-modal-body {
        .scrollbar__view {
          height: 100%;
        }
      }
    }
  }
}

@media screen and (max-height: @screen-600) {
  .ant-modal {
    top: 60px;
  }
}

@media screen and (max-height: @screen-540) {
  .ant-modal {
    top: 30px;
  }
}

@media screen and (max-height: @screen-xs) {
  .ant-modal {
    top: 10px;
  }
}

.custom-modal-box {
  .ant-modal {
    .ant-modal-content {
      .ant-modal-body {
        padding: 16px !important;
      }
    }
  }
}

.custom-erp-modal-box {
  .ant-modal {
    width: 700px !important;

    .ant-modal-content {
      .ant-modal-body {
        padding: 16px !important;
      }
    }
  }
}

.custom-modal-y-box {
  .ant-modal {
    .ant-modal-content {
      .ant-modal-body {
        padding: 16px 0 !important;
      }
    }
  }
}

.ai-modal {
  .ant-modal {
    .ant-modal-body > .scroll-container {
      border-radius: 16px;
    }
  }
}

.custom-model-height {
  .ant-modal-content {
    height: 100%;

    .ant-modal-body {
      height: calc(100% - 102px);
    }
  }

  &.nofooter {
    .ant-modal-body {
      height: calc(100% - 50px);
    }
  }
}
