// there's a weird bug that removes `#rendered-md` from the DOM when the caret
// is at the start of the editor and the user presses backspace (in that case a
// paragraph is the first direct element).
body#tinymce,
#joplin-container-content {
  background: var(--g-primary-Background);
  font-size: 1.4rem;
  font-family: var(--s-font-family-system);
  line-height: 1.6;
  padding: 2.8rem;
  color: var(--g-textColor);
  -webkit-font-smoothing: antialiased;
  margin-left: var(--u-editor-margin-left, auto);
  margin-right: var(--u-editor-margin-right, auto);

  a {
    color: var(--g-linkColor);
    cursor: pointer;
  }

  > * {
    margin: 0 0 1.4rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: var(--g-headerTextColor);
    padding: 0;
    line-height: 1.25;
    margin: 0 !important;
    padding: calc(var(--u-editor-paragraph-spacing, 1.5rem) / 2) 0 !important;
  }

  h1 {
    font-size: 2.4rem;
    border-bottom: none;
    margin-bottom: 0;
    line-height: 1;
  }

  strong {
    color: var(--g-textColor);
  }

  img {
    margin-top: 1.4rem;
  }

  ul,
  ol {
    margin-left: 1.8rem;
    margin-bottom: var(--u-editor-paragraph-spacing, 1.5rem);
    li {
      margin-bottom: 0.35rem;
    }

    p {
      margin-bottom: 0;
    }
  }

  p {
    margin-bottom: var(--u-editor-paragraph-spacing, 1.5rem);
  }

  table {
    background: var(--g-alternatingContentBackgroundColorsEven);

    th {
      background: var(--g-alternatingContentBackgroundColorsOdd);
      border-bottom-width: 0.1rem;
    }

    tr:nth-child(even) {
      background: var(--g-alternatingContentBackgroundColorsOdd);
    }
    tr:nth-child(odd) {
      background: var(--g-alternatingContentBackgroundColorsEven);
    }

    th,
    td {
      font-family: var(--g-global-font-family-system);
      border-color: var(--g-gridColor);
      color: var(--g-textColor);
    }
  }

  // code
  pre:not(.mermaid),
  .inline-code {
    background-color: var(--g-alternatingContentBackgroundColorsOdd);
    color: var(--g-textColor);
    border-radius: 0.4rem;
    font-family: var(--g-font-family-mono);
    font-size: 1.4rem;

    @media (prefers-color-scheme: dark) {
      background-color: rgba(var(--g-shadowColor--rgb), 0.2);
    }

    * {
      font-family: inherit !important;
    }
  }

  pre.mermaid {
    background: none;
  }

  ul.joplin-checklist {
    margin-left: 2.2rem;

    li:not(.checked) {
      @include checkbox();

      &:before {
        top: 0.3rem;
      }
    }

    li.checked {
      @include checkboxChecked();
      opacity: 1;

      &:before {
        font-weight: 600;
        top: 0.3rem;
      }
    }
  }

  // checkboxes have different classnames when editor is split
  li.joplin-checkbox {
    margin-left: 0.6rem;

    input {
      display: none;
    }

    .checkbox-wrapper {
      position: relative;
    }

    .checkbox-label {
      &-unchecked {
        @include checkbox();
      }

      &-checked {
        opacity: 1;
        position: relative;

        @include checkboxChecked();
      }
    }
  }

  [data-mce-selected="inline-boundary"] {
    &.inline-code {
      background-color: rgb(243, 243, 243);
    }
  }

  .mermaid {
    div {
      color: var(--g-textColorDark);
    }
  }
}
