.ProseMirror-fullscreen-container {
  @apply absolute inset-0 z-40 grid h-screen w-dvw grid-rows-[auto_1fr] p-0 transition;

  &.hide {
    @apply !blokk scale-0 opacity-0;
  }

  .ProseMirror-fullscreen-container-header {
    @apply flex items-center gap-x-4 px-4 py-3;

    .InputWrapper {
      @apply basis-full;
    }

    .ProseMirror-fullscreen-container-header-aside .WorkInProgressSaveStatus {
      &:not(:empty) {
        @apply btu-badge-gray btu-badge-sm text-nowrap text-xs font-medium text-gray-700 no-underline opacity-100 before:btu-icon before:btu-icon-cloud before:me-1 before:text-gray-500 max-md:max-w-[calc(20px_+_1rem)] max-md:overflow-clip;
      }

      &[data-status='deleted'] {
        @apply pointer-events-none;
      }
    }
  }

  .ProseMirrorContainer {
    @apply row-[2/3] grid grid-rows-[min-content_auto] gap-y-4 overflow-hidden rounded-none border-x-0 border-b-0 bg-gray-100 pb-4 [grid-template-areas:'toolbar'_'main'];
  }

  &.is-comments:not(.is-htmlMode) {
    .ProseMirrorContainer {
      @apply lg:grid-cols-[70%_30%] lg:[grid-template-areas:'toolbar_toolbar'_'main_aside'];
    }

    .ProseMirror-comments {
      @apply mr-4 lg:blokk;
    }
  }

  .ProseMirror-comments {
    @apply hidden overflow-y-auto rounded-lg bg-white [grid-area:aside];
  }

  .ProseMirrorToolbar {
    @apply rounded-t-none bg-white [grid-area:toolbar];

    .rte2-toolbar-fullscreen {
      @apply before:btu-icon-minimize-2;
    }

    &:has(+ .ProseMirror:focus) {
      @apply border-gray-200;
    }
  }

  .ProseMirror,
  &.is-htmlMode .CodeMirror {
    @apply size-full max-w-[682px] justify-self-center [grid-area:main] max-md:w-[calc(100%-32px)] 2xl:max-w-5xl;
  }

  .ProseMirror {
    @apply overflow-y-auto rounded-t-lg border border-transparent bg-white p-5 text-lg focus:ring-primary-100 focus:border-primary-600 focus:ring-4 lg:p-10;

    .Enhancement-label {
      @apply items-center py-0;
    }

    .rte2-style-comment {
      @apply before:pt-[3px];
    }
  }

  /* Hides move enhancement button */
  a[data-icon='open_with'] {
    @apply !hidden;
  }
}

/* * * * * * * * * * * * * */
/* * * COMMENTS COLUMN * * */
/* * * * * * * * * * * * * */

:is(.ProseMirror-comment, .ProseMirror-reply) {
  @apply grid cursor-pointer grid-cols-[1fr_auto] [grid-template-areas:'user_action'_'time_action'_'text_text'];
}

.ProseMirror-reply {
  @apply pl-4 pt-4;
}

.ProseMirror-comment {
  @apply border-b border-s-2 border-s-transparent p-4;
}

.ProseMirror-comment.is-active {
  @apply border-s-primary-500 data-[type=del]:border-s-error-500 data-[type=ins]:border-s-success-500;
}

.ProseMirror-commentUser {
  @apply text-sm font-medium text-gray-900;
}

.ProseMirror-commentTime {
  @apply flex items-center text-xs text-gray-500 [grid-area:time];

  /* marker dot */
  @apply before:mx-[5px] before:size-2 before:rounded-full before:bg-primary-500;

  .ProseMirror-comment.is-del & {
    @apply before:bg-error-500;
  }

  .ProseMirror-comment.is-ins & {
    @apply before:bg-success-500;
  }
}

.ProseMirror-commentText {
  @apply pt-2 text-sm text-gray-900 [grid-area:text];
}

.ProseMirror-commentActions {
  @apply [grid-area:action];
}

.ProseMirror-commentReply,
.ProseMirror-commentRemove,
.ProseMirror-commentAccept,
.ProseMirror-commentReject {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs before:btu-icon touch-device:btu-button-sm;

  .ProseMirror-comment:not(.is-active) & {
    @apply btu-button-disabled;
  }
}

.ProseMirror-commentRemove {
  @apply before:btu-icon-trash;
}

.ProseMirror-commentReply {
  @apply before:btu-icon-reply;
}

/* track changes "comments" */
.ProseMirror-commentAccept {
  @apply before:btu-icon-circle-check-big;
}

.ProseMirror-commentReject {
  @apply before:btu-icon-circle-x;
}
