@import '~@zgfe/business-lib/es/assets/styles/inner.less';
.json-editor {
  position: relative;
  border: 1px solid @border-color-base;
  border-radius: 4px;
  textarea {
    border: 0;
  }
  &-main {
    max-height: 304px;
    padding: 12px @padding-md;
    overflow: auto;
  }
  &-row {
    position: relative;
    margin-bottom: @margin-xss;
    border-radius: 2px;
    &:hover {
      background: #fafafb;
      cursor: pointer;
      .json-editor-arrow {
        display: inline-block;
      }
    }
  }
  &-arrow {
    position: absolute;
    left: -14px;
    display: none;
  }
  &-colon {
    margin: 0 @margin-xss;
    color: @text-color-secondary;
  }
  &-symbal {
    display: inline-block;
  }
  &-label {
    display: inline-block;
    padding: 0 4px;
    color: @success-color;
    background-color: #d4f2dc;
    border-radius: 2px;
  }
  &-value {
    display: inline-block;
    color: #354354;
  }
  &-mode {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
    height: 24px;
    padding: 0 8px;
    line-height: 24px;
    background: #f2f3f4;
    border-radius: 4px;
    &:hover {
      background: #e6e7ea;
      cursor: pointer;
    }
  }
  &-textarea {
  }
  &-empty {
    color: @text-color-secondary;
  }
  &-error {
    position: absolute;
    bottom: -23px;
    color: @error-color;
    font-size: 12px;
  }
}
