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

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

:host .actionsSecondary,stencila-code-fragment .actionsSecondary{
  background-color:var(--background-buttons);
  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(.hover) .actionsSecondary,:host(:focus) .actionsSecondary,:host(:focus-within) .actionsSecondary,:host(:hover) .actionsSecondary,stencila-code-fragment.hover .actionsSecondary,stencila-code-fragment:focus-within .actionsSecondary,stencila-code-fragment:focus .actionsSecondary,stencila-code-fragment:hover .actionsSecondary{
  display:inline-flex;
  max-width:100%;
  width:1.25rem
}

:host .text,stencila-code-fragment .text{
  background-color:var(--background-editor);
  padding:.25rem
}

