@import '../../global.scss'; // 根据实际情况调整路径

.paramItem {
  color: red;
  &:global(.has-error .next-input-group-addon) {
    border-color: var(--input-feedback-error-border-color, #ed675a) !important;
  }
  :global {
    .next-input-group-addon {
      background-color: var(--color-fill1-1, #fff);
    }
    .next-focus + .next-input-group-addon {
      border-color: var(--input-focus-border-color, #cecece);
    }
    .next-disabled .next-input-group-addon {
      background-color: var(--input-disabled-bg-color, #f7f7f7);
      color: var(--input-disabled-color, #f7f7f7);
    }
  }
}

.innerBefore {
  line-height: 30px;
  font-size: 12px;
  color: var(--color-fill1-6, #8b8b8b);
  text-align: start;
}

.innerAfter {
  line-height: 30px;
  font-size: 12px;
  color: var(--color-fill1-6, #8b8b8b);
  text-align: end;
}

.innerAfterTooltip {
  white-space: pre-wrap;
  overflow: hidden;
}

.resources {
  color: var(--color-fill1-6, #8b8b8b);
  font-size: 12px;
  margin: 8px 0 16px;
  display: flex;
  align-items: center;
  :global(.next-divider) {
    margin: 0 16px;
  }
}

.component {

  border-radius: 4px;
  margin-bottom: 8px;
  padding: 16px 20px;
  border: 1px solid var(--color-line1-1, #e8e8e8);


}

.componentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

.componentBody p {
  margin: 0;
  padding: 8px 0;
}

.readonlyParams {
  transition: all 0.3s ease-in-out;
  height: 0;
  overflow: hidden;
  padding-top: 8px;
  &:empty {
    display: none;
  }
}
.imagesFormItem {
  :global(.next-col) {
    overflow: hidden;
  }
}

.images {
  padding-top: 6px;
  line-height: 22px;
}

.emptyHelp {
  color: var(--color-fill1-6, #8b8b8b);
  font-size: 14px;
  margin-bottom: 16px;
}

.replicaMessage {
  margin: 4px -4px 0;
  padding: 4px 8px 4px 4px !important;
  background-color: var(--color-white, #fff) !important;
  :global(.next-message-close) {
    top: 7px !important;
  }
}

.batch {
  :global {
    .next-col {
      margin-bottom: 8px;
    }
    .next-col > .next-input {
      border-radius: 0;
    }
    .next-col:nth-child(4n + 1) {
      & > .next-input {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
    }
    .next-col:nth-child(4n),
    .next-col:last-child {
      & > .next-input {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
    .next-col:not(:nth-child(4n + 1)) {
      & > .next-input {
        border-left: 0;
      }
    }
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.configDiff {
  color: var(--color-warning-5, #f98e1a) !important;
  cursor: pointer;
  float: right;
  margin-top: -24px;
  height: 32px;
  display: flex;
  align-items: center;
  &:hover {
    color: var(--color-warning-5, #f98e1a) !important;
  }
}


.scrollWrap {
  overflow: auto;
  position: relative;
}

.stageWrap {
  width: 100%;
  transform: rotateZ(0deg);
  background-color: var(--color-Brand3-1, #f2f5f7);
  min-height: 134px;
}

.stages {
  padding: 16px;
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    display: block;
    left: 32px;
    right: 32px;
    height: 1px;
    background-color: var(--color-brand3-3, #dae0e5);
    top: 30px;
    z-index: 1;
  }
}

.stage {
  width: 320px;
  height: fit-content;
  border-radius: 4px;
  position: relative;
  padding-bottom: 4px;
  overflow: hidden;
  background-color: var(--color-white, #fff);
  z-index: 10;
  transition: all 0.3s ease-in-out;
  @include with-border;
  &:not(:last-child) {
    margin-right: 16px;
  }
}

.stageTitle {
  background-color: var(--color-Brand3-2, #e9edf0);
  font-weight: 500;
  line-height: 40px;
  padding-left: 20px;
  margin-bottom: 12px;
  color: var(--color-text1-4, #292929);
}

.task {
  border-radius: 4px;
  display: flex;
  font-size: 13px;
  margin: 0 12px 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text1-3, #575757);
  padding: 8px 8px;
  transition: all 0.3s ease;
  &:hover {
    background-color: var(--color-brand1-2, #c5e8ff);
  }
}

.loadingContent {
  height: 100%;

  :global {
    .next-loading-wrap {
      height: 100%;
      min-height: 200px;
    }
  }
}

.enableTypeSwitchContent {
  :global {
    .next-form-item-label {
      width: 100%;
      padding-right: 0;
    }

    .next-form-item-label > label {
      width: 100%;
    }
  }
}