@tailwind utilities;

.tiptap-wrapper.tiptap-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  height: 100%;

  .tiptap-content {
    flex: 1 1 0%;
    overflow-y: scroll;
    max-height: 100% !important;

    .ProseMirror {
      max-width: theme("screens.lg");
      margin-inline: auto;
    }
  }
}

.tiptap-editor .tiptap-toolbar input[type="color"] {
  -webkit-appearance: none;
  border: 0px solid theme("colors.gray.300");
}

.tiptap-editor .tiptap-toolbar input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.tiptap-editor .tiptap-content {
  display: flex;
  flex-direction: column;
}

.tiptap-editor .ProseMirror {
  padding: 1rem;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  flex: 1 1 0%;
  height: 100%;

  &.ProseMirror-focused {
    outline: none;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  > * + * {
    margin-block-start: 1rem;
  }

  > * + h1,
  > * + h2,
  > * + h3,
  > * + h4,
  > * + h5,
  > * + h6 {
    margin-block-start: 2rem;
  }

  img {
    display: inline-block;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
  }

  h1 {
    font-size: 1.75rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.1;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  h4 {
    font-size: 1.125rem;
  }

  .lead {
    font-size: 1.375rem;
    line-height: 1.3;
  }

  small {
    font-size: 0.75rem;
  }

  ul,
  ol {
    padding-inline-start: 1rem;
    margin-inline-start: 1rem;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  ul.checked-list {
    list-style-type: none;
    margin-inline-start: 0;
  }

  ul.checked-list li {
    display: flex;
    align-items: baseline;
    gap: 0.375em;
  }

  ul.checked-list li::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>');
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  blockquote {
    border-left: 0.5rem solid theme("colors.gray.300");
    padding-inline-start: 0.5rem;
    margin-inline-start: 1rem;
  }

  hr {
    border-color: theme("colors.gray.300");
  }

  a {
    color: theme("colors.blue.600");
    text-decoration: underline;
  }

  a.btn {
    background-color: theme("colors.gray.900");
    color: white !important;
    text-decoration: none;
    display: inline-block;
    @apply rounded-md py-2 px-5;

    &.btn-primary {
      background-color: theme("colors.primary.600");
    }

    &.btn-secondary {
      background-color: theme("colors.warning.600");
    }

    &.btn-tertiary {
      background-color: theme("colors.success.600");
    }

    &.btn-accent {
      background-color: theme("colors.danger.600");
    }
  }

  sup {
    font-size: 65%;
  }

  img {
    border: dashed 2px transparent;
    &.ProseMirror-selectednode {
      border-radius: theme("borderRadius.DEFAULT");
      outline-color: theme("colors.gray.900");
      outline-offset: 2px;
      outline-width: 2px;
      outline-style: dashed;
    }
  }

  table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
  }

  table td,
  table th {
    border: 2px solid theme("colors.gray.300");
    box-sizing: border-box;
    min-width: 1em;
    padding: 3px 5px;
    position: relative;
    vertical-align: top;
  }

  table td > *,
  table th > * {
    margin-bottom: 0;
  }

  table th {
    background-color: theme("colors.gray.200");
    color: theme("colors.gray.700");
    font-weight: 700;
    text-align: left;
  }

  table .selectedCell:after {
    background: rgba(200, 200, 255, 0.4);
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }

  table .column-resize-handle {
    background-color: #adf;
    bottom: -2px;
    position: absolute;
    right: -2px;
    pointer-events: none;
    top: 0;
    width: 4px;
  }

  table p {
    margin: 0;
  }

  .tableWrapper {
    padding: 1rem 0;
    overflow-x: auto;
  }

  .resize-cursor {
    cursor: ew-resize;
    cursor: col-resize;
  }

  code {
    background-color: theme("colors.gray.300");
    border-radius: 0.25rem;
    padding-inline: 0.25rem;
  }

  pre {
    background-color: theme("colors.gray.100");
    color: theme("colors.gray.900");
    font-family: "JetBrainsMono", monospace;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;

    code {
      color: inherit;
      padding: 0;
      background: none !important;
      font-size: 0.8rem;
    }

    .hljs {
      color: #24292e;
      background: #ffffff;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-meta .hljs-keyword,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-type,
    .hljs-variable.language_ {
      /* prettylights-syntax-keyword */
      color: #d73a49;
    }

    .hljs-title,
    .hljs-title.class_,
    .hljs-title.class_.inherited__,
    .hljs-title.function_ {
      /* prettylights-syntax-entity */
      color: #6f42c1;
    }

    .hljs-attr,
    .hljs-attribute,
    .hljs-literal,
    .hljs-meta,
    .hljs-number,
    .hljs-operator,
    .hljs-variable,
    .hljs-selector-attr,
    .hljs-selector-class,
    .hljs-selector-id {
      /* prettylights-syntax-constant */
      color: #005cc5;
    }

    .hljs-regexp,
    .hljs-string,
    .hljs-meta .hljs-string {
      /* prettylights-syntax-string */
      color: #032f62;
    }

    .hljs-built_in,
    .hljs-symbol {
      /* prettylights-syntax-variable */
      color: #e36209;
    }

    .hljs-comment,
    .hljs-code,
    .hljs-formula {
      /* prettylights-syntax-comment */
      color: #6a737d;
    }

    .hljs-name,
    .hljs-quote,
    .hljs-selector-tag,
    .hljs-selector-pseudo {
      /* prettylights-syntax-entity-tag */
      color: #22863a;
    }

    .hljs-subst {
      /* prettylights-syntax-storage-modifier-import */
      color: #24292e;
    }

    .hljs-section {
      /* prettylights-syntax-markup-heading */
      color: #005cc5;
      font-weight: bold;
    }

    .hljs-bullet {
      /* prettylights-syntax-markup-list */
      color: #735c0f;
    }

    .hljs-emphasis {
      /* prettylights-syntax-markup-italic */
      color: #24292e;
      font-style: italic;
    }

    .hljs-strong {
      /* prettylights-syntax-markup-bold */
      color: #24292e;
      font-weight: bold;
    }

    .hljs-addition {
      /* prettylights-syntax-markup-inserted */
      color: #22863a;
      background-color: #f0fff4;
    }

    .hljs-deletion {
      /* prettylights-syntax-markup-deleted */
      color: #b31d28;
      background-color: #ffeef0;
    }

    .hljs-char.escape_,
    .hljs-link,
    .hljs-params,
    .hljs-property,
    .hljs-punctuation,
    .hljs-tag {
      /* purposely ignored */
    }
  }

  .filament-tiptap-grid {
    display: grid;
    gap: 1rem;
    box-sizing: border-box;

    .filament-tiptap-grid__column {
      box-sizing: border-box;
      border-style: dashed;
      border-width: 1px;
      border-color: theme("colors.gray.300");
      padding: 0.5rem;
      border-radius: theme("borderRadius.DEFAULT");

      > * + * {
        margin-block-start: 1rem;
      }
    }

    &.ProseMirror-selectednode {
      border-radius: theme("borderRadius.DEFAULT");
      outline-color: theme("colors.gray.900");
      outline-offset: 2px;
      outline-width: 2px;
      outline-style: dashed;
    }
  }

  .filament-tiptap-grid[type="asymetric-right-thirds"],
  .filament-tiptap-grid[type="asymetric-left-thirds"],
  .filament-tiptap-grid[type="asymetric-left-fourths"],
  .filament-tiptap-grid[type="asymetric-left-fourths"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .filament-tiptap-grid[type="asymetric-right-thirds"] {
    @screen md {
      grid-template-columns: 1fr 2fr;
    }
  }

  .filament-tiptap-grid[type="asymetric-left-thirds"] {
    @screen md {
      grid-template-columns: 2fr 1fr;
    }
  }

  .filament-tiptap-grid[type="asymetric-right-fourths"] {
    @screen md {
      @screen md {
        grid-template-columns: 1fr 3fr;
      }
    }
  }

  .filament-tiptap-grid[type="asymetric-left-fourths"] {
    @screen md {
      grid-template-columns: 3fr 1fr;
    }
  }

  .filament-tiptap-grid[type="responsive"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    &[cols="2"] {
      @screen md {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &[cols="3"] {
      @screen md {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    &[cols="4"] {
      @screen md {
        grid-template-columns: repeat(2, 1fr);
      }

      @screen lg {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    &[cols="5"] {
      @screen md {
        grid-template-columns: repeat(5, 1fr);
      }
    }
  }

  .filament-tiptap-grid[type="fixed"] {
    &[cols="2"] {
      grid-template-columns: repeat(2, 1fr);
    }

    &[cols="3"] {
      grid-template-columns: repeat(3, 1fr);
    }

    &[cols="4"] {
      grid-template-columns: repeat(4, 1fr);
    }

    &[cols="5"] {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  [data-youtube-video],
  [data-vimeo-video] {
    border: dashed 1px transparent;

    &.ProseMirror-selectednode {
      border-radius: theme("borderRadius.DEFAULT");
      outline-color: theme("colors.gray.900");
      outline-offset: 2px;
      outline-width: 2px;
      outline-style: dashed;
    }

    iframe {
      pointer-events: none;
    }
  }

  div[data-type="details"] {
    box-sizing: border-box;
    border-style: dashed;
    border-width: 1px;
    border-color: theme("colors.gray.300");
    border-radius: theme("borderRadius.DEFAULT");
    position: relative;

    button {
      position: absolute;
      z-index: 1;
      top: 0.125rem;
      right: 0.25rem;
      color: theme("colors.gray.400");
    }

    summary {
      padding: 0.375rem 0.5rem;
      font-weight: 700;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: theme("colors.gray.200");

      &::marker {
        content: "";
        display: none;
      }
    }

    div[data-type="details-content"] {
      padding: 0.5rem;
      height: auto;

      > * + * {
        margin-block-start: 1rem;
      }
    }
  }
}

.dark {
  .tiptap-editor .ProseMirror {
    blockquote {
      border-left: 0.5rem solid theme("colors.gray.500");
    }

    hr {
      border-color: theme("colors.gray.500");
    }

    a {
      color: theme("colors.blue.400");
    }

    ul.checked-list li::before {
      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>');
    }

    table td,
    table th {
      border: 1px solid theme("colors.gray.600");
    }

    table th {
      background-color: theme("colors.gray.500");
      color: theme("colors.gray.900");
    }

    code {
      background-color: theme("colors.gray.500");
    }

    pre {
      background-color: theme("colors.gray.900");
      color: white;

      code {
        .hljs {
          color: #c9d1d9;
          background: #0d1117;
        }

        .hljs-doctag,
        .hljs-keyword,
        .hljs-meta .hljs-keyword,
        .hljs-template-tag,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable.language_ {
          /* prettylights-syntax-keyword */
          color: #ff7b72;
        }

        .hljs-title,
        .hljs-title.class_,
        .hljs-title.class_.inherited__,
        .hljs-title.function_ {
          /* prettylights-syntax-entity */
          color: #d2a8ff;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-literal,
        .hljs-meta,
        .hljs-number,
        .hljs-operator,
        .hljs-variable,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-id {
          /* prettylights-syntax-constant */
          color: #79c0ff;
        }

        .hljs-regexp,
        .hljs-string,
        .hljs-meta .hljs-string {
          /* prettylights-syntax-string */
          color: #a5d6ff;
        }

        .hljs-built_in,
        .hljs-symbol {
          /* prettylights-syntax-variable */
          color: #ffa657;
        }

        .hljs-comment,
        .hljs-code,
        .hljs-formula {
          /* prettylights-syntax-comment */
          color: #8b949e;
        }

        .hljs-name,
        .hljs-quote,
        .hljs-selector-tag,
        .hljs-selector-pseudo {
          /* prettylights-syntax-entity-tag */
          color: #7ee787;
        }

        .hljs-subst {
          /* prettylights-syntax-storage-modifier-import */
          color: #c9d1d9;
        }

        .hljs-section {
          /* prettylights-syntax-markup-heading */
          color: #1f6feb;
          font-weight: bold;
        }

        .hljs-bullet {
          /* prettylights-syntax-markup-list */
          color: #f2cc60;
        }

        .hljs-emphasis {
          /* prettylights-syntax-markup-italic */
          color: #c9d1d9;
          font-style: italic;
        }

        .hljs-strong {
          /* prettylights-syntax-markup-bold */
          color: #c9d1d9;
          font-weight: bold;
        }

        .hljs-addition {
          /* prettylights-syntax-markup-inserted */
          color: #aff5b4;
          background-color: #033a16;
        }

        .hljs-deletion {
          /* prettylights-syntax-markup-deleted */
          color: #ffdcd7;
          background-color: #67060c;
        }

        .hljs-char.escape_,
        .hljs-link,
        .hljs-params,
        .hljs-property,
        .hljs-punctuation,
        .hljs-tag {
          /* purposely ignored */
        }
      }
    }

    .filament-tiptap-grid {
      .filament-tiptap-grid__column {
        border-color: theme("colors.gray.500");
      }

      &.ProseMirror-selectednode {
        outline-color: theme("colors.gray.300");
      }
    }

    img.ProseMirror-selectednode {
      outline-color: theme("colors.gray.300");
    }

    [data-youtube-video],
    [data-vimeo-video] {
      &.ProseMirror-selectednode {
        outline-color: theme("colors.gray.300");
      }
    }

    div[data-type="details"] {
      box-sizing: border-box;
      border-color: theme("colors.gray.500");
      border-radius: theme("borderRadius.DEFAULT");
      position: relative;

      summary {
        border-bottom-color: theme("colors.gray.500");
      }
    }
  }

  .tiptap-editor .ProseMirror-focused .ProseMirror-gapcursor:after {
    border-top: 1px solid white;
  }
}

.filament-tiptap-editor-source-modal textarea {
  font-family: theme("fontFamily.mono");
}