/* Styles for the code-sample custom element `docsite/js/code-sample-component.mjs` */
code-sample {
  display: flex;
}
code-sample [ref=editor] {
  border-radius: 3px;
  min-height: 100px;
}
code-sample [ref=editor] .ace_gutter {
  border-radius: 3px 0px 0px 3px;
}
code-sample[readonly] [ref=editor] {
  min-height: initial;
}
code-sample [ref=editor-pane] {
  position: relative;
  width: 40%;
}
code-sample[readonly] [ref=editor-pane] {
  width: 100%;
}
code-sample .editor-controls .link {
  margin-end: 6px;
}
code-sample [ref=divider] {
  width: 2px;
  background-color: darkgray;
  cursor: col-resize;
}
code-sample [ref=preview] {
  flex-grow: 1;
  padding-left: 24px;
  width: 40%;
}
/* Force the Ace editor to ignore the base font reset: https://github.com/ajaxorg/ace/issues/2548#issuecomment-389648058 */
code-sample .ace_editor div,
code-sample .ace_editor span {
  font-size: 12px !important;
}
code-sample#grid-code-sample {
  flex-direction: column;
}
code-sample.full-width [ref=editor-pane],
code-sample.full-width [ref=preview] {
  width: 100%;
}
code-sample#grid-code-sample [ref=preview] {
  padding-left: 0;
  padding-top: 24px;
}