@import '../constants/dimensions';

.graphql-editor {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(50%, 1fr) min-content min-content min-content minmax(0%, min-content) min-content;

  & > h2 {
    color: var(--hl);
    padding: @padding-xs @padding-sm;
    font-size: @font-size-md;
    border-top: 1px dashed var(--hl-sm);
  }

  .graphql-editor__query, .graphql-editor__variables {
    height: 100%;
    max-height: 100%;
  }

  .graphql-editor__query .cm-attribute {
    color: var(--color-info);
  }
}
