@import '~@zgfe/business-lib/es/assets/styles/inner.less';
.cdp-visual-create {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  .ant-form-item-label {
    margin-right: 4px !important;
  }
  .action-name-box {
    .ant-form-item-label::before {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
    &-error {
      color: #fb5547;
    }
  }
  .action-name-box.error {
    .ant-input-affix-wrapper {
      border-color: #fb5547 !important;
      box-shadow: 0 0 0 2px rgba(251, 85, 71, 0.2) !important;
    }
  }
  &-search {
    margin-bottom: @padding-xss;
  }
  &-dataset {
    z-index: @zindex-table-fixed;
    display: flex;
    flex: none;
    flex-direction: column;
    width: 240px;
    height: 100%;
    background: @white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    &-head {
      flex: none;
      padding: @padding-md @padding-md 0 @padding-md;
      h3 {
        margin-bottom: @margin-sm;
      }
    }
    &-list {
      flex: 1;
      overflow-y: auto;
    }
    &-item {
      .__select-option();
      .bsicon {
        margin-right: @margin-xs;
      }
      &:hover {
        border-radius: 0;
      }
      .tishi {
        margin-left: 8px;
        color: #9aa1a9;
      }
      margin-bottom: 4px;
      padding-left: @padding-md;
      overflow: hidden;
    }
  }
  &-top {
    flex: 1;
    overflow: auto;
  }
  &-top,
  &-bottom {
    display: flex;
    flex-direction: column;
  }
  &-bottom {
    flex: none;
    height: 350px;
    overflow: auto;
    border-top: 1px solid @border-color-split;
  }
  &-content {
    z-index: @zindex-table-fixed - 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  &-flow {
    flex: none;
    height: 300px;
    background: @background-color-base;
  }
  &-config {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background: @white;
    &-head {
      flex: none;
      padding: @padding-md @padding-lg;
      border-bottom: 1px solid @border-color-split;
      & > span {
        font-weight: 500;
        font-size: @font-size-lg;
      }
      .ant-radio-button-wrapper:first-child {
        border-radius: 4px 0 0 4px;
      }
      .ant-radio-button-wrapper:last-child {
        border-radius: 0 4px 4px 0;
      }
      .ant-radio-group {
        margin-left: @margin-lg;
      }
      .ant-btn {
        float: right;
        margin-left: @margin-md;
      }
      .run:enabled {
        color: @white;
        background: @green-base;
        border-color: @green-base;
        &:hover {
          background-color: @green-5;
          border-color: @green-5;
        }
      }
    }
    &-content {
      flex: 1;
      overflow-y: auto;
      > :nth-child(1) {
        padding: 16px 24px;
      }
      .cdp-task-log {
        max-height: none;
      }
    }
  }
  &-error {
    transform: scale(0.8);
  }
  &-loading {
    flex: 1;
    margin-top: @margin-lg*3 !important;
    text-align: center;
  }
  &-running {
    position: absolute;
    top: 0;
    left: 0;
    z-index: @zindex-modal-mask;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    background: fade(#021429, 80%);
    .ant-spin {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &-runtip {
    display: block;
    margin: @margin-sm 0;
    color: @white;
  }
  &-overview {
    height: 100%;
    padding: @padding-md @padding-lg;
    overflow-y: scroll;
    &.split {
      padding-top: 0;
    }
    .preview-empty-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      img {
        width: 300px;
        height: 200px;
      }
      div {
        color: #67727f;
        span {
          color: #165dff;
        }
      }
    }
  }
  &-tip {
    position: absolute;
    top: @padding-xs + 4;
    left: 100px;
    color: @warning-color;
  }
}
