.cm-editor .cm-gutters {
  @extend .border-end;
  @extend .border-secondary-subtle;
}

.cm-editor .cm-gutter {
  @extend .bg-secondary-subtle;
  @extend .text-secondary-emphasis;
}

.cm-editor .cm-activeLineGutter {
  @extend .bg-secondary;
  @extend .text-white;
  background-color: yellow;
}

.cm-editor .cm-panels {
  @extend .bg-body-secondary;
  @extend .text-body;
}

.cm-editor .cm-selectionBackground {
  @extend .bg-body-secondary;
}

/* Based on https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709/5 */

.cm-editor, .cm-view {

  .cmt-atom      {color: #221199;}
  .cmt-comment   {color: #AA5500;}
  .cmt-keyword   {color: #8959A8;}
  .cmt-literal   {color: #4271AE;}
  .cmt-number    {color: #F5871F;}
  .cmt-operator  {color: #008803;}
  .cmt-separator {color: #990033;}
  .cmt-string    {color: #FF5500;}

  @media (prefers-color-scheme: dark) {

    .cmt-atom      {color: #F78C6C;}
    .cmt-comment   {color: #A0A0A0;}
    .cmt-keyword   {color: #C792EA;}
    .cmt-literal   {color: #FFCB6B;}
    .cmt-number    {color: #FF5370;}
    .cmt-operator  {color: #89DDFF;}
    .cmt-separator {color: #FF7DE9;}
    .cmt-string    {color: #F07178;}
  }
}