.ProseMirror {
  /* Typography */
  p {
    @apply richtext-leading-relaxed richtext-mb-1.5 first:richtext-mt-0 last:richtext-mb-0;
  }

  & > p {
    @apply richtext-mb-1.5 first:richtext-mt-0 last:richtext-mb-0;
  }

  h1 {
    @apply richtext-text-3xl;
  }

  h2 {
    @apply richtext-text-2xl;
  }

  h3 {
    @apply richtext-text-xl;
  }

  h4 {
    @apply richtext-text-lg;
  }

  h5 {
    @apply richtext-text-base;
  }

  h6 {
    @apply richtext-text-sm;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply richtext-font-bold first:richtext-mt-0 last:richtext-mb-0;
  }

  h1,
  h2,
  h3 {
    @apply richtext-mt-12;
  }

  h4,
  h5,
  h6 {
    @apply richtext-mt-8;
  }

  a.link {
    @apply richtext-text-blue-500 richtext-font-extrabold dark:richtext-text-blue-400;
  }

  mark {
    @apply richtext-bg-red-500 richtext-rounded-sm richtext-decoration-clone richtext-text-inherit richtext-py-1 richtext-px-0 dark:richtext-bg-red-400;
  }

  & img {
    @apply richtext-h-auto richtext-max-w-full;
  }

  @for $i from 1 through 7 /* max-indent */ {
    $indent-margin-base: 2em;

    *[data-indent='#{$i}'] {
      text-indent: $indent-margin-base * $i !important;
    }
  }
  iframe {
    @apply richtext-border !important;
    @apply richtext-w-full richtext-border-border richtext-mt-2 richtext-rounded-sm richtext-h-[400px];
  }

  [data-type='horizontalRule'] {
    @apply richtext-my-8 richtext-py-4;

    hr {
      @apply richtext-border-0 richtext-border-t richtext-border-black/20 richtext-bg-black/80;
      @apply dark:richtext-border-white/20 dark:richtext-bg-white/80;
    }
  }
  /* Block Quote */
  .blockquote {
    @apply richtext-border-l-4 richtext-text-black richtext-border-l-neutral-700 richtext-py-2 richtext-px-4 richtext-bg-opacity-80 richtext-rounded-lg richtext-rounded-tl-none richtext-rounded-bl-none;
    @apply dark:richtext-border-l-neutral-300 dark:richtext-text-white;
  }

  code {
    @apply richtext-caret-white richtext-text-white richtext-bg-neutral-900 richtext-rounded-sm richtext-shadow-lg richtext-font-mono;

    &::selection {
      @apply richtext-bg-white/30;
    }
  }

  pre {
    @apply richtext-caret-white richtext-bg-neutral-700 richtext-text-white richtext-rounded richtext-my-12 richtext-p-4 !richtext-border richtext-border-black dark:richtext-bg-neutral-900 dark:richtext-border-neutral-800;

    *::selection {
      @apply richtext-bg-white/20;
    }

    code {
      @apply richtext-bg-inherit richtext-text-inherit richtext-p-0 richtext-shadow-none;
    }
  }
  /* List */
  ol {
    @apply richtext-list-decimal;
  }

  ul {
    @apply richtext-list-disc;
  }

  ul,
  ol {
    @apply richtext-py-0 richtext-px-8 richtext-my-6 first:richtext-mt-0 last:richtext-mb-0;

    ul,
    ol,
    li {
      @apply richtext-my-1;
    }

    p {
      @apply richtext-mt-0 richtext-mb-1;
    }
  }

  & > ul,
  & > ol {
    @apply richtext-my-8 first:richtext-mt-0 last:richtext-mb-0;
  }

  ul[data-type='taskList'] {
    @apply richtext-list-none richtext-p-0;

    p {
      @apply richtext-m-0;
    }

    li {
      @apply richtext-flex;

      > label {
        @apply richtext-grow-0 richtext-shrink-0 richtext-flex-auto richtext-inline richtext-mr-2 richtext-select-none;
      }

      > div {
        @apply richtext-flex-auto;
      }

      &[data-checked='true'] {
        @apply richtext-line-through;
      }
    }
  }

  table {
    border: 1px solid;
    @apply richtext-border-collapse richtext-border-black/10 richtext-table-fixed richtext-box-border richtext-overflow-x-auto richtext-overflow-y-hidden richtext-block;
    @apply dark:richtext-border-white/20;

    td,
    th {
    border: 1px solid;
      @apply richtext-border !important;
      @apply richtext-border-black/10 richtext-min-w-[1em] richtext-p-2 richtext-box-border richtext-relative richtext-text-left richtext-align-top;
      @apply dark:richtext-border-white/20;

      &:first-of-type:not(a) {
        @apply richtext-mt-0;
      }

      p {
        @apply richtext-m-0;

        & + p {
          @apply richtext-mt-3;
        }
      }
    }

    th {
      @apply richtext-font-bold richtext-text-left;
    }
  }
}

.ProseMirror {
  .search-result {
    background: #c4eed0;
  }

  .search-result-current {
    background: #6cd58b;
  }
}

