.form-container {
  position: relative;
  width: 100%;
  height: 100%;
  .form-header {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #eee;
    box-shadow: 0 0 4px #ccc;
    margin-bottom: 0%;

    .form-header-left,
    .form-header-right {
      width: 630px;
    }

    .form-header-center {
      width: calc(100% - 1260px);
      display: flex;
      align-items: center;
      justify-content: center;

      .ant-tabs-top > .ant-tabs-nav {
        margin: 0 !important;
      }
    }

    .form-name {
      color: #505050;
      font-size: 20px;
    }
    .green-color {
      color: rgba(0, 186, 173, 1);
      font-weight: bold;
      border: 1px solid rgba(0, 186, 173, 1);
    }
  }
  .form-view-container {
    display: flex;
    height: calc(100% - 50px);
    position: relative;
    .form-left {
      width: 328px;
      height: 100%;
      padding: 5px 10px 10px 10px;
      background-color: #fff;
      position: relative;

      .form-left-content {
        width: 100%;
        height: calc(100% - 30px);
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0px;
        }
      }

      .left-template-content {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        align-items: center;

        .left-template-content-item {
          width: calc((100% - 10px) / 2);
          height: 140px;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .left-template-content-item-name {
            text-align: center;
            margin-top: 5px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .left-template-content-item-image {
          width: 100%;
          height: 115px;
          border: 1px #d9d8d8 solid;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 0 4px #eee;

          .left-template-content-item-image-img {
            padding: 10px;
            position: static;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }

      .collapse-header {
        padding: 10px;
      }

      .draggable-ghost {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px #a6a6a6 dashed;
        border-radius: 5px;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: transparent;
        }
      }

      [name='list'] {
        display: flex;
        flex-wrap: wrap;
        padding-right: 10px;

        .source-componet-item {
          cursor: move;
          width: calc(50% - 10px);
          border: 1px solid #ccc;
          padding: 0 10px;
          margin-left: 10px;
          margin-bottom: 10px;
          height: 32px;
          display: flex;
          align-items: center;
          background-color: rgba(241, 241, 241, 1);
          border-radius: 4px;

          .iformfont {
            margin-right: 5px;
            color: rgba(42, 130, 228, 1);
          }

          .source-componet-item-name {
            flex: auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          &:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
          }
        }
      }
    }
    .form-component-view {
      width: calc(100% - 656px);
      height: 100%;
      padding: 20px;
      background-color: rgba(243, 243, 243, 1);
      .form-range {
        position: relative;
        padding: 20px 10px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 0 8px #ccc;
        .empty-text {
          color: #aaa;
          height: 150px;
          top: 50%;
          left: 50%;
          margin-top: -75px;
          margin-left: -92px;
          position: absolute;
          z-index: 100;
        }
        .draggable-box {
          padding-bottom: 200px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-content: flex-start;
          overflow-y: auto;
          .drag-move {
            cursor: move;
            min-height: 62px;
          }
        }
        .drag-move-box {
          position: relative;
          box-sizing: border-box;
          padding: 15px 15px 0 15px;
          overflow: hidden;
          transition: all 0.3s;
          min-height: 62px;
          background-color: #fff;
          border: 1px solid rgba(204, 204, 204, 1);
          box-shadow: 0 0 4px #ccc;
          margin-bottom: 10px;
          .copy-delete-box {
            display: none;
          }

          &:hover {
            background: rgba(229, 232, 252, 1) !important;
            .copy-delete-box {
              display: block !important;
              > .copy,
              > .delete {
                position: absolute;
                top: 0px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                z-index: 989;
                color: #999;
                border-radius: 50%;
                transition: all 0.3s;
                background: #fff;
                font-size: 16px;
                box-shadow: 0 0 4px #ccc;

                &.unactivated {
                  opacity: 0 !important;
                  pointer-events: none;
                }

                &.active {
                  opacity: 1 !important;
                }
              }
              > .copy {
                right: 35px;
              }

              > .delete {
                right: 0;
              }
            }
          }

          // 选择时 start
          &::before {
            content: '';
            height: 5px;
            width: 100%;
            background: rgba(229, 232, 252, 1) !important;
            position: absolute;
            top: 0;
            right: -100%;
            transition: all 0.3s;
          }

          &.active {
            &::before {
              right: 0;
            }

            background: rgba(229, 232, 252, 1) !important;
            outline-offset: 0;
          }
        }
        .drag-move-table {
          position: relative;
          box-sizing: border-box;
          padding: 15px 15px 0 15px;
          overflow: hidden;
          transition: all 0.3s;
          height: 500px;
          background-color: #fff;
          border: 1px solid rgba(204, 204, 204, 1);
          box-shadow: 0 0 4px #ccc;
          margin-bottom: 10px;
          .copy-delete-box {
            display: none;
          }

          &:hover {
            background: rgba(229, 232, 252, 1);
            .copy-delete-box {
              display: block;
              > .copy,
              > .delete {
                position: absolute;
                top: 0px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                z-index: 989;
                color: #999;
                border-radius: 50%;
                transition: all 0.3s;
                background: #fff;
                font-size: 16px;
                box-shadow: 0 0 4px #ccc;

                &.unactivated {
                  opacity: 0 !important;
                  pointer-events: none;
                }

                &.active {
                  opacity: 1 !important;
                }
              }
              > .copy {
                right: 35px;
              }

              > .delete {
                right: 0;
              }
            }
          }
          // 去掉子级样式
          &:hover .drag-move-box {
            background-color: #fff;
          }
          &:hover .drag-move-box .copy-delete-box {
            display: none;
          }

          // 选择时 start
          &::before {
            content: '';
            height: 5px;
            width: 100%;
            background: rgba(229, 232, 252, 1) !important;
            position: absolute;
            top: 0;
            right: -100%;
            transition: all 0.3s;
          }

          &.active {
            &::before {
              right: 0;
            }

            background: rgba(229, 232, 252, 1);
            outline-offset: 0;
          }

          .draggable-box {
            height: 100%;
          }
        }
        .grid-box {
          height: auto;
          padding: 15px;
          .grid-row {
            background-color: #fff;

            .grid-col {
              .draggable-box {
                min-height: 123px !important;
                min-width: 50px;
                padding: 10px 10px 0 10px;
                height: auto !important;
                border: 1px #ccc dashed;
                background: #fff;

                .list-main {
                  min-height: 60px !important;
                  position: relative;
                  border: 1px #ccc dashed;
                }
              }
            }
          }
        }
        // 去掉父级样式
        .drag-move-table:has(.drag-move-box:hover) {
          background-color: #fff;
          .copy-delete-box {
            display: none;
          }
        }
        .drag-move-table:has(.drag-move-box:hover)::before {
          background-color: #fff !important;
        }
        .notip {
          &::after {
            position: absolute;
            top: 140px;
            left: 48%;
            content: '从左侧拖拽数据';
          }
        }
      }
      .ml-5 {
        margin-left: 5px;
      }

      .text-ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .form-right {
      position: absolute;
      right: 0;
      top: 0;
      width: 328px;
      padding: 20px 0;
      height: 100%;
      overflow: hidden;
      background-color: rgba(243, 243, 243, 1);
      .form-right-container {
        height: 100%;
        background-color: #fff;
        border-radius: 5px;
        overflow-x: hidden;
        box-shadow: 0 0 8px #ccc;
        position: relative;
        box-sizing: border-box;
        .hint-box {
          color: #aaa;
          height: 150px;
          top: 50%;
          margin-top: -75px;
          left: 0;
          right: 0;
          bottom: 0;
          position: absolute;
          z-index: 100;
        }
        .form-row {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .ant-form-item-label {
            padding: 0 0 0 0px;
          }
          .form-row-top {
            padding-top: 2px;
            margin-left: 5px;
          }
        }

        .ant-collapse {
          display: flex;
          flex-direction: column;
          gap: 16px;
          .ant-collapse-item:not(:last-child) {
            border-bottom: 1.5px solid #c5cfd166;
          }
          .ant-collapse-item:not(.ant-collapse-item-active) {
            padding-bottom: 16px;
          }
        }

        .devops-tabs {
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 16px;

          .ant-tabs-nav {
            padding: 0 16px;
          }

          .ant-tabs-content-holder {
            overflow-y: auto;
            padding: 0 16px 16px 16px;
          }
        }

        .ant-form-item {
          position: relative;

          .setting-btn {
            position: absolute;
            top: -30px;
            right: 0;
            cursor: pointer;
            font-size: 16px;
            color: #60666B;
          }
        }
      }

      .bind-params {
        padding: 16px;
        overflow-y: auto;
        box-sizing: border-box;
      }
    }
  }

  .devops-tabs {
    .ant-tabs-tab {
      font-size: 16px;
    }
  }

  .ant-collapse-header {
    padding: 0px !important;

    .ant-collapse-arrow {
      right: 0 !important;
    }
  }

  .ant-collapse-content-box {
    padding: 12px 0 0 0 !important;
  }

  .ant-form-item {
    margin-bottom: 16px;
  }
}

.w-full {
  width: 100% !important;
}

// 放置占位符的类名
.draggable-ghost {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 0 10px;
  height: 68px;
  float: none;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  pointer-events: none;

  &::before {
    content: '放这里';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 96%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: white;
    background-color: var(--primary-color);
    border-radius: 2px;
    z-index: 999;
    box-sizing: border-box;
    pointer-events: none;
  }
}

.draggable-chosen {
  background-color: transparent;
}

.draggable-drag {
  background-color: transparent;
}

.ant-modal-content {
  height: 100%;
}
.h-0 {
  height: 0 !important;
}

@input-disabled-color: #60666b;
@input-disabled-border-color: transparent;
@input-disabled-background: #f5f7f9;

.border-background-disabled {
  border-color: @input-disabled-border-color;
  background-color: @input-disabled-background;
}

.ant-input[disabled] {
  color: @input-disabled-color;
  &:extend(.border-background-disabled);
}

.ant-picker-input > input[disabled] {
  color: @input-disabled-color;
}

.ant-input-number-disabled .ant-input-number-input {
  color: @input-disabled-color;
}

.ant-input-affix-wrapper-disabled {
  &:extend(.border-background-disabled);
  &:hover {
    border-color: @input-disabled-border-color;
  }
}
.ant-picker.ant-picker-disabled {
  &:extend(.border-background-disabled);
  &:hover {
    border-color: @input-disabled-border-color;
  }
}
.ant-input-number-disabled {
  &:extend(.border-background-disabled);
  &:hover {
    border-color: @input-disabled-border-color;
  }
}
.ant-radio-disabled .ant-radio-inner {
  &:extend(.border-background-disabled);
  &:hover {
    border-color: @input-disabled-border-color;
  }
}
.ant-radio-disabled + span {
  color: @input-disabled-color;
}
.ant-radio-disabled .ant-radio-inner::after {
  background-color: var(--primary-color);
}
.ant-checkbox-disabled .ant-checkbox-inner {
  &:extend(.border-background-disabled);
  &:hover {
    border-color: @input-disabled-border-color;
  }
}
.ant-checkbox-disabled + span {
  color: @input-disabled-color;
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: var(--primary-color);
}
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  &:extend(.border-background-disabled);
  color: @input-disabled-color;
}
