/*
 * Style for demo.njk
 */

@import url('editor.css');

.editor-page > .io-label {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  padding: 10px;
  padding-left: 0;
}

.editor-page > .io {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.editor-page > .io > div {
  flex: 1;
  background: rgba(196, 128, 196, 0.05);
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-page > .io > div > h2 {
  flex: 0;
}

.editor-page > .io > div > div,
.editor-page > .io > div > textarea {
  flex: 1;
  background: white;
  padding: 3px;
  /* Grabbed this font stack from down in the bowels of Monaco to try and make the REPL look like the editor. */
  font-family: 'SF Mono', Monaco, Menlo, Consolas, 'Ubuntu Mono', 'Liberation Mono',
    'DejaVu Sans Mono', 'Courier New', monospace;
  font-size: 12px;
}