.ProseMirrorContainer {
  @apply @container/rte;

  @apply relative overflow-clip rounded-lg border border-gray-300 opacity-100 transition;

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

  &:has(.Mention:focus-within),
  &:has(> .ProseMirror:focus):not(.ProseMirror-fullscreen-container &) {
    @apply ring-primary-100 border border-primary-600 ring-4;
  }

  &:has(> .ProseMirror.is-focusRegionTarget) {
    @apply ring-offset-1 ring-4 ring-primary-300 ring-offset-primary-700 transition-[box-shadow] duration-500;

    > .ProseMirror {
      @apply !ring-offset-0 !ring-0;
    }
  }

  &:has(> .ProseMirror.was-focusRegionTarget) {
    @apply transition-[box-shadow] duration-500 ease-out;
  }
}

.ProseMirrorContainer .CIG-wordCount {
  @apply min-w-16 text-right;
}

.ProseMirrorContainer.is-htmlMode {
  .CIG-wordCount {
    @apply hidden;
  }

  .CodeMirror {
    @apply rounded-b-lg rounded-t-none border-none;
  }
}
