@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/Dialog.css

@@ -0,0 +1,441 @@
+btu-dialog {
+  @apply contents;
+}
+
+/*
+  Dialogs can be either modals or layered regions. We use container queries
+  to help give the inner Popup element an explicit size & width. All dialogs
+  handle their own animations (scale, transform, opacity, etc.).
+*/
+dialog {
+  @apply m-0 grid !bg-transparent bg-none p-0 @container/dialog [block-size:100dvh] [container-type:size] [inline-size:auto] [margin-inline-end:auto] [max-block-size:100%] [overflow-y:hidden] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete];
+
+  &:not([open]) {
+    @apply hidden;
+  }
+
+  /* The inner content fades in when ready */
+  .Popup .Popup-content {
+    @apply opacity-0 [transition:opacity_0.3s_0.4s];
+  }
+
+  .Popup.is-ready.is-visible .Popup-content {
+    @apply opacity-100 [@starting-style]:opacity-0;
+  }
+}
+
+/* Non-modal Dialogs. Think of these as layered regions (eg: global search). */
+dialog:not(:modal) {
+  @apply z-20 mt-[var(--page-header-h)] origin-top scale-y-100 opacity-100 [grid-area:stack] [transition:transform_0.25s_cubic-bezier(0.9,0,0.1,1),opacity_0.15s_cubic-bezier(0.9,0,0.1,1)] max-md:fixed max-md:bottom-0 max-md:left-0 max-md:right-0 max-md:z-[200000] max-md:h-[calc(100dvh_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)-var(--page-title-h))] md:relative md:[block-size:auto] [@starting-style]:scale-y-0 [@starting-style]:opacity-0;
+
+  .ComboInput-list {
+    &[data-tether-rx='l'] {
+      @apply /*rtl:ignore*/ left-[calc(var(--Tether-rl)_+_var(--Dropdown-markerSize))];
+    }
+
+    &[data-tether-ry='t'] {
+      @apply top-[calc(var(--Tether-rt)_+_var(--Tether-rh)_+_var(--Dropdown-markerSize)_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)_-_var(--page-env-h)_-_var(--page-title-h))] md:top-[calc(var(--Tether-rt)_+_var(--Tether-rh)_+_var(--Dropdown-markerSize)_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)_-_var(--page-title-h))];
+    }
+  }
+}
+
+/*
+  Modal dialogs.
+  Note: To change the size of a modal dialog, override the `--popup-w` and `--popup-h`
+  properties on the Popup element. Alternatively, apply either the `__modal-popup`
+  or `__modal-popup-lg` mix-ins below.
+*/
+dialog:modal {
+  /* fullsize popups (the default) use padding to reserve space for the popup drop shadow effect. */
+  --padding: theme(spacing.4);
+
+  /* Center modal dialogs by default. */
+  @apply max-w-[100dvw] overflow-visible [padding-block:var(--padding)] [padding-inline:var(--padding)] [scale:1] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete,_opacity_0.4s_0.1s,_scale_0.25s_cubic-bezier(0.9,0,0.1,1)_0.3s];
+
+  /* Modals have a blurred, slightly darkened backdrop */
+  &::backdrop {
+    @apply opacity-0 [background-color:theme(backdropColor.dialog)] [transition:opacity_0.3s_cubic-bezier(0.25,0,0.2,1),_backdrop-filter_0.3s_cubic-bezier(0.25,0,0.2,1)];
+  }
+
+  &[open] {
+    &,
+    &::backdrop {
+      @apply opacity-100;
+    }
+
+    &::backdrop {
+      @apply grayscale backdrop-blur;
+    }
+  }
+
+  @starting-style {
+    & {
+      @apply opacity-0 [scale:0.7];
+    }
+
+    &[open],
+    &[open]::backdrop {
+      @apply opacity-0;
+    }
+
+    &[open]::backdrop {
+      @apply [backdrop-filter:blur(0px)] [filter:grayscale(0)];
+    }
+  }
+
+  &:has(.Popup.is-fromRight) {
+    --padding: ; /* no padding for right-aligned popups. margin is necessary here. */
+    @apply [margin-inline-start:auto] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete,_opacity_0.25s_0.3s,_translate_0.25s_cubic-bezier(0.9,0,0.1,1)_0.3s] [translate:0_0] md:[inline-size:70vw] md:[margin-inline-end:0] [@starting-style]:[translate:45dvw_0];
+
+    /* Dropdown lists inside of right-aligned modals need to be shifted over. */
+    .Dropdown,
+    .ComboInput-list {
+      &[data-tether-rx='l'] {
+        @apply /*rtl:ignore*/ left-[calc(var(--Tether-rl)-30vw)];
+      }
+    }
+  }
+}
+
+/* Center modal dialogs that don't slide in from a side */
+btu-dialog[enter-from='center'] > dialog:modal {
+  @apply content-center justify-items-center;
+}
+
+/* Hide loading spinner once popup is loaded */
+btu-dialog[loaded] > dialog:modal {
+  @apply before:hidden;
+}
+
+/* Medium (default) size for modal popups. */
+.__modal-popup {
+  --w: var(--popup-w, 100cqw);
+  --h: var(--popup-h, 100cqh);
+
+  @apply relative h-[--h] min-h-[--h] w-[--w] min-w-[--w] overflow-hidden rounded-2xl bg-white shadow-lg;
+
+  /* Responsive sizes */
+  @apply @dialog-md:[--h:var(--popup-h,_85cqh)] @dialog-md:[--w:var(--popup-w,_82cqw)] @dialog-lg:[--h:var(--popup-h,_65cqh)] @dialog-lg:[--w:var(--popup-w,_55cqw)];
+
+  /* Loading UI */
+  @apply before:btu-loader before:pointer-events-none before:absolute before:z-10 before:size-[--Loader-size] before:[left:calc(50%_-_(var(--Loader-size)/2))] before:[top:calc(50%_-_(var(--Loader-size)/2))] before:[transition:transform_0.3s_cubic-bezier(0.9,0,0.1,1),opacity_0.4s_cubic-bezier(0.9,0,0.1,1)_allow-discrete];
+}
+
+/* Large size for modal popups. */
+.__modal-popup-lg {
+  @apply @dialog-md:[--h:var(--popup-h,_90cqh)] @dialog-md:[--w:var(--popup-w,_90cqw)] @dialog-lg:[--h:var(--popup-h,_80cqh)] @dialog-lg:[--w:var(--popup-w,_80cqw)];
+}
+
+dialog:modal > .Popup:where(:not([popover])),
+dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
+  /* By default, all modals get medium size. */
+  @apply __modal-popup;
+
+  /* Hide the loading spinner once the modal is loaded.
+    The list of selectors reveals the amount of one-offs that popup
+    markup currently has. */
+  &:has(
+      > .Popup-content > :where(.frame.is-transitioned, .ContentSummary.is-open)
+    ),
+  &.PrePublish.is-visible,
+  &.popup-show[data-popup-source-class^='rte2'],
+  &.popup-show[name='queryfield' i],
+  &.popup-show:has(.Paste-popup) {
+    @apply before:scale-[2] before:opacity-0;
+  }
+
+  /* The largest modals take up the full screen. */
+  &:where(.is-noGap, .is-fromTop) {
+    @apply [--popup-h:100cqh] [--popup-w:100cqw];
+  }
+
+  /* Modals that slide in from the right have special styling. */
+  &:where(.is-fromRight) {
+    --gap: 1rem;
+    --w: var(--popup-w, calc(100cqw - (2 * var(--gap))));
+    --h: var(--popup-h, calc(100cqh - (2 * var(--gap))));
+    @apply [margin-block:var(--gap)] [margin-inline:var(--gap)];
+  }
+
+  .Popup-content {
+    @apply grid grid-cols-[minmax(0,1fr)_min-content] grid-rows-[max-content_minmax(0,1fr)] content-baseline;
+  }
+
+  .Popup-content.is-editing {
+    /* if the guide is open, make sure to account for its width. */
+    --guide-w: var(--has-right-rail, var(--right-rail-w));
+
+    @apply grid h-full overscroll-none transition-all max-md:overflow-hidden max-md:[grid-template:"title_title"_min-content_"top_top"_min-content_"status_status"_min-content_"content_content"_1fr_"bottom_bottom"_52px_/_1fr_min-content] md:grid-rows-[auto_auto_1fr] md:overflow-hidden md:[grid-template-areas:'title_title_title_title''top_top_top_top''left_preview_right_toolbar'];
+
+    > .frame.plugin-popup {
+      @apply contents;
+    }
+
+    .ContentEdit-top {
+      @apply [grid-area:title];
+    }
+
+    .Guide-title {
+      @apply btu-heading-4 me-2 flex content-center items-center gap-2 border-b-0 py-[.88rem] ps-6 text-gray-900 [grid-area:title];
+    }
+
+    .ContentEdit-top {
+      @apply border-t border-t-gray-200;
+    }
+
+    .Popup-close {
+      @apply absolute right-0 z-[1] max-md:me-4;
+    }
+
+    &.has-message {
+      @apply md:grid-rows-[auto_auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'title_title_title_title''top_top_top_top''banner_banner_banner_banner''left_preview_right_toolbar'];
+    }
+  }
+
+  /* Fix the ActionBar to the bottom of the modal. */
+  &:where(
+      :not(
+          [name='toolUserTfa'],
+          [name='contentTools'],
+          [name='uploadFiles'],
+          [name*='contentEnhancement']
+        )
+    )
+    .Popup-content:where(.has-ActionBar:not(.has-AdminNav, .is-editing)) {
+    @apply grid-rows-[[title]_max-content_[main]_1fr_max-content_[action-bar]];
+
+    &.has-StatusMessage {
+      @apply grid-rows-[[title]_max-content_[message]_max-content_[main]_1fr_max-content_[action-bar]];
+    }
+
+    *.has-ActionBarContent {
+      @apply row-[main/action-bar] grid grid-rows-[subgrid] items-baseline;
+
+      &.has-StatusMessage {
+        @apply row-[message/action-bar];
+
+        .Widget-title + .Message {
+          @apply row-[message/main];
+        }
+      }
+
+      &.SearchFields.has-tabs {
+        @apply h-full grid-rows-[auto_[main]_1fr_max-content_[action-bar]];
+      }
+    }
+
+    .Widget .has-ActionBarContent {
+      @apply col-[fullbleed-start/fullbleed-end] grid-cols-subgrid;
+    }
+
+    :is(form, .TC, .AIChat-wrapper, .fixedScrollable).before-ActionBar {
+      @apply col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
+    }
+
+    .ActionBar {
+      @apply mt-0 h-max self-end;
+    }
+  }
+
+  .Popup-content > :where(.Guide-title, .Widget-title, h1, h2, h3) {
+    @apply btu-heading-4 col-start-1 flex min-w-0 content-center items-center gap-2 border-b-0 py-[.88rem] ps-6 text-gray-900;
+  }
+
+  .Popup-close {
+    @apply my-[.88rem] me-6 ms-2;
+  }
+
+  > .Popup-content > :where(.frame.plugin-popup, form) {
+    @apply col-span-full overflow-y-auto border-t border-t-gray-200;
+  }
+
+  /* While popups are loading (or when there's no popup title element), make sure the close button stays aligned to the right */
+  .Popup-content .Popup-close {
+    @apply first:ms-auto;
+  }
+}
+
+/* Content Edit workflow popup — v4 lifecycle does not always remove [open]
+when the workflow closes, so the general dialog:not([open]) rule is insufficient.
+:not(:modal) catches a non-modal dialog still marked [open] but visually inactive;
+[hidden] catches a modal dialog whose inner element was hidden by v4 code. */
+dialog:has(> .ContentEdit-workflow):not(:modal),
+dialog:has(> .ContentEdit-workflow[hidden]) {
+  @apply hidden;
+
+  /* This is to make sure backdrop disappears right after the workflow popup closes
+  There's a tiny lag between the v4 events responsible for hiding the actual Content edit workflow popup &
+  the v5 dialog close events causing the backdrop to stay visible a few seconds after the popup closes. */
+  &::backdrop {
+    @apply opacity-0;
+  }
+}
+
+dialog:modal .ContentEdit-workflow {
+  @apply __modal-popup grid grid-rows-[max-content_1fr_max-content];
+
+  .ContentEdit-workflowBody {
+    @apply !h-full overflow-y-auto;
+  }
+}
+
+dialog:modal .ContentEdit-workflow {
+  @apply opacity-100 [scale:1] before:scale-[2] before:opacity-0;
+}
+
+dialog:modal > .Popup.is-local {
+  @apply bottom-auto left-auto right-auto top-auto transform-none [inline-size:fit-content] [max-height:100cqh] [transform-origin:initial]; /* reset the local styles */
+
+  .Popup-content {
+    @apply max-h-full;
+  }
+}
+
+/* Query field popup */
+dialog:not(:modal):has(.QueryField-frame > .Popup:not(.is-visible)) {
+  @apply hidden backdrop:opacity-0;
+}
+
+/* ------------------------------------ */
+/* Modals set to size large by default  */
+/* ------------------------------------ */
+dialog:modal > {
+  .Popup[name^='contentEnhancement'],
+  .Popup.ContentSummary-popup,
+  .Popup[name='searchFields'],
+  .Popup[name='edit-guide'] {
+    @apply __modal-popup-lg;
+  }
+}
+
+/* Enhancement popups in non-editing mode: auto-size height to content instead
+   of using the fixed __modal-popup-lg dimensions. Editing mode restores the
+   large fixed size because :has() stops matching once .is-editing is added. */
+dialog:modal
+  > .Popup[name^='contentEnhancement']:has(> .Popup-content:not(.is-editing)) {
+  @apply [--popup-h:auto];
+}
+
+/* Compact internal spacing for non-editing enhancement popups. --space and
+   --CIG-row-space match ContentEdit-right; --CIG-padding is further reduced
+   from its default spacing.6 to fit the popup's compact layout. */
+dialog:modal
+  > .Popup[name^='contentEnhancement']
+  > .Popup-content:not(.is-editing) {
+  .Widget {
+    --space: theme(spacing.4);
+  }
+
+  .CIG {
+    --CIG-padding: theme(spacing.4);
+  }
+
+  .CIG-row {
+    --CIG-row-space: 1rem;
+  }
+}
+
+/* ------------------------------ */
+/* Small, fixed-size modal popups */
+/* ------------------------------ */
+dialog:modal > .Popup[name='lookingGlass'] {
+  @apply [--h:445px] @[492px]:[--h:420px] @[492px]:[--w:460px];
+}
+
+dialog:modal > .Popup[name='toolUserTfa'] {
+  @apply [--h:630px] [--w:400px] @dialog-md:[--h:582px] @dialog-md:[--w:420px];
+}
+
+dialog:modal > {
+  .Popup.is-calendar,
+  .Popup[name='DateStringCalendarFrame'] {
+    @apply [--h:auto] [--w:330px];
+
+    .Popup-content > .frame.plugin-popup {
+      @apply w-[328px] overflow-x-hidden border-none;
+    }
+  }
+}
+
+dialog:modal > .Popup[data-popup-source-class='rte2-toolbar-add-table'] {
+  @apply [--h:402px]; /* The width can stay responsive for this widget */
+}
+
+/* Fixed size modals based on data attribute */
+dialog:modal {
+  > .Popup:has([data-popup-size='sm']) {
+    @apply [--h:45cqh] @dialog-md:[--w:65cqw] @dialog-lg:[--w:55cqw];
+  }
+
+  > .Popup:has([data-popup-size='lg']) {
+    @apply @dialog-md:[--h:100cqh] @dialog-md:[--w:90cqw] @dialog-lg:[--w:80cqw];
+  }
+
+  > .Popup:has([data-popup-size='auto-height']) {
+    @apply [--h:auto];
+  }
+}
+
+/* ---------------------------------------------------------------- */
+/* Below are special contexts as seen in specific types of dialogs. */
+/* ---------------------------------------------------------------- */
+
+dialog:modal {
+  /*--- Guides */
+  .Popup-content > .Guide-title > Guide-controls {
+    @apply relative right-[unset] top-[unset] block;
+
+    .Guide-close {
+      @apply hidden; /* Not needed since popups have a close button already. */
+    }
+  }
+}
+
+/* Pre Publish Popup:
+This is a one off use case where you are in a content edit popup and then open the pre publish popup */
+dialog dialog > .PrePublishPopup {
+  --popup-h: initial;
+  --popup-w: initial;
+}
+
+/* Post Publish Actions modal */
+dialog:modal .PostPublish-form > div {
+  @apply h-full;
+
+  > * {
+    @apply col-[content-start/content-end];
+  }
+
+  > h2 {
+    @apply mt-6 h-7 content-center truncate text-sm font-semibold text-gray-700;
+  }
+
+  > btu-toggleable {
+    @apply relative mb-12 mt-1.5 after:absolute after:-bottom-6 after:-left-[var(--space)] after:-right-[var(--space)] after:h-px after:bg-gray-200;
+  }
+
+  > div:where(:has(~ .ActionBar)),
+  > :where(:has(+ .ActionBar)) {
+    @apply relative col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
+  }
+
+  > .ActionBar {
+    @apply col-[fullbleed-start/fullbleed-end];
+  }
+}
+
+/* Post Publish Actions modal - grid layout requires extra specificity */
+dialog:modal .Popup .Popup-content .Widget.has-ActionBarContent {
+  .PostPublish-form > div {
+    @apply grid-rows-[auto_minmax(0px,1fr)_auto];
+  }
+
+  &.has-StatusMessage .PostPublish-form > div {
+    @apply grid-rows-[auto_auto_minmax(0px,1fr)_auto];
+  }
+}
+
+/* Loader shows in search input when global search is first opening */
+.Page.is-searchOpening .Page-search > btu-search-input > label {
+  @apply before:btu-loader;
+}

package/src/legacy/tool-ui/src/Diff.css

@@ -0,0 +1,280 @@
+.Diff {
+  @apply bg-gray-50;
+}
+
+.Diff .TabBar {
+  @apply flex-shrink-0 pt-3;
+}
+
+.Diff-row {
+  @apply flex gap-6;
+}
+
+/* Styles for first Diff-row */
+.Diff .TabBar + .Diff-row,
+.Diff-diff .Diff-row:first-child {
+  @apply pt-6;
+}
+
+/* Styles for last visible Diff-row */
+.Diff-row:not(.TC-unselected):not(:has(~ .Diff-row:not(.TC-unselected))) {
+  @apply pb-6;
+
+  .Diff-current,
+  .Diff-comparison {
+    @apply rounded-b-lg border-b border-gray-200;
+  }
+}
+
+/* Styles for the heading when there are no differences */
+.Diff-row:has(+ .Message) > .Diff-heading {
+  @apply rounded-b-lg;
+}
+
+/* Styles for the no differences message */
+.Diff-row + .Message {
+  @apply !mx-6 !my-0 w-auto bg-white;
+}
+
+.Diff-heading,
+.Diff-current,
+.Diff-comparison {
+  @apply w-1/2 min-w-[400px] overflow-clip bg-white;
+}
+
+/* Hide full-width "Back" bar in favor of the close popup "X" icon */
+.Diff-title {
+  @apply hidden;
+}
+
+.Diff-container {
+  @apply max-h-[calc(100cqh_-_var(--page-header-h,_68px)_+_3px)] overflow-auto;
+}
+
+.Diff-diff {
+  @apply !flex w-fit flex-col !flex-nowrap md:w-full;
+}
+
+.Diff-diff > *:not(.TabBar) {
+  @apply px-6;
+}
+
+.Diff-heading {
+  @apply rounded-t-lg border border-gray-200;
+}
+
+.Diff-heading .Message {
+  @apply !m-0 flex flex-wrap items-start rounded-b-none !border-0 !bg-white px-6 py-3;
+}
+
+.Diff-heading .Message-icon {
+  @apply hidden;
+}
+
+.Diff-heading .Message .Diff-message > .Diff-revisionLabel {
+  @apply btu-heading-5 text-gray-900;
+}
+
+/* Use a badge for the Diff status. Default to primary blue. */
+.Diff-heading
+  .Message
+  .Diff-message
+  > span:first-child:not(.Diff-revisionLabel) {
+  @apply btu-badge-primary btu-badge-sm font-medium before:size-2 before:rounded-lg before:bg-[currentColor] before:content-[''];
+}
+
+.Diff-heading .Message.is-live .Diff-message > span:first-child {
+  @apply btu-badge-success;
+}
+
+.Diff-heading .Message.is-workflow .Diff-message > span:first-child {
+  @apply btu-badge-gray;
+}
+
+.Diff-heading .Message.is-draft .Diff-message > span:first-child {
+  @apply btu-badge-warning;
+}
+
+.Diff-heading .Message.is-archived .Diff-message > span:first-child {
+  @apply btu-badge-error;
+}
+
+.Diff-message {
+  @apply flex flex-wrap;
+}
+
+.Diff-message .Diff-revisionDate:first-child {
+  @apply order-2;
+}
+
+.Diff-message .Diff-revisionDate:not(:first-child) {
+  @apply btu-heading-5 order-1 mb-1 w-full text-gray-900;
+}
+
+.Diff-message .Diff-revisionUser {
+  @apply order-3 ms-2 font-medium text-gray-500;
+}
+
+.Diff-current,
+.Diff-comparison {
+  @apply border-x border-gray-200 px-6 py-4;
+
+  img {
+    @apply w-full;
+  }
+}
+
+.Diff-field {
+  @apply text-gray-900;
+
+  ins,
+  ins * {
+    @apply bg-success-200;
+  }
+
+  del,
+  del * {
+    @apply bg-error-200;
+  }
+
+  .Diff-insert,
+  ins .Diff-enhancement,
+  ins {
+    @apply rounded no-underline;
+  }
+
+  .Diff-delete,
+  del .Diff-enhancement,
+  del {
+    @apply rounded text-error-900 line-through;
+  }
+
+  del .Diff-enhancement {
+    @apply no-underline;
+  }
+
+  dt::after {
+    @apply content-[':'];
+  }
+
+  dd {
+    @apply mb-2 ms-2 inline-block;
+  }
+
+  a,
+  b,
+  i,
+  em,
+  code,
+  u,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  s,
+  ul,
+  ol {
+    @apply [all:revert];
+  }
+
+  a {
+    @apply rounded-[0.25rem];
+  }
+
+  ul,
+  ol {
+    @apply !ms-6 list-inside !overflow-clip rounded-[0.25rem] bg-inherit !pe-2;
+  }
+
+  table {
+    @apply min-w-full bg-inherit;
+
+    tbody > tr {
+      @apply hover:bg-inherit;
+    }
+
+    .Diff-enhancement {
+      @apply border border-gray-200;
+    }
+  }
+
+  td {
+    @apply border border-gray-200 p-2;
+  }
+
+  [data-diff-state] {
+    @apply relative cursor-pointer after:btu-icon after:btu-icon-info after:absolute after:right-4 after:top-4;
+  }
+}
+
+.Diff-enhancement {
+  @apply my-4 inline-block rounded-[0.25rem] bg-gray-50 p-4;
+}
+
+/* Note that using "@apply block" here would create a circular dependency error in tailwind. Using the css brackets instead. */
+.Diff-enhancement.block {
+  @apply [display:block];
+}
+
+.Diff-enhancement img {
+  @apply max-h-[300px] object-contain;
+}
+
+.Diff-enhancementLabel {
+  @apply mb-3 me-3 inline-block text-sm font-medium;
+}
+
+.Diff-enhancement {
+  &.rte2-style-brightspot-core-carousel-CarouselRichTextElement,
+  &.rte2-style-brightspot-core-image-ImageRichTextElement,
+  &.rte2-style-brightspot-core-module-ModuleRichTextElement,
+  &.rte2-style-brightspot-core-video-VideoRichTextElement,
+  &.rte2-style-brightspot-core-playlist-PlaylistRichTextElement,
+  &.rte2-style-brightspot-media-podcast-PodcastRichTextElement,
+  &.rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement,
+  &.rte2-style-brightspot-core-quote-QuoteRichTextElement {
+    @apply before:btu-icon before:me-2;
+  }
+
+  &.rte2-style-brightspot-core-carousel-CarouselRichTextElement {
+    @apply before:btu-icon-images;
+  }
+
+  &.rte2-style-brightspot-core-image-ImageRichTextElement {
+    @apply before:btu-icon-image;
+  }
+
+  &.rte2-style-brightspot-core-module-ModuleRichTextElement {
+    @apply before:btu-icon-blocks;
+  }
+
+  &.rte2-style-brightspot-core-video-VideoRichTextElement {
+    @apply before:btu-icon-video;
+  }
+
+  &.rte2-style-brightspot-core-playlist-PlaylistRichTextElement {
+    @apply before:btu-icon-list-video;
+  }
+
+  &.rte2-style-brightspot-media-podcast-PodcastRichTextElement {
+    @apply before:btu-icon-radio;
+  }
+
+  &.rte2-style-brightspot-core-quote-QuoteRichTextElement {
+    @apply before:btu-icon-quote;
+  }
+
+  &.rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement {
+    @apply before:btu-icon-chevrons-left-right-ellipsis;
+  }
+}
+
+.Diff-embed {
+  @apply ms-3 border-l border-gray-300 ps-3;
+}
+
+.Diff-row .CIG-label {
+  @apply mb-2 text-xs font-medium text-gray-500;
+}