import { css } from 'lit';

export const styles = css`
  :host {
    display: block;
    font-family: var(
      --nile-wysiwyg-font-family,
      var(
        --nile-font-family-sans-serif,
        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
      )
    );
  }

  .nile-wysiwyg {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid
      var(
        --nile-wysiwyg-border-color,
        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd))
      );
    border-radius: var(
      --nile-wysiwyg-radius,
      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))
    );
    background: var(
      --nile-wysiwyg-bg,
      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
    );
    box-sizing: border-box;
  }

  /* --- Fullscreen (distraction-free) mode --- */
  :host([fullscreen]) {
    position: fixed;
    inset: 0;
    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);
    background: var(
      --nile-wysiwyg-bg,
      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
    );
  }

  :host([fullscreen]) .nile-wysiwyg {
    height: 100%;
    border: none;
    border-radius: 0;
  }

  :host([fullscreen]) .nile-wysiwyg__surface {
    max-height: none;
  }

  :host([disabled]) .nile-wysiwyg {
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled, #98a2b3));
    background: var(
      --nile-wysiwyg-disabled-bg,
      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))
    );
    cursor: not-allowed;
    pointer-events: none;
  }

  :host([disabled]) .ProseMirror {
    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));
  }

  .nile-wysiwyg__surface {
    flex: 1;
    overflow-y: auto;
    max-height: var(--nile-wysiwyg-max-height, none);
  }

  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */
  .ProseMirror {
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0;
    outline: none;
    padding: var(--nile-wysiwyg-content-padding, 12px);
    min-height: var(--nile-wysiwyg-min-height, 160px);
    font-size: var(--nile-wysiwyg-font-size, inherit);
    line-height: var(--nile-wysiwyg-line-height, inherit);
    tab-size: 4;
    -moz-tab-size: 4;
    word-break: break-word;
    color: var(
      --nile-wysiwyg-color,
      var(--nile-colors-dark-900, var(--ng-colors-text-primary, #101828))
    );
    box-sizing: border-box;
    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))
      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));
  }

  .ProseMirror pre {
    white-space: pre-wrap;
  }

  .ProseMirror li {
    position: relative;
  }

  .ProseMirror-hideselection *::selection {
    background: transparent;
  }

  .ProseMirror-hideselection {
    caret-color: transparent;
  }

  .ProseMirror-selectednode {
    outline: 2px solid
      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb)));
  }

  /* Gap cursor (inlined from prosemirror-gapcursor/style) */
  .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
  }

  .ProseMirror-gapcursor:after {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid currentColor;
    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;
  }

  @keyframes nile-wysiwyg-cursor-blink {
    to {
      visibility: hidden;
    }
  }

  .ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
  }

  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */
  .nile-wysiwyg__empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    color: var(
      --nile-wysiwyg-placeholder-color,
      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3))
    );
  }

  /* --- Document content typography --- */
  .ProseMirror > :first-child {
    margin-top: 0;
  }

  .ProseMirror > :last-child {
    margin-bottom: 0;
  }

  /* Legacy nile-rich-text-editor typography */
  .ProseMirror p {
    margin: 1em 0;
  }

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

  .ProseMirror h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  .ProseMirror h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
  }
  .ProseMirror h3 {
    font-size: 1.17em;
    margin: 1em 0;
  }
  .ProseMirror h4 {
    font-size: 1em;
    margin: 1.33em 0;
  }
  .ProseMirror h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
  }
  .ProseMirror h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
  }

  .ProseMirror blockquote {
    margin: 0.5em 0;
    padding: 0.25em 0 0.25em 1em;
    border-left: 3px solid
      var(
        --nile-wysiwyg-blockquote-border,
        var(--nile-colors-neutral-300, #d0d5dd)
      );
    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));
  }

  .ProseMirror ul,
  .ProseMirror ol {
    list-style-position: outside;
    padding-inline-start: 24px;
  }

  .ProseMirror hr {
    border: none;
    border-top: 1px solid var(--nile-wysiwyg-border-color, #d0d5dd);
    margin: 1em 0;
  }

  /* Legacy: brand color, no underline */
  .ProseMirror a {
    color: var(
      --nile-wysiwyg-link-color,
      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600, #2563eb))
    );
    text-decoration: none;
    cursor: pointer;
  }

  .ProseMirror code.nile-wysiwyg__inline-code {
    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.9em;
    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
    border-radius: 4px;
    padding: 0.1em 0.35em;
  }

  /* --- Code blocks --- */
  .ProseMirror pre.nile-wysiwyg__code-block {
    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.9em;
    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0.5em 0;
    overflow-x: auto;
  }

  /* --- Tables (rules required by prosemirror-tables) --- */
  .ProseMirror .tableWrapper {
    overflow-x: auto;
    margin: 0.5em 0;
  }

  .ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
  }

  .ProseMirror td,
  .ProseMirror th {
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));
    padding: 6px 8px;
    min-width: 1em;
  }

  .ProseMirror th {
    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));
    font-weight: 600;
    text-align: left;
  }

 
  .ProseMirror td > *,
  .ProseMirror th > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 20;
    background-color: var(--nile-colors-primary-300, #b692f6);
    pointer-events: none;
  }

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

  /* --- Layout tables (role="presentation"): borderless output, dashed
     guides while editing so the structure stays visible. --- */
  .ProseMirror table[data-layout] td,
  .ProseMirror table[data-layout] th {
    border: 1px dashed var(--nile-colors-neutral-300, #e4e7ec);
    background: transparent;
    font-weight: inherit;
    text-align: inherit;
  }

  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */
  .ProseMirror a[data-bookmark] {
    display: inline-block;
    vertical-align: baseline;
    cursor: default;
    text-decoration: none;
  }

  .ProseMirror a[data-bookmark]::after {
    content: '⚑';
    font-size: 12px;
    line-height: 1;
    padding: 0 1px;
    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
  }

  .ProseMirror .selectedCell:after {
    z-index: 2;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));
    pointer-events: none;
  }

  /* --- Images (ProseMirror's standard inline image node) --- */
  .ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }

  /* --- Image resize handles --- */
  .ProseMirror .nile-wysiwyg__image-resizer {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
  }

  .ProseMirror .nile-wysiwyg__resize-handle {
    display: none;
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
    border: 1.5px solid #ffffff;
    border-radius: 2px;
    z-index: 2;
  }

  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {
    display: block;
  }

  .ProseMirror .nile-wysiwyg__image-resizer--selected img {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
  }

  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }

  /* --- Captioned figures --- */
  .ProseMirror figure.nile-wysiwyg__figure {
    margin: 0.75em 0;
    max-width: 100%;
  }

  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {
    margin-left: auto;
    margin-right: auto;
  }

  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {
    margin-left: auto;
    margin-right: 0;
  }

  .ProseMirror figure.nile-wysiwyg__figure img {
    width: 100%;
    display: block;
  }

  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {
    display: block;
  }

  .ProseMirror .nile-wysiwyg__figcaption {
    font-size: 0.85em;
    color: var(--nile-colors-neutral-500, #667085);
    text-align: center;
    padding: 4px 8px;
    line-height: 1.4;
  }

  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {
    content: 'Add a caption…';
    float: left;
    width: 100%;
    pointer-events: none;
    color: var(--nile-colors-neutral-400, #98a2b3);
    margin-bottom: -1.4em;
  }

  .ProseMirror figure.nile-wysiwyg__figure--selected {
    border-radius: 4px;
  }

  /* --- Embeds --- */
  .ProseMirror div.nile-wysiwyg__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    /* Default size; an inline width from drag-resize overrides it, capped by
       max-width. overflow stays visible so the resize handles aren't clipped
       (rounding lives on the iframe). */
    width: min(640px, 100%);
    max-width: 100%;
    margin: 0.75em 0;
    border-radius: 8px;
    background: var(--nile-colors-neutral-100, #f2f4f7);
  }

  .ProseMirror div.nile-wysiwyg__embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 8px;
    /* Editing mode: the first click selects the node instead of hitting the
       iframe; once selected (or in readonly) the video is interactive. */
    pointer-events: none;
  }

  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,
  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {
    pointer-events: auto;
  }

  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
  }

  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {
    display: block;
  }

  /* A live resize drag must not lose mousemove to the embedded document. */
  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {
    pointer-events: none !important;
  }

  /* --- Code highlighting (compact light theme for hljs tokens) --- */
  .ProseMirror .hljs-comment,
  .ProseMirror .hljs-quote {
    color: #a0a1a7;
    font-style: italic;
  }

  .ProseMirror .hljs-keyword,
  .ProseMirror .hljs-selector-tag,
  .ProseMirror .hljs-formula,
  .ProseMirror .hljs-doctag {
    color: #a626a4;
  }

  .ProseMirror .hljs-section,
  .ProseMirror .hljs-name,
  .ProseMirror .hljs-selector-id,
  .ProseMirror .hljs-selector-class,
  .ProseMirror .hljs-deletion,
  .ProseMirror .hljs-subst,
  .ProseMirror .hljs-tag {
    color: #e45649;
  }

  .ProseMirror .hljs-literal,
  .ProseMirror .hljs-built_in,
  .ProseMirror .hljs-bullet {
    color: #0184bb;
  }

  .ProseMirror .hljs-string,
  .ProseMirror .hljs-regexp,
  .ProseMirror .hljs-addition,
  .ProseMirror .hljs-attribute,
  .ProseMirror .hljs-meta .hljs-string {
    color: #50a14f;
  }

  .ProseMirror .hljs-attr,
  .ProseMirror .hljs-variable,
  .ProseMirror .hljs-template-variable,
  .ProseMirror .hljs-type,
  .ProseMirror .hljs-selector-attr,
  .ProseMirror .hljs-selector-pseudo,
  .ProseMirror .hljs-number {
    color: #986801;
  }

  .ProseMirror .hljs-symbol,
  .ProseMirror .hljs-meta,
  .ProseMirror .hljs-link,
  .ProseMirror .hljs-operator,
  .ProseMirror .hljs-title,
  .ProseMirror .hljs-title.class_,
  .ProseMirror .hljs-title.function_ {
    color: #4078f2;
  }

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

  .ProseMirror .hljs-strong {
    font-weight: bold;
  }

  /* --- Checklists --- */
  .ProseMirror ul.nile-wysiwyg__task-list {
    list-style: none;
    padding-inline-start: 4px;
  }

  .ProseMirror li.nile-wysiwyg__task-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {
    /* Center on the first text line: (1 line box - checkbox height) / 2. */
    margin: calc((1em * 1.45 - 14px) / 2) 0 0;
    width: 14px;
    height: 14px;
    flex: none;
    cursor: pointer;
    accent-color: var(--nile-colors-primary-600, #2563eb);
  }

  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {
    flex: 1;
    min-width: 0;
  }

  /* The content's paragraph margins (legacy 1em) push text below the
     checkbox — strip them at the edges of each item. */
  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {
    margin-top: 0;
  }

  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {
    margin-bottom: 0;
  }

  .ProseMirror ul.nile-wysiwyg__task-list > li + li {
    margin-top: 0.35em;
  }

  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {
    color: var(--nile-colors-neutral-500, #98a2b3);
    text-decoration: line-through;
  }

  /* --- Counter footer --- */
  .nile-wysiwyg__counter {
    padding: 4px 12px 6px;
    text-align: right;
    font-size: 12px;
    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3));
    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);
  }

  .nile-wysiwyg__counter.over {
    color: var(--nile-colors-error-600, #d92d20);
    font-weight: 600;
  }

  /* --- Author <style> block (from HTML source) ---
     Applied live by StyleBlockView (a hidden <style> host, scoped to the
     content); the block renders nothing in the editor. */
  .nile-wysiwyg__style-block {
    display: none;
  }

  /* --- Sticky toolbar ---
     Pins to the top of the scroll container. Note: sticky anchors to the
     container's PADDING box, so if the scroll container has top padding, a
     band of content shows above the toolbar — set --nile-wysiwyg-sticky-top
     (or remove the container's top padding) to compensate. The opaque
     background makes the pinned bar self-backing so content can never bleed
     through it. */
  :host([sticky-toolbar]) nile-wysiwyg-toolbar {
    position: sticky;
    top: var(--nile-wysiwyg-sticky-top, 0);
    z-index: 12;
    background: var(
      --nile-wysiwyg-bg,
      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
    );
  }

  /* --- Mentions & suggestions --- */
  .ProseMirror span.nile-wysiwyg__mention {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff)));
    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));
    font-weight: 500;
    white-space: nowrap;
  }

  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
  }

  /* --- Merge fields --- */
  .ProseMirror span.nile-wysiwyg__merge-field {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));
    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));
    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    white-space: nowrap;
  }

  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
  }

  /* --- Math --- */
  .ProseMirror span.nile-wysiwyg__math {
    display: inline-block;
    padding: 0 2px;
    font-family: "Cambria Math", "Latin Modern Math", serif;
  }

  .ProseMirror span.nile-wysiwyg__math--block {
    display: block;
    text-align: center;
    margin: 8px 0;
  }

  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
    border-radius: 3px;
  }

  /* Format painter armed: hint the next selection will be painted. */
  .ProseMirror.nile-wysiwyg--painting {
    cursor: cell;
  }

  .ProseMirror .nile-wysiwyg__suggestion {
    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
    border-radius: 3px;
  }

  /* --- Find & replace highlights --- */
  .ProseMirror .nile-wysiwyg__find-match {
    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));
    border-radius: 2px;
  }

  .ProseMirror .nile-wysiwyg__find-active {
    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));
  }

  /* --- Upload placeholder --- */
  .nile-wysiwyg__upload-placeholder {
    display: inline-block;
    padding: 6px 12px;
    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
    border-radius: 6px;
    background: var(--nile-colors-neutral-50, #f9fafb);
    color: var(--nile-colors-neutral-600, #475467);
    font-size: 0.85em;
  }

  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.
     Serialized output carries data-list-style="multilevel"; consumers
     rendering it outside the editor need these same counter rules. --- */
  .ProseMirror ol[data-list-style='multilevel'],
  .ProseMirror ol[data-list-style='multilevel'] ol {
    list-style: none;
    counter-reset: nile-multilevel;
  }

  .ProseMirror ol[data-list-style='multilevel'] > li,
  .ProseMirror ol[data-list-style='multilevel'] ol > li {
    counter-increment: nile-multilevel;
  }

  /* The number sits inside the item's first paragraph so it shares a line. */
  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,
  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {
    content: counters(nile-multilevel, '.') '. ';
    font-variant-numeric: tabular-nums;
  }

  /* --- Show blocks: dashed outlines + tag labels while editing --- */
  .nile-wysiwyg--show-blocks .ProseMirror p,
  .nile-wysiwyg--show-blocks .ProseMirror h1,
  .nile-wysiwyg--show-blocks .ProseMirror h2,
  .nile-wysiwyg--show-blocks .ProseMirror h3,
  .nile-wysiwyg--show-blocks .ProseMirror h4,
  .nile-wysiwyg--show-blocks .ProseMirror h5,
  .nile-wysiwyg--show-blocks .ProseMirror h6,
  .nile-wysiwyg--show-blocks .ProseMirror blockquote,
  .nile-wysiwyg--show-blocks .ProseMirror pre,
  .nile-wysiwyg--show-blocks .ProseMirror figure,
  .nile-wysiwyg--show-blocks .ProseMirror ul,
  .nile-wysiwyg--show-blocks .ProseMirror ol,
  .nile-wysiwyg--show-blocks .ProseMirror li,
  .nile-wysiwyg--show-blocks .ProseMirror table {
    outline: 1px dashed var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));
    outline-offset: -1px;
  }

  .nile-wysiwyg--show-blocks .ProseMirror p,
  .nile-wysiwyg--show-blocks .ProseMirror h1,
  .nile-wysiwyg--show-blocks .ProseMirror h2,
  .nile-wysiwyg--show-blocks .ProseMirror h3,
  .nile-wysiwyg--show-blocks .ProseMirror h4,
  .nile-wysiwyg--show-blocks .ProseMirror h5,
  .nile-wysiwyg--show-blocks .ProseMirror h6,
  .nile-wysiwyg--show-blocks .ProseMirror blockquote,
  .nile-wysiwyg--show-blocks .ProseMirror pre {
    position: relative;
  }

  .nile-wysiwyg--show-blocks .ProseMirror p::after,
  .nile-wysiwyg--show-blocks .ProseMirror h1::after,
  .nile-wysiwyg--show-blocks .ProseMirror h2::after,
  .nile-wysiwyg--show-blocks .ProseMirror h3::after,
  .nile-wysiwyg--show-blocks .ProseMirror h4::after,
  .nile-wysiwyg--show-blocks .ProseMirror h5::after,
  .nile-wysiwyg--show-blocks .ProseMirror h6::after,
  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,
  .nile-wysiwyg--show-blocks .ProseMirror pre::after {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 3px;
    font-family: system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    line-height: 14px;
    letter-spacing: 0.5px;
    color: var(--nile-colors-neutral-500, #667085);
    background: var(--nile-colors-neutral-100, #f2f4f7);
    border-radius: 0 0 4px 0;
    pointer-events: none;
  }

  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }
  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }
  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }
  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }
  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }
  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }
  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }
  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }
  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }
`;