.CodeMirror {
  border-top: none;
  border-right: 1px solid $lbry-gray-1;
  border-bottom: 1px solid $lbry-gray-1;
  border-left: 1px solid $lbry-gray-1;
  border-radius: 0;
  background: $lbry-white;
  color: $lbry-black;

  .CodeMirror-cursor {
    border-color: $lbry-teal-3;
  }

  .CodeMirror-placeholder {
    opacity: 0.5;
  }

  .CodeMirror-selected {
    background-color: transparent;
  }

  .CodeMirror-selectedtext {
    background-color: $lbry-teal-5;
    color: $lbry-white;
  }

  .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
    background: none;
    text-decoration: underline;
    text-decoration-color: $lbry-red-3;
    text-decoration-style: dotted;
  }
}

// Fix selection
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background-color: $lbry-teal-1;
}

.editor-toolbar {
  background-color: $lbry-gray-1;
  border: none;
  border-radius: 0;
  opacity: 1; // ?

  &:hover {
    opacity: 1; // ?
  }

  &.disabled-for-preview a:not(.no-disable) {
    background-color: $lbry-gray-1;
    border-color: transparent;
    opacity: 0.3;
  }

  &.fullscreen {
    background-color: $lbry-gray-1;

    &::before,
    &::after {
      display: none;
    }
  }

  a {
    color: $lbry-black !important;
    transition: opacity 0.3s ease;

    &:not(.active),
    &:not(:hover) {
      opacity: 0.6;
    }

    &.active,
    &:hover {
      border-color: transparent;
      opacity: 1;
    }
  }

  i.separator {
    border: none;
  }
}

.editor-preview {
  background-color: rgba($lbry-gray-1, 0.5);
  border: none;
  font-size: calc(var(--font-size-subtext-multiple) * 1em);
}

.editor-statusbar {
  color: rgba($lbry-black, 0.5);
}