@import 'var';

@containerH: 800px;
@asideW: 300px;

.httpDebugPage {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;

  .header {
    padding: 15px 10px;
    border-bottom: @primaryBorderStyle;
    background-color: @secondaryBGColor;
  }
}

.main {
  height: @containerH;
  width: 100%;
  overflow: hidden;

  .leftSider {
    background-color: #fff;
    width: @asideW;
    float: left;
    border-right: @secondaryBorderStyle;
  }

  .rightBlock {
    width: calc(100% - @asideW);
    height: @containerH;
    overflow: hidden;
    box-sizing: border-box;
    background-color: @secondaryBGColor;
  }
}

.httpDebugContainer {
  width: 100%;

  .nameBar {
    border-bottom: @secondaryBorderStyle;
    padding: 10px;
    height: 50px;
  }

  .methodUrlLine {
    border-bottom: @primaryBorderStyle;
    padding: 10px;
    display: grid;
    grid-template-columns: 100px auto 80px 80px;
    gap: 10px;
    height: 52px;
  }

  .requestParamEditBox {
    border-bottom: @primaryBorderStyle;
  }

  .responseTitleBar {
    border-bottom: @primaryBorderStyle;
    background-color: @secondaryBGColor;
    padding: 10px;
    color: @secondaryColor;
    display: grid;
    grid-template-columns: auto 300px;
  }

  .statusBlock {
    &:nth-child(n + 2) {
      margin-left: 10px;
    }
  }

  .statusSuccess {
    color: green;
  }

  .statusFail {
    color: red;
  }

  .responseSuccess {
  }

  .responseFail {
    padding: 10px;
  }
}

:global {
  .responseCM {
    width: 100%;

    .CodeMirror {
      height: 348px;
      width: 100%;
      background-color: @secondaryBGColor;
    }
  }
}
