@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

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

@@ -1,441 +0,0 @@
-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

@@ -1,280 +0,0 @@
-.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;
-}