</div>

<style>
  div :global(.CodeMirror) {
    height: var(--code-mirror-height);
    min-height: var(--code-mirror-height);
    font-family: var(--font-mono);
    line-height: 1.3;
    border: var(--spectrum-alias-border-size-thin) solid;
    border-color: var(--spectrum-alias-border-color);
    border-radius: var(--border-radius-s);
    resize: var(--code-mirror-resize);
    overflow: hidden;
  }

  /* Override default active line highlight colour in dark theme */
  div
    :global(
      .CodeMirror-focused.cm-s-tomorrow-night-eighties
        .CodeMirror-activeline-background
    ) {
    background: rgba(255, 255, 255, 0.075);
  }

  /* Remove active line styling when not focused */
  div
    :global(
      .CodeMirror:not(.CodeMirror-focused) .CodeMirror-activeline-background
    ) {
    background: unset;
  }

  /* Add a spectrum themed border when focused */
  div :global(.CodeMirror-focused) {
    border-color: var(--spectrum-alias-border-color-mouse-focus);
  }

  /* Ensure hints are always on top */
  :global(.CodeMirror-hints) {
    z-index: 999999;
  }
</style>