.cm-editor {
  font-size: 18px;
  padding: 0 20px;
  --max-width: 800px;

  .cm-content {
    margin: auto;
    max-width: var(--max-width);
  }

  .sb-inline-img {
    max-width: calc(var(--max-width) * 0.9);
  }

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

  // Weird hack to readjust iOS's safari font-size when contenteditable is disabled
  .ios-safari-readonly {
    font-size: 60%;
  }

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

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

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

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

    .cm-list-bullet::after {
      left: ($baseIndent + 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(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;
  }

	.cm-list-bullet::after {
		visibility: visible;
		position: absolute;
		// left: 2ch;
    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-directive-start::before {
		content: "#";
    color: gray;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 62%;
    padding: 2px;
    position: relative;
    left: -20px;
	}

  // .sb-directive-end {
  //   border-top: 1px dotted #6c6c6c;
  // }

  .sb-directive-outside {
    opacity: 0.4;
  }

  .sb-blockquote-outside > .sb-meta {
    display: none;
  }

  .sb-blockquote-outside {
    text-indent: -1ch;
    border-left: 1px solid rgb(74, 74, 74);
    min-height: 1em;
  }
  
  .sb-directive-end::before {
		content: "/";
    border-radius: 5px;
    color: gray;
    border: 1px solid gray;
    font-size: 62%;
    padding: 2px;
    position: relative;
    left: -20px;
	}
}