.ProseMirror {
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  margin: auto;

  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -o-user-select: text;

  h1,
  h2,
  h3,
  p,
  br,
  ul,
  ol,
  pre,
  blockquote {
    margin-bottom: 1.25rem;

    &:only-child {
      margin-bottom: 0;
    }
  }

  h1,
  h2,
  h3 {
    margin-top: 2.5rem;
    font-weight: 700;
  }

  ul, ol {
    padding-left: 2em;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  li + li {
    margin-top: .8em;
  }

  a {
    text-decoration: underline;
    color: #146493;
  }

  code {
    display: inline-block;
    padding: .125em;
    border-radius: .25em;
    background-color: #2C2B35;
    font-size: 0.9em;
    color: #FFFFFF;
  }

  blockquote,
  pre > code {
    padding: 17px 16px;
    border-radius: 12px;
  }

  blockquote {
    background-color: #F8F8FB;
    border: none;
  }

  pre > code {
    display: block;
    font-size: 1em;
  }

  table {
    width: 100%;
    max-width: 100%;
    margin: 48px 0;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 4px;
    border-style: hidden;
    box-shadow: 0 0 0 1px #DEE2EE;
    position: relative;

    &.striped:not(.deletion) tr:nth-of-type(2n) td {
      background: #F4F5F7;
    }

    &.deletion {
      box-shadow: 0 0 0 1px #D64141;
      tr{
        background: #FFE0E0;
        td {
          border: 1px solid #D64141;
          border-top: none;
        }
      }
    }

    p {
      margin: 0;
      font-size: 14px;
      line-height: 17px;
      font-weight: 400;
    }

    tr {
      &:hover td {
        background: #F4F5F7;
      }
      td {
        border: solid 1px #DEE2EE;
        padding: 8px;
        position: relative;

        &.selectedCell {
          background: #def;
        }
      }
    }

    tbody tr td {
      border-top: none;
      border-right: none;
    }

    .column-resize-handle {
      position: absolute;
      top: 0;
      right: 0;
      width: 15px;
      height: 100%;
      cursor: ew-resize;

      &::after {
        position: absolute;
        top: 0;
        right: -1px;
        display: block;
        content: ' ';
        width: 2px;
        height: 100%;
        background: #ccca;
      }
    }
  }

  ul[data-type="todo_list"] {
    padding-left: 0;

    li {
      display: flex;
      flex-flow: row;

      > .todo-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        width: 20px;
        margin-right: 1em;
        border: 1px solid #AAB1C5;
        cursor: pointer;
        border-radius: 6px;
        background-color: transparent;
        transition: 300ms ease;

        user-select: none;
        -webkit-user-select: none;

        &::before {
          content: '';
          display: block;
          width: 6px;
          height: 12px;
          border: solid 2px #2C2B35;
          border-top: none;
          border-left: none;
          transform: rotate(45deg) translate(-30%, -12%);
          opacity: 0;

          transition: 300ms ease;
        }
      }
    }

    li[data-done="true"] {
      > .todo-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #8CD5FF;
        background-color: #8CD5FF;

        &::before {
          opacity: 1;
        }
      }
    }
  }
}

.ProseMirror-yjs-cursor {
  position: absolute;
  height: 1em;
  word-break: normal;
  pointer-events: none;
  opacity: 0.8;
  margin-left: -6px;

  &:first-child {
    margin-top: 16px;
  }

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    top: -5px;
    left: 6px;
    width: 8px;
    height: 8px;
    background: #333;
    transform: rotate(45deg);
  }

  > div {
    position: relative;
    top: -24px;
    font-size: 13px;
    border-radius: 2px;
    line-height: normal;
    user-select: none;
    color: white;
    padding: 4px;
  }
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #F8F8FB;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: #8be9fd;
}

.hljs-function .hljs-keyword {
  color: #ff79c6;
}

.hljs,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #de3f79;
}

.hljs-string {
  color: #edd70b;
}
.hljs-attr {
  color: #93d128;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #6272a4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}
