.cm-focused {
  outline: none !important;
}

#sb-main .cm-editor {
  font-size: 18px;
  --max-width: 800px;
  height: 100%;

  .cm-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    padding: 5px 20px;
  }

  .cm-line {
    padding: 0;
  }

  .sb-inline-img {
    max-width: 100%;
  }


  // Indentation of follow-up lines
  @mixin lineOverflow($baseIndent, $bulletIndent: 0) {
    text-indent: -1 * ($baseIndent + 2ch);
    padding-left: $baseIndent + 2ch;

    &.sb-line-task {
      text-indent: -1 * ($baseIndent + 5ch);
      padding-left: $baseIndent + 5ch;

      .cm-list-bullet::after {
        left: ($baseIndent + 5ch);
      }
    }

    &.sb-line-blockquote {
      text-indent: -1 * ($baseIndent + 4ch);
      padding-left: $baseIndent + 4ch;
    }

    .cm-list-bullet::after {
      left: ($baseIndent + $bulletIndent + 2ch);
    }
  }

  .sb-line-ul {
    &.sb-line-li-1 {
      @include lineOverflow(0);
    }

    &.sb-line-li-1.sb-line-li-2 {
      @include lineOverflow(2);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
      @include lineOverflow(4);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
      @include lineOverflow(6);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
      @include lineOverflow(8);
    }
  }

  .sb-line-ol {
    &.sb-line-li-1 {
      @include lineOverflow(1);
    }

    &.sb-line-li-1.sb-line-li-2 {
      @include lineOverflow(4);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
      @include lineOverflow(7);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
      @include lineOverflow(10);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
      @include lineOverflow(13);
    }
  }

  .sb-line-ol.sb-line-ul {
    // &.sb-line-li-1 {
    //   @include lineOverflow(1);
    // }

    &.sb-line-li-1.sb-line-li-2 {
      @include lineOverflow(3);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
      @include lineOverflow(6);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
      @include lineOverflow(9);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
      @include lineOverflow(12);
    }
  }

  .sb-line-blockquote {
    &.sb-line-li-1 {
      @include lineOverflow(-1, 2);
    }

    &.sb-line-li-1.sb-line-li-2 {
      @include lineOverflow(1, 2);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
      @include lineOverflow(4);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
      @include lineOverflow(6);
    }

    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
      @include lineOverflow(8);
    }
  }

  .sb-line-comment {
    text-indent: -1 * 3ch;
    padding-left: 3ch;
  }

  .cm-list-bullet {
    position: relative;
    visibility: hidden;
  }

  .cm-task-checked {
    text-decoration: line-through !important;
  }

  .sb-checkbox>input[type=checkbox] {
    width: 3ch;
  }

  .cm-list-bullet::after {
    visibility: visible;
    position: absolute;
    color: rgb(150, 150, 150);
    content: "\2022";
    /* U+2022 BULLET */
  }

  .sb-directive-start .sb-comment,
  .sb-directive-end .sb-comment {
    position: relative;
    left: -12px;
  }

  .sb-line-frontmatter-outside,
  .sb-line-code-outside {
    .sb-meta {
      color: transparent;
    }

    color: transparent;
  }

  .sb-blockquote-outside {
    text-indent: -1ch;
    min-height: 1em;
  }

  .sb-line-table-outside {
    display: none;
  }

  .sb-table-widget {
    display: block;
    font-weight: normal;
    margin-bottom: -3rem;

    table {
      width: 100%;
      border-spacing: 0;
    }

    thead tr {
      background-color: #333;
      color: #eee;
      font-weight: bold;
    }

    th,
    td {
      padding: 8px;
    }

    tbody tr:nth-of-type(even) {
      background-color: #f3f3f3;
    }
  }

  .sb-line-blockquote {
    border-left: 1px solid rgb(74, 74, 74);
  }

  .sb-line-blockquote.sb-line-ul.sb-line-li>.sb-quote.sb-meta:first-child {
    margin-left: -1ch;
  }


  .cm-scroller {
    // Give some breathing space at the bottom of the screen
    padding-bottom: 20em;
  }

}

div:not(.cm-focused).cm-fat-cursor {
  outline: none !important;
}