*,:after,:before{
  border:0 solid;
  box-sizing:border-box
}

html{
  font-size:16px
}

.hidden{
  display:none
}

code,code[class*=language-],output{
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  font-size:75%
}

pre{
  border:1px solid #cfd2e1;
  border-color:var(--color-neutral-100,#cfd2e1);
  border-radius:.25rem;
  margin:.5rem;
  overflow:auto;
  padding:.5rem
}

.preReset{
  border-width:0;
  margin:0;
  padding:0
}

:host,stencila-code-block{
  /** @prop --background-editor: Background color of the Code Editor section */
  --background-editor:var(--color-neutral-50,#edf2f7);
  /** @prop --border: Border color around the component as well as internal section dividers */
  --border:var(--color-neutral-100,#e2e8f0)
}

:host,stencila-code-block{
  border-radius:.25rem;
  border-style:solid;
  border-width:1px;
  display:block;
  margin-bottom:1rem;
  margin-top:1rem;
  overflow:hidden;
  position:relative;
  width:100%
}

:host,stencila-code-block{
  border-color:var(--border)
}

:host>figure,stencila-code-block>figure{
  margin:0;
  padding:0
}

:host stencila-editor,stencila-code-block stencila-editor{
  --border-width:0;
  flex-grow:1
}

.editorContainer{
  background:var(--background-editor);
  border-color:var(--border);
  border-radius:0;
  border-width:0 0 1px;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  height:intrinsic;
  margin:0;
  position:relative
}

.editorContainer pre,.editorContainer pre[class*=language-]{
  background-color:transparent
}

