@import '../constants/dimensions';
@import '../constants/colors';

.query-editor {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(100px, 1fr) @line-height-md;
  grid-template-columns: 100%;

  .query-editor__preview {
    max-height: 14rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    code {
      overflow: auto;
      min-height: 2em;
    }
  }

  .query-editor__editor {
    min-height: 2rem;
    max-height: 100%;
    overflow-y: auto;

    .key-value-editor {
      padding: 0;
    }
  }
}
