:root {
  --code-comment-color: light-dark(#616972, #99a0a6);
  --code-constant-color: light-dark(#005cc5, #79b8ff);
  --code-danger-color: light-dark(#b31d28, #fdaeb7);
  --code-entity-color: light-dark(#6f42c1, #b392f0);
  --code-keyword-color: light-dark(#bf3441, #f97583);
  --code-string-color: light-dark(#032f62, #9ecbff);
  --code-warning-color: light-dark(#ae4b07, #ffab70);
}

.cm-editor {
  border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
  box-shadow: var(--ec-frm-frameBoxShdCssVal);
  border: var(--ec-brdWd) solid var(--ec-brdCol);
  background: var(--ec-frm-edBg);
  color: var(--ec-codeFg);
  font-family: var(--ec-codeFontFml);
  font-size: var(--ec-codeFontSize);
  font-weight: var(--ec-codeFontWg);
  line-height: var(--ec-codeLineHt);
  text-size-adjust: none;

  &.cm-focused {
    outline: 3px solid var(--ec-focusBrd);
    outline-offset: -3px;
  }

  .cm-scroller {
    font-family: inherit;
    line-height: inherit;
  }

  .cm-content {
    padding: var(--ec-codePadBlk) 0;
    caret-color: var(--ec-codeFg);
  }

  .cm-line {
    padding: 0 var(--ec-codePadInl);
  }

  & ::selection {
    background-color: var(--ec-codeSelBg);
  }

  .cm-scroller::-webkit-scrollbar,
  .cm-scroller::-webkit-scrollbar-track {
    background-color: inherit;
    border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .cm-scroller::-webkit-scrollbar-thumb {
    background-color: var(--ec-sbThumbCol);
    background-clip: content-box;
    border: 4px solid transparent;
    border-radius: 10px;
  }

  .cm-scroller::-webkit-scrollbar-thumb:hover {
    background-color: var(--ec-sbThumbHoverCol);
  }

  &.cm-focused .cm-matchingBracket {
    background-color: var(--ec-tm-markBg);
  }

  &.cm-focused .cm-nonmatchingBracket {
    background-color: var(--ec-tm-delBg);
  }

  .cm-tooltip {
    color: var(--ec-codeFg);
    background-color: var(--ec-codeBg);
    border: var(--ec-brdWd) solid var(--ec-brdCol);
    border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
    box-shadow: var(--ec-frm-frameBoxShdCssVal);
  }

  .cm-tooltip.cm-tooltip-autocomplete > ul {
    font-family: inherit;
  }

  .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
    color: var(--ec-uiSelFg);
    background-color: var(--ec-uiSelBg);
  }

  .tok-comment {
    color: var(--code-comment-color);
  }

  .tok-atom,
  .tok-bool,
  .tok-literal,
  .tok-number {
    color: var(--code-constant-color);
  }

  .tok-className,
  .tok-labelName,
  .tok-macroName,
  .tok-namespace,
  .tok-typeName {
    color: var(--code-entity-color);
  }

  .tok-keyword,
  .tok-operator {
    color: var(--code-keyword-color);
  }

  .tok-string,
  .tok-string2 {
    color: var(--code-string-color);
  }

  .tok-invalid,
  .cm-specialChar {
    color: var(--code-danger-color);
  }
}

runnable-code > pre[data-language="plaintext"] {
  padding: var(--ec-codePadBlk) var(--ec-codePadInl);
  overflow-x: auto;
  color: var(--ec-codeFg);
  font-family: var(--ec-codeFontFml);
  font-size: var(--ec-codeFontSize);
  font-weight: var(--ec-codeFontWg);
  line-height: var(--ec-codeLineHt);
  background: var(--ec-frm-edBg);
  border: var(--ec-brdWd) solid var(--ec-brdCol);
  border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
  box-shadow: var(--ec-frm-frameBoxShdCssVal);

  code {
    background: none;
  }

  .warn {
    color: var(--code-warning-color);
  }

  .error {
    color: var(--code-danger-color);
  }
}