html::view-transition-group(prosemirror-enhancement) {
  @apply [animation-duration:500ms] [animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)];
}

.ProseMirror .Enhancement {
  @apply relative;

  &.block {
    @apply my-[var(--lineHeight-m)];
  }

  &.block.readOnly {
    @apply grid grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
  }

  &:where(.readOnly.ProseMirror-selectednode) {
    @apply border-primary-600;
  }
}

/* NOTE: does not work with table movements because tables have no attributes to select for */
.ProseMirror.is-viewTransition
  .Enhancement:where(.readOnly.ProseMirror-selectednode) {
  @apply bg-white [view-transition-name:prosemirror-enhancement];
}

.Enhancement-label {
  @apply flex gap-2 py-1 text-sm font-medium text-gray-900;
}

.Enhancement-preview {
  @apply [grid-area:preview];
}

.Enhancement .rte2-block-preview img {
  @apply max-h-[30dvh];
}

.Enhancement-preview-label {
  @apply mt-2 text-xs text-gray-500;
}

/* --- Type-specific Enhancement Icons --- */
.Enhancement-label {
  .rte2-style-brightspot-core-carousel-CarouselRichTextElement & {
    @apply before:btu-icon before:btu-icon-images;
  }

  .rte2-style-brightspot-core-image-ImageRichTextElement & {
    @apply before:btu-icon before:btu-icon-image;
  }

  .rte2-style-brightspot-core-module-ModuleRichTextElement & {
    @apply before:btu-icon before:btu-icon-blocks;
  }

  .rte2-style-brightspot-core-quote-QuoteRichTextElement & {
    @apply before:btu-icon before:btu-icon-quote;
  }

  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement & {
    @apply before:btu-icon before:btu-icon-list-video;
  }

  .rte2-style-brightspot-core-video-VideoRichTextElement & {
    @apply before:btu-icon before:btu-icon-video;
  }

  .rte2-style-brightspot-media-podcast-PodcastRichTextElement & {
    @apply before:btu-icon before:btu-icon-radio;
  }

  .rte2-style-brightspot-supportdesk-code-rte-CodeBlockRichTextElement &,
  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement & {
    @apply before:btu-icon before:btu-icon-chevrons-left-right-ellipsis;
  }

  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement & {
    @apply before:btu-icon before:btu-icon-facebook;
  }

  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement & {
    @apply before:btu-icon before:btu-icon-instagram;
  }

  .rte2-style-brightspot-twitter-rte-TweetRichTextElement & {
    @apply before:btu-icon before:btu-icon-twitter;
  }
}

/* --- Move Enhancement UI --- */
.ProseMirror-moveEnhancementOverlay {
  @apply absolute z-[2] scale-x-100 opacity-100 [transition:opacity_.3s,transform_.15s];

  @starting-style {
    & {
      @apply scale-x-95 opacity-0;
    }
  }
}

.ProseMirror-moveEnhancementTarget {
  --move-button-offset: 3px; /* Accounts for the difference in size between the move button and the line spacing */

  @apply absolute left-0 right-0 mx-auto -mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] flex h-[calc(var(--lineHeight-m)-2px)] w-fit cursor-pointer items-center justify-center gap-1 rounded-2xl bg-primary-50 py-0.5 pe-2 ps-1.5 text-xs font-medium text-primary-700 before:btu-icon before:btu-icon-arrow-down-up before:font-semibold before:btu-icon-xs after:absolute after:-z-[1] after:blokk after:w-[calc(100cqw-2rem)] after:border-b-[1.5px] after:border-dashed after:border-primary-500 first:-mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] hover:bg-primary-600 hover:text-white hover:after:border-solid hover:after:border-primary-700;

  &.is-cancel {
    @apply bg-gray-50 text-gray-700 before:btu-icon-x after:border-gray-500 hover:bg-gray-700 hover:text-white hover:after:border-gray-700;
  }

  &.is-emptyLine {
    @apply -mt-[calc(2*var(--lineHeight-m)-var(--move-button-offset))];
  }

  &.is-last {
    @apply bottom-px;
  }
}

/* Code.css styles for Inline Code enhancements */
.rte2-style-brightspot-supportdesk-code-rte-CodeInlineRichTextElement,
bsp-code-inline {
  @apply bg-gray-200 px-1 font-mono;
}

.ContentEdit.is-locked .Enhancement {
  .Enhancement-label,
  .Enhancement-preview-label {
    @apply text-gray-400;
  }

  .rte2-block-preview img {
    @apply opacity-50;
  }
}
