@import url(text-loader.css);

:root {
  --blue: hsl(210, 40%, 40%);
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(210, 10.2%, 80%);
  --deep-gray: hsl(210, 10.2%, 20%);

  --ui-font-family: Fira Sans Condensed;
}

parser-editor {
  display: grid;
  grid-template: 
    "header header" auto
    "aside main " 1fr
   / 1fr  5fr;
  margin:0;
  height: 100%;
  width: 100%;
}

parser-editor header h2,
parser-editor header h3 {
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--deep-gray);
  font-family: var(--ui-font-family);
}

parser-editor > header {
  background: var(--blue);
  color: var(--white);
  padding:0 1em;
  display: flex;
  align-items: center;
  grid-area: header;
}


parser-editor > header h1 {
  margin:0;  
}

parser-editor > header input {
  flex: 1;
}
parser-editor aside {
  background: var(--light-gray);
  padding:1em;
}

parser-editor aside form {
  width: 100%;
  display: flex;
}

parser-editor main {
  padding: 1em;
  gap: 1em;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  
  width: 100%;
  white-space: pre-wrap;
}

parser-editor code {
  background-color: hsl(49.4, 100%, 80%);
  text-transform: uppercase;
  padding: .2em;
}

parser-editor output .chunk {
  border: 1px solid var(--blue);
}
parser-editor output {
  display: block;
  width: 100%;
}
parser-editor text-loader textarea {
  white-space: pre-line
}