.ProseMirror {
  img {
    max-width: 100%;
    height: auto;

    @media print {
      break-inside: avoid;
    }
  }

  .node-image, .node-video, .node-pdf, .node-excalidraw, .node-drawio {
    &.ProseMirror-selectednode {
      outline: none;
    }
  }

  .attachment-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mantine-color-body);
    border-radius: var(--mantine-radius-default);
    cursor: pointer;
    padding: 15px;
    height: 25px;

    @mixin light {
      border: 1px solid var(--mantine-color-gray-3);
    }

    @mixin dark {
      border: 1px solid var(--mantine-color-dark-4);
    }
  }

  .image-caption {
    text-align: center;
    font-size: 0.875em;
    color: var(--mantine-color-dimmed);
    margin-top: 0.4em;
    line-height: 1.35;
    word-break: break-word;
  }

  .uploading-text {
    font-size: var(--mantine-font-size-md);
    line-height: var(--mantine-line-height-md);
  }

  .media-pulse {
    animation: media-pulse 1.2s ease-in-out infinite;

    @mixin light {
      background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
      background-size: 400% 400%;
    }

    @mixin dark {
      background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
      background-size: 400% 400%;
    }

    @keyframes media-pulse {
      0% {
        background-position: 0% 0%;
      }
      100% {
        background-position: -135% 0%;
      }
    }
  }
}

/* Inline image rows (#284): center the anonymous line boxes formed by
   consecutive [data-image-align="inline"] node-view containers. A row has no
   DOM wrapper of its own, so its horizontal placement is controlled by the
   text-align of the nearest block ancestor (the editor root or a nested
   block container: blockquote, callout, list item, table cell, details).
   Centering is enabled only in containers that actually hold an inline
   image (:has), and every other child of such a container gets its default
   alignment back so ordinary text is unaffected. Explicit per-block
   alignment from the toolbar is an inline style and still wins. Browsers
   without :has() degrade to left-pinned rows. */
.ProseMirror:has(> [data-image-align="inline"]),
.ProseMirror :has(> [data-image-align="inline"]) {
  text-align: center;
}

.ProseMirror:has(> [data-image-align="inline"]) > :not([data-image-align="inline"]),
.ProseMirror :has(> [data-image-align="inline"]) > :not([data-image-align="inline"]) {
  text-align: start;
}
