.spinner-animation {
  animation: spinner 1.6s linear infinite;
  animation-delay: -1.6s;
}

.spinner-animation-secondary {
  animation-delay: -1s;
}

@keyframes spinner {
  12.5 % {
    x: 13px;
    y: 1px;
  }

  25% {
    x: 13px;
    y: 1px;
  }

  37.5% {
    x: 13px;
    y: 13px;
  }

  50% {
    x: 13px;
    y: 13px;
  }

  62.5% {
    x: 1px;
    y: 13px;
  }

  75% {
    x: 1px;
    y: 13px;
  }

  87.5% {
    x: 1px;
    y: 1px;
  }
}

.ProseMirror:not([data-disableblockstyles]) {
  /* Image Block */
  figure[data-type='imageBlock'] {
    margin: 0px;
  }
  figure[data-type='imageBlock'] {
    img {
      display: block;
    }
    img {
      width: 100%;
    }
    img {
      border-radius: 0.25rem;
    }
  }
  /* Block Quote */
  figure[data-type='blockquoteFigure'] {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
  figure[data-type='blockquoteFigure'] {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
  }
  & > blockquote,
  [data-type='blockquoteFigure'] {
    blockquote {
      margin: 0px;
    }
    blockquote {
      & > *:first-child {
        margin-top: 0px;
      }
      & > *:last-child {
        margin-bottom: 0px;
      }
    }
  }
  /* Columns */
  [data-type='columns'] {
    margin-top: 3.5rem;
  }
  [data-type='columns'] {
    margin-bottom: 3rem;
  }
  [data-type='columns'] {
    display: grid;
  }
  [data-type='columns'] {
    gap: 1rem;
  }
  [data-type='columns'] {
    &.layout-sidebar-left {
      grid-template-columns: 40fr 60fr;
    }
    &.layout-sidebar-right {
      grid-template-columns: 60fr 40fr;
    }
    &.layout-two-column {
      grid-template-columns: 1fr 1fr;
    }
  }
  [data-type='column'] {
    overflow: auto;
  }
}

.ProseMirror {
  code {
    border-radius: 0.125rem;
  }
  code {
    --tw-bg-opacity: 1;
    background-color: rgb(18 24 26 / var(--tw-bg-opacity));
  }
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  code {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  code {
    caret-color: #fff;
  }
  code {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  code {
    &::-moz-selection {
      background-color: rgb(255 255 255 / 0.3);
    }
    &::selection {
      background-color: rgb(255 255 255 / 0.3);
    }
  }
  pre {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  pre {
    border-radius: 0.25rem;
  }
  pre {
    border-width: 1px;
  }
  pre {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
  }
  pre {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 90 / var(--tw-bg-opacity));
  }
  pre {
    padding: 1rem;
  }
  pre {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  pre {
    caret-color: #fff;
  }
  pre {
    *::-moz-selection {
      background-color: rgb(255 255 255 / 0.2);
    }
    *::selection {
      background-color: rgb(255 255 255 / 0.2);
    }
    code {
      background-image: none;
    }
    code {
      padding: 0px;
    }
    code {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .hljs-comment,
    .hljs-quote {
      --tw-text-opacity: 1;
      color: rgb(155 163 167 / var(--tw-text-opacity));
    }
    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-name,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      --tw-text-opacity: 1;
      color: rgb(252 165 165 / var(--tw-text-opacity));
    }
    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      --tw-text-opacity: 1;
      color: rgb(253 186 116 / var(--tw-text-opacity));
    }
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      --tw-text-opacity: 1;
      color: rgb(190 242 100 / var(--tw-text-opacity));
    }
    .hljs-title,
    .hljs-section {
      --tw-text-opacity: 1;
      color: rgb(253 224 71 / var(--tw-text-opacity));
    }
    .hljs-keyword,
    .hljs-selector-tag {
      --tw-text-opacity: 1;
      color: rgb(94 234 212 / var(--tw-text-opacity));
    }
    .hljs-emphasis {
      font-style: italic;
    }
    .hljs-strong {
      font-weight: 700;
    }
  }
  .collaboration-cursor {
    &__caret {
      pointer-events: none;
    }
    &__caret {
      position: relative;
    }
    &__caret {
      margin-left: -1px;
    }
    &__caret {
      margin-right: -1px;
    }
    &__caret {
      overflow-wrap: normal;
      word-break: normal;
    }
    &__caret {
      border-right-width: 1px;
    }
    &__caret {
      border-left-width: 1px;
    }
    &__caret {
      --tw-border-opacity: 1;
      border-color: rgb(0 0 0 / var(--tw-border-opacity));
    }
    &__label {
      position: absolute;
    }
    &__label {
      left: -1px;
    }
    &__label {
      top: -1.4em;
    }
    &__label {
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
    &__label {
      white-space: nowrap;
    }
    &__label {
      border-radius: 0.25rem;
    }
    &__label {
      border-top-left-radius: 0px;
    }
    &__label {
      padding-top: 0.125rem;
      padding-bottom: 0.125rem;
    }
    &__label {
      padding-left: 0.375rem;
      padding-right: 0.375rem;
    }
    &__label {
      font-size: 0.75rem;
      line-height: 1rem;
    }
    &__label {
      font-weight: 600;
    }
    &__label {
      line-height: 1;
    }
    &__label {
      --tw-text-opacity: 1;
      color: rgb(0 0 0 / var(--tw-text-opacity));
    }
  }
  ol {
    list-style-type: decimal;
  }
  ul {
    list-style-type: disc;
  }
  ul,
  ol {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  ul,
  ol {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  ul,
  ol {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  ul:first-child,
  ol:first-child {
    margin-top: 0px;
  }
  ul:last-child,
  ol:last-child {
    margin-bottom: 0px;
  }
  ul,
  ol {
    ul,
    ol,
    li {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }
    p {
      margin-top: 0px;
    }
    p {
      margin-bottom: 0.25rem;
    }
  }
  & > ul,
  & > ol {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  & > ul:first-child,
  & > ol:first-child {
    margin-top: 0px;
  }
  & > ul:last-child,
  & > ol:last-child {
    margin-bottom: 0px;
  }
  ul[data-type='taskList'] {
    list-style-type: none;
  }
  ul[data-type='taskList'] {
    padding: 0px;
  }
  ul[data-type='taskList'] {
    p {
      margin: 0px;
    }
    li {
      display: flex;
    }
    li {
      > label {
        margin-top: 0.25rem;
      }
      > label {
        margin-right: 0.5rem;
      }
      > label {
        flex: 1 1 auto;
      }
      > label {
        flex-shrink: 0;
      }
      > label {
        flex-grow: 0;
      }
      > label {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
      > div {
        flex: 1 1 auto;
      }
      &[data-checked='true'] {
        text-decoration-line: line-through;
      }
    }
  }
}

/* @import './partials/placeholder.css'; */

.ProseMirror {
  .tableWrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  table {
    box-sizing: border-box;
  }
  table {
    width: 100%;
  }
  table {
    border-collapse: collapse;
  }
  table {
    border-radius: 0.25rem;
  }
  table {
    border-color: rgb(0 0 0 / 0.05);
  }
  table {
    @supports (height: 1lh) {
      p:empty {
        height: 1lh;
      }
    }
    @supports not (height: 1lh) {
      p:empty::after {
        content: '\00A0';
      }
    }
    td,
    th {
      position: relative;
    }
    td,
    th {
      min-width: 100px;
    }
    td,
    th {
      border-width: 1px;
    }
    td,
    th {
      border-color: rgb(0 0 0 / 0.05);
    }
    td,
    th {
      padding: 0.5rem;
    }
    td,
    th {
      text-align: left;
    }
    td,
    th {
      vertical-align: top;
    }
    td,
    th {
      &:first-of-type:not(a) {
        margin-top: 0px;
      }
      p {
        margin: 0px;
      }
      p {
        & + p {
          margin-top: 0.75rem;
        }
      }
    }
    th {
      font-weight: 700;
    }
    .column-resize-handle {
      pointer-events: none;
    }
    .column-resize-handle {
      position: absolute;
    }
    .column-resize-handle {
      bottom: -2px;
    }
    .column-resize-handle {
      right: -0.25rem;
    }
    .column-resize-handle {
      top: 0px;
    }
    .column-resize-handle {
      display: flex;
    }
    .column-resize-handle {
      width: 0.5rem;
    }
    .column-resize-handle {
      &::before {
        margin-left: 0.5rem;
      }
      &::before {
        height: 100%;
      }
      &::before {
        width: 1px;
      }
      &::before {
        background-color: rgb(0 0 0 / 0.2);
      }
      &::before {
        content: '';
      }
    }
    .selectedCell {
      border-style: double;
    }
    .selectedCell {
      border-color: rgb(0 0 0 / 0.2);
    }
    .selectedCell {
      background-color: rgb(0 0 0 / 0.05);
    }
    .grip-column,
    .grip-row {
      position: absolute;
    }
    .grip-column,
    .grip-row {
      z-index: 10;
    }
    .grip-column,
    .grip-row {
      display: flex;
    }
    .grip-column,
    .grip-row {
      cursor: pointer;
    }
    .grip-column,
    .grip-row {
      align-items: center;
    }
    .grip-column,
    .grip-row {
      justify-content: center;
    }
    .grip-column,
    .grip-row {
      background-color: rgb(0 0 0 / 0.05);
    }
    .grip-column {
      left: 0px;
    }
    .grip-column {
      top: -0.75rem;
    }
    .grip-column {
      margin-left: -1px;
    }
    .grip-column {
      height: 0.75rem;
    }
    .grip-column {
      width: calc(100% + 1px);
    }
    .grip-column {
      border-left-width: 1px;
    }
    .grip-column {
      border-color: rgb(0 0 0 / 0.2);
    }
    .grip-column {
      &:hover,
      &.selected {
        &::before {
          content: '';
        }
        &::before {
          width: 0.625rem;
        }
      }
      &:hover {
        background-color: rgb(0 0 0 / 0.1);
      }
      &:hover {
        &::before {
          border-bottom-width: 2px;
        }
        &::before {
          border-style: dotted;
        }
        &::before {
          border-color: rgb(0 0 0 / 0.6);
        }
      }
      &.first {
        border-top-left-radius: 0.125rem;
      }
      &.first {
        border-color: transparent;
      }
      &.last {
        border-top-right-radius: 0.125rem;
      }
      &.selected {
        border-color: rgb(0 0 0 / 0.3);
      }
      &.selected {
        background-color: rgb(0 0 0 / 0.3);
      }
      &.selected {
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      &.selected {
        &::before {
          border-bottom-width: 2px;
        }
        &::before {
          border-style: dotted;
        }
      }
    }
    .grip-row {
      left: -0.75rem;
    }
    .grip-row {
      top: 0px;
    }
    .grip-row {
      margin-top: -1px;
    }
    .grip-row {
      height: calc(100% + 1px);
    }
    .grip-row {
      width: 0.75rem;
    }
    .grip-row {
      border-top-width: 1px;
    }
    .grip-row {
      border-color: rgb(0 0 0 / 0.2);
    }
    .grip-row {
      &:hover,
      &.selected {
        &::before {
          height: 0.625rem;
        }
        &::before {
          content: '';
        }
      }
      &:hover {
        background-color: rgb(0 0 0 / 0.1);
      }
      &:hover {
        &::before {
          border-left-width: 2px;
        }
        &::before {
          border-style: dotted;
        }
        &::before {
          border-color: rgb(0 0 0 / 0.6);
        }
      }
      &.first {
        border-top-left-radius: 0.125rem;
      }
      &.first {
        border-color: transparent;
      }
      &.last {
        border-bottom-left-radius: 0.125rem;
      }
      &.selected {
        border-color: rgb(0 0 0 / 0.3);
      }
      &.selected {
        background-color: rgb(0 0 0 / 0.3);
      }
      &.selected {
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      &.selected {
        &::before {
          border-left-width: 2px;
        }
        &::before {
          border-style: dotted;
        }
      }
    }
  }
}

.ProseMirror:not([data-disabletypographystyles]) {
  p {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  p {
    line-height: 1.625;
  }
  p:first-child {
    margin-top: 0px;
  }
  p:last-child {
    margin-bottom: 0px;
  }
  & > p {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  & > p:first-child {
    margin-top: 0px;
  }
  & > p:last-child {
    margin-bottom: 0px;
  }
  h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  h5 {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  h6 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
  }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0px;
  }
  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child {
    margin-bottom: 0px;
  }
  h1,
  h2,
  h3 {
    margin-top: 3rem;
  }
  h4,
  h5,
  h6 {
    margin-top: 2rem;
  }
  a.link {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
  }
  mark {
    border-radius: 0.125rem;
  }
  mark {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  }
  mark {
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
  mark {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  mark {
    padding-left: 0px;
    padding-right: 0px;
  }
  mark {
    color: inherit;
  }
  & img {
    height: auto;
  }
  & img {
    width: 100%;
  }
  & img {
    max-width: 100%;
  }
}

.ProseMirror {
  > * + * {
    margin-top: 0.75em;
  }
  .Tiptap-mathematics-editor {
    background: #202020;
    color: #fff;
    font-family: monospace;
    padding: 0.2rem 0.5rem;
  }
  .Tiptap-mathematics-render {
    padding: 0 0.25rem;
    &--editable {
      cursor: pointer;
      transition: background 0.2s;
      &:hover {
        background: #eee;
      }
    }
  }
  .Tiptap-mathematics-editor,
  .Tiptap-mathematics-render {
    border-radius: 0.25rem;
    display: inline-block;
  }
  [data-type='horizontalRule'] {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  [data-type='horizontalRule'] {
    cursor: pointer;
  }
  [data-type='horizontalRule'] {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  [data-type='horizontalRule'] {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  [data-type='horizontalRule'] {
    transition-duration: 100ms;
  }
  [data-type='horizontalRule'] {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-type='horizontalRule'] {
    animation-duration: 100ms;
  }
  [data-type='horizontalRule'] {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-type='horizontalRule'] {
    &.ProseMirror-selectednode {
      background-color: rgb(0 0 0 / 0.05);
    }
    &.ProseMirror-selectednode {
      hr {
        border-top-color: rgb(0 0 0 / 0.3);
      }
    }
    &:hover:not(&.ProseMirror-selectednode) {
      background-color: rgb(0 0 0 / 0.05);
    }
    hr {
      border-width: 0px;
    }
    hr {
      border-top-width: 1px;
    }
    hr {
      border-color: rgb(0 0 0 / 0.2);
    }
    hr {
      background-color: rgb(0 0 0 / 0.8);
    }
  }
}

/* Commented the base, components and utilities because we already have them in our global css */

/* 
@tailwind base;
@tailwind components;
@tailwind utilities; 
*/

.ProseMirror:not([data-disablecustomstyles]) {
  z-index: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: 2rem;
  padding-left: 5rem;
  caret-color: #000;
  outline-width: 0px;
}

@media (min-width: 1024px) {
  .ProseMirror:not([data-disablecustomstyles]) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.ProseMirror:not([data-disablecustomstyles]) {
  & > * {
    margin-left: auto;
    margin-right: auto;
  }
  & > * {
    max-width: 42rem;
  }
  .selection {
    display: inline;
  }
  *::-moz-selection {
    background-color: rgb(0 0 0 / 0.1);
  }
  .selection,
  *::selection {
    background-color: rgb(0 0 0 / 0.1);
  }
  & > .react-renderer {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  & > .react-renderer:first-child {
    margin-top: 0px;
  }
  & > .react-renderer:last-child {
    margin-bottom: 0px;
  }
  &.resize-cursor {
    cursor: col-resize;
  }
  .ProseMirror-gapcursor {
    position: relative;
  }
  .ProseMirror-gapcursor {
    margin-left: auto;
    margin-right: auto;
  }
  .ProseMirror-gapcursor {
    width: 100%;
  }
  .ProseMirror-gapcursor {
    max-width: 42rem;
  }
  .ProseMirror-gapcursor {
    &:after {
      top: -1.5em;
    }
    &:after {
      left: 0px;
    }
    &:after {
      right: 0px;
    }
    &:after {
      margin-left: auto;
      margin-right: auto;
    }
    &:after {
      width: 100%;
    }
    &:after {
      max-width: 42rem;
    }
    &:after {
      border-top-color: rgb(0 0 0 / 0.4);
    }
  }
}

[data-theme='slash-command'] {
  width: 1000vw;
}

/* Basic editor styles */

.tiptap {
  > * + * {
    margin-top: 0.75em;
  }
}

/* Placeholder (at the top) */

.tiptap .is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Placeholder (on every new line) */

.tiptap p.is-empty::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}