:host,stencila-code-expression{
  /** @prop --background: Background color of the Code Output section */
  --background:var(--color-stock,#fff);
  /** @prop --background-buttons: Background color of the Code Editor section */
  --background-buttons:var(--color-neutral-50,#edf2f7);
  /** @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-expression{
  align-items:stretch;
  border-radius:.25rem;
  border-style:solid;
  border-width:1px;
  display:inline-flex;
  font-size:.875rem;
  line-height:1.25rem;
  line-height:1;
  padding:0;
  vertical-align:text-bottom
}

:host,stencila-code-expression{
  background-color:var(--background);
  border-color:var(--border)
}

:host stencila-tooltip,stencila-code-expression stencila-tooltip{
  align-items:stretch;
  display:inline-flex;
  line-height:1;
  overflow:hidden;
  padding:0;
  vertical-align:bottom
}

:host .actions,stencila-code-expression .actions{
  background-color:var(--background-buttons);
  border-bottom-left-radius:.25rem;
  border-top-left-radius:.25rem;
  display:inline-flex;
  flex:0 1 auto;
  position:relative;
  white-space:nowrap
}

:host .text,stencila-code-expression .text{
  background-color:var(--background-editor);
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a);
  display:inline-block;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  font-size:.75rem;
  line-height:1rem;
  line-height:1;
  min-width:0;
  overflow:hidden;
  padding:.25rem 0;
  transition-duration:.15s;
  transition-property:width;
  transition-timing-function:cubic-bezier(0,0,.2,1);
  white-space:nowrap;
  width:0
}

:host .output,:host ::slotted([slot=output]),:host [slot=output],stencila-code-expression .output,stencila-code-expression ::slotted([slot=output]),stencila-code-expression [slot=output]{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  border-style:none;
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a);
  display:inline-block;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  font-size:.75rem;
  line-height:1rem;
  line-height:1;
  padding:.25rem .5rem .25rem .25rem
}

:host .output,:host ::slotted([slot=output]),:host [slot=output],stencila-code-expression .output,stencila-code-expression ::slotted([slot=output]),stencila-code-expression [slot=output]{
  background-color:var(--background);
  transition:padding .12s ease-out
}

:host .output stencila-icon,:host ::slotted([slot=output]) stencila-icon,:host [slot=output] stencila-icon,stencila-code-expression .output stencila-icon,stencila-code-expression ::slotted([slot=output]) stencila-icon,stencila-code-expression [slot=output] stencila-icon{
  --height:1rem;
  height:1rem
}

:host .output stencila-icon svg,:host ::slotted([slot=output]) stencila-icon svg,:host [slot=output] stencila-icon svg,stencila-code-expression .output stencila-icon svg,stencila-code-expression ::slotted([slot=output]) stencila-icon svg,stencila-code-expression [slot=output] stencila-icon svg{
  stroke:#ba8925;
  stroke:var(--color-warn-600,#ba8925);
  height:1rem
}

:host .slot.hidden,stencila-code-expression .slot.hidden{
  display:none
}

:host .output>*,stencila-code-expression .output>*{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  border-style:none;
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a);
  display:inline-block;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  font-size:.75rem;
  line-height:1rem;
  line-height:1;
  margin:0;
  padding:0;
  white-space:normal
}

:host .divider,stencila-code-expression .divider{
  fill:var(--background-buttons);
  align-self:center;
  display:inline-block;
  max-height:1em;
  width:.5rem
}

:host(.isCodeVisible) .text,stencila-code-expression.isCodeVisible .text{
  display:inline-block;
  min-width:1em;
  padding:.25rem .5rem;
  white-space:pre-line;
  width:auto
}

:host(.isCodeVisible) .divider,stencila-code-expression.isCodeVisible .divider{
  fill:var(--background-editor)
}

:host .actions stencila-button,stencila-code-expression .actions stencila-button{
  align-items:stretch;
  align-self:flex-start;
  cursor:default;
  display:inline-flex;
  flex-shrink:0;
  overflow:hidden;
  transition-duration:.15s;
  transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-property:padding,width,max-width;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-timing-function:cubic-bezier(0,0,.2,1)
}

:host .actions .secondaryAction,stencila-code-expression .actions .secondaryAction{
  cursor:default;
  display:inline-block;
  overflow:hidden;
  transition-duration:.15s;
  transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-timing-function:cubic-bezier(0,0,.2,1);
  width:0
}

:host(.isOutputEmpty) .output,:host(.isOutputEmpty) ::slotted([slot=output]),:host(.isOutputEmpty) [slot=output],:host(.isOutputEmpty) stencila-tooltip,stencila-code-expression.isOutputEmpty .output,stencila-code-expression.isOutputEmpty ::slotted([slot=output]),stencila-code-expression.isOutputEmpty [slot=output],stencila-code-expression.isOutputEmpty stencila-tooltip{
  color:#6e7591;
  color:var(--color-neutral-500,#6e7591)
}

:host(.hover) .actions .secondaryAction,:host(:focus) .actions .secondaryAction,:host(:focus-within) .actions .secondaryAction,:host(:hover) .actions .secondaryAction,stencila-code-expression.hover .actions .secondaryAction,stencila-code-expression:focus-within .actions .secondaryAction,stencila-code-expression:focus .actions .secondaryAction,stencila-code-expression:hover .actions .secondaryAction{
  display:inline-flex;
  max-width:100%;
  width:1.25rem
}

