.form-api-field {
  .api-content {
    .api-url {
      padding: 10px;
      background: transparentize($black, 0.98);
      border-top: 1px solid $color-border;

      .ant-input-group-addon {
        background: $white;
      }
    }

    .api-tabs {
      border-top: 1px solid $color-border;

      .ant-tabs-bar {
        margin-bottom: 4px;
      }

      .ant-tabs-tabpane {
        position: relative;
      }
    }

    .ant-tabs-nav-wrap {
      padding: 0 12px;
      background: transparentize($black, 0.98);

      .ant-tabs-nav {
        height: 38px;

        .ant-tabs-tab {
          height: 36px;
          line-height: 36px;
        }
      }
    }

    .response-body,
    .assert-result {
      min-height: 80px;
      max-height: 350px;
      padding: 12px;
      font-size: 12px;
      white-space: pre-line;
      word-break: break-word;
    }
  }

  .key-val-container {
    display: flex;
    flex-direction: column;

    .key-val-item {
      display: flex;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid $color-border;

      .width0 {
        width: 0;
      }

      &:last-child {
        border-bottom: 0;
      }

      input {
        color: $color-text;
        border: none;
        box-shadow: none;
      }

      .item-separate {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: $color-border;
      }

      .key-val-operation {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
      }

      .hidden-del {
        visibility: hidden;
      }

      .show-del {
        visibility: visible;
      }

      .flex-1 {
        overflow: hidden;
      }
    }
  }

  .api-tables {
    .table-title {
      line-height: 36px;
    }

    .table-body {
      margin-bottom: 20px;
      border: 1px solid $color-border;
      border-radius: $radius;
    }

    .api-test-select {
      .ant-select-selection {
        border: 0;
      }
    }
  }

  .api-body {
    .body-type-choosen {
      display: flex;
      align-items: center;
      padding: 4px;
      border-bottom: 1px solid $color-border;
    }

    .body-value-container {
      .body-val-none {
        padding: 20px;
        text-align: center;
      }

      .key-val-item {
        &:last-child {
          border-bottom: 1px solid $color-border;
        }
      }
    }

    .test-json-editor {
      position: relative;

      .json-format-btn {
        position: absolute;
        top: -36px;
        right: 36px;
      }
    }
  }
}
