@border: 1px solid #d9d9d9;
.custom-test-page-wrap-root {
  width: 100%;

  margin: 0px auto;
  .CodeMirror-scroll {
    padding-bottom: 0px;
  }
  .test-outline-box {
    height: calc(100% - 21px);
    overflow-x: hidden;
    position: relative;
    .dragLine {
      position: absolute;
      height: 5px;
      width: 100%;
      cursor: row-resize;
      z-index: 10;
      left: 0px;
    }
    .switchName {
      position: absolute;
      display: block;
      z-index: 10;
      cursor: pointer;
      left: 50%;
      font-size: 12px;
      opacity: 0.25;
    }
    .input-result-box {
      box-sizing: border-box;
      height: calc(100% - 224px);
      // max-height: 548px;
      width: 100%;
      overflow-y: auto;
      overflow-x: auto;
      border-bottom: 2px solid #d9d9d9;
      background-color: rgba(0, 0, 0, 0.02);
      padding: 0px 24px;
      .loading-mask {
        display: none;
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.3);
        text-align: center;

        &.spinning {
          display: block;
        }

        .spin-content-box {
          position: absolute;
          width: 100%;
          height: 80px;
          flex-flow: column;
          justify-content: center;
          top: 280px;
          .kw-spin {
            margin-bottom: 10px;
          }
        }
      }
      .in-title {
        // width: 80px;
        text-align: right;
      }
      .result-in-out-wrap {
        border: @border;
        width: calc(100% - 25px);
        overflow-x: auto;
        background-color: #fff;
        .in-result-box {
          position: relative;
          border-bottom: @border;
          .icon-copy {
            position: absolute;
            top: 2px;
            z-index: 10;
            padding: 9px;
            right: 12px;
            width: 32px;
            height: 32px;
            line-height: 15px;
            border-radius: 2px;
          }
          .icon-copy:hover {
            background-color: rgba(0, 0, 0, 0.04);
          }
          .functionCodeEditor {
            width: 100%;
          }

          .in-box {
            width: 100%;
            // max-height: 400px;
            // overflow-y: auto;
            background-color: #fff;
          }
          pre {
            margin-bottom: 0px;
          }
        }
        .in-result-box .kw-custom-scroll-thumb-y {
          opacity: 0;
        }

        &:hover {
          .in-result-box .kw-custom-scroll-thumb-y {
            opacity: 1;
          }
        }
        .out-result-box {
          .functionCodeEditor {
            width: 100%;
          }
          .CodeMirror-vscrollbar {
            overflow-y: hidden;
          }
          &:hover {
            .CodeMirror-vscrollbar {
              overflow-y: scroll;
            }
          }
          .c-param-editor .CodeMirror {
            border: none;
          }
          .in-title {
            width: 80px;
            text-align: right;
          }
          .result-box {
            width: calc(100% - 46px);
            background-color: rgba(0, 0, 0, 0.04);
            border: @border;
          }
          .error-box {
            border: 1px solid #ffccc7;
            background-color: #fff2f0;
            padding: 9px 13px;
            border-radius: 2px;
            width: 100%;
          }
          .param-code-editor-box {
            position: relative;
            .icon-copy {
              position: absolute;
              top: 2px;
              z-index: 10;
              padding: 9px;
              right: 12px;
              width: 32px;
              height: 32px;
              line-height: 15px;
              border-radius: 2px;
            }
            .icon-copy:hover {
              background-color: rgba(0, 0, 0, 0.04);
            }
          }
        }
      }
    }
    .test-input-box {
      border: @border;
      width: calc(100% - 48px);
      height: calc(100% - 35px);
      .functionCodeEditor {
        height: calc(100% - 38px);
      }
      .c-param-editor .CodeMirror-gutters {
        border-right: none;
      }
      .c-param-editor .CodeMirror {
        border: none;
        border-bottom: @border;
        height: calc(100% - 30px);
      }
      .icon-box {
        border-bottom: @border;
        padding: 8px 24px;
        align-items: center;
        .start-icon {
          width: 27px;
          border-right: @border;
        }
      }
    }
  }
}
