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

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

@@ -1,1065 +0,0 @@
-:root {
-  --edit-banner-h: minmax(48px, auto);
-  --right-toolbar-w: calc(theme(iconSize.md) + theme(padding.12));
-  --contentForm-w-min: 360px;
-  --contentForm-w-max: calc(100cqw - var(--right-toolbar-w));
-  --contentPreview-w-min: 320px;
-  --contentWidget-w-min: 320px;
-  --contentForm-resized-safe-w: clamp(
-    var(--contentForm-w-min),
-    var(--contentForm-resized-w),
-    var(--contentForm-w-max)
-  );
-}
-
-@property --contentForm-resized-w {
-  syntax: '<length-percentage> | <flex>';
-  inherits: true;
-  initial-value: 0px;
-}
-
-.Page-content,
-.Popup {
-  --contentForm-w: minmax(var(--contentForm-w-min), 1fr);
-
-  &.is-previewing .ContentEdit-preview {
-    @apply transform-none;
-  }
-
-  &.is-previewing .ContentEdit-previewButtonWrapper.is-animating > button {
-    @apply !pointer-events-none after:btu-loader before:invisible after:absolute after:left-1/2 after:top-1/2 after:z-[2] after:size-[--iconSize-l] after:-translate-x-1/2 after:-translate-y-1/2;
-  }
-}
-
-.content-edit,
-.ContentEdit,
-.contentForm-aside,
-.ContentEdit-toolbarWrapper {
-  @apply contents;
-}
-
-.widget-publishingExtra,
-.widget-publishingHistory {
-  @apply hidden;
-}
-
-/* Hide title bar items when page is scrolled */
-.Page .Page-content:has(.ContentEdit.is-scrolled) {
-  @apply [--edit-banner-h:0];
-}
-
-.ContentEdit.is-scrolled > .contentForm-aside {
-  > .ContentEdit-top {
-    @apply py-2 ease-in;
-  }
-
-  > .ContentEdit-top,
-  > .ContentEdit-top > .ContentEdit-titleSeparator {
-    @apply mb-0 ease-in;
-  }
-
-  > .Message,
-  > .ContentEdit-top > .ContentEdit-overlay,
-  > .ContentEdit-top .ContentEdit-contentType--v5,
-  > .ContentEdit-top .ContentEdit-status--v5,
-  > .ContentEdit-top .WorkInProgressSaveStatus {
-    @apply hidden opacity-0 ease-in [transition-behavior:allow-discrete];
-  }
-}
-
-.ContentEdit > .contentForm-aside {
-  > .ContentEdit-top {
-    @apply transition-[padding] duration-300 ease-out;
-  }
-
-  > .ContentEdit-top > .ContentEdit-titleSeparator {
-    @apply transition-[margin] duration-300 ease-out;
-  }
-
-  > .Message,
-  > .ContentEdit-top > .ContentEdit-overlay,
-  > .ContentEdit-top .ContentEdit-contentType--v5,
-  > .ContentEdit-top .ContentEdit-status--v5,
-  > .ContentEdit-top .WorkInProgressSaveStatus {
-    @apply bg-opacity-100 transition-all duration-300 ease-out [transition-behavior:allow-discrete];
-  }
-}
-
-.ContentEdit-title {
-  @apply !hidden;
-}
-
-.ContentEdit-top + .Message {
-  @apply rounded-none border-b border-l-0 border-r-0 border-t-0 [grid-area:status] max-md:p-4 md:[grid-area:banner];
-}
-
-.ContentEdit-top + .Message > .WorkInProgressRestoredMessage-actions a {
-  @apply max-md:mt-3;
-}
-
-/*
-  Content edit title is moved in the DOM to have correct positioning.
-  Uses a flex layout with slightly different ordering for mobile vs larger screens.
-*/
-.ContentEdit-top {
-  @apply relative flex flex-wrap items-center gap-x-2 border-b p-4 [grid-area:top] md:justify-end md:p-6;
-
-  &:has(> .ContentEdit-workstream) {
-    @apply md:h-[171px];
-  }
-
-  .ContentEdit-overlay {
-    @apply -order-2 md:me-2;
-  }
-
-  /* Keep first row of ContentEdit-top left-aligned if WIPs are disabled */
-  &:not(.has-wips) .ContentEdit-overlay,
-  &:not(.has-wips):not(.has-overlay) .ContentEdit-status--v5 {
-    @apply md:me-auto;
-  }
-
-  .ContentEdit-titleSeparator {
-    @apply order-2 h-0 basis-full md:-order-1 md:mb-4;
-  }
-
-  .icon-action-publish {
-    @apply ms-auto max-md:order-2;
-
-    /* Hide viewers div if empty to avoid extra space from column-gap */
-    [data-rtc-edit-field-update-other-viewers]:empty {
-      @apply hidden;
-    }
-  }
-
-  .WorkInProgressSaveStatus {
-    @apply md:-order-2 md:me-auto;
-  }
-
-  .ContentEdit-draftUpdate + .ComboInput,
-  .ContentEdit-replaceMerge + .ComboInput {
-    @apply ms-auto w-fit max-md:order-1 max-md:mb-3;
-  }
-
-  .ContentEdit-saveButton {
-    @apply max-md:order-2;
-  }
-
-  .ContentEdit-publish,
-  .ContentEdit-workflowToggle,
-  .ContentEdit-newRevision,
-  .ContentEdit-restoreToggle {
-    @apply max-md:order-2;
-  }
-
-  .ContentEdit-publish.is-scheduling {
-    @apply max-md:contents;
-
-    .DateTimeInput {
-      @apply max-md:order-1 max-md:mb-3;
-    }
-
-    .ContentEdit-publishButton {
-      @apply max-md:order-2;
-    }
-  }
-
-  .ContentEdit-controls {
-    @apply max-md:order-2;
-  }
-}
-
-.ContentEdit-top .ContentEdit-newRevision {
-  @apply btu-button btu-button-gray btu-button-sm;
-}
-
-.ContentEdit-top:has(+ .Message) {
-  @apply border-b border-b-gray-200;
-}
-
-.ContentEdit-bottom {
-  @apply [&:not(:empty)]:border-t;
-}
-
-.contentForm-main {
-  @apply overflow-auto [grid-area:content] [scrollbar-gutter:stable] max-md:h-full md:overflow-y-auto md:overflow-x-hidden md:overscroll-none md:border-r md:[grid-area:left];
-}
-
-.ContentEdit-main {
-  @apply pb-4;
-}
-
-.ContentEdit-main .TC {
-  @apply __tc-bar-xs;
-}
-
-/* To reduce layout shift, this reserves space equal to the typical height of
-  a TabContainer for TabBars which render initially in the viewport.
-  eg: top of ContentEdit, sites-settings, and profile popup.
-  The selector to check for the presense of a TabBar is a future-state
-  which may or may not produce tabs. The follow up selector for "data-tabless"
-  indicates that there _will_ be tabs rendered in the TC. */
-.ContentEdit-main,
-.StandardForm,
-.StandardForm > .fixedScrollable {
-  /* TabContainers don't always need to render tabs. And are deemed "tabless" when they don't. */
-  & > .CIG.TC:not(:has(> .TabBar)):not([data-tabless]) {
-    @apply pt-[var(--tc-bar-h)];
-  }
-}
-
-.ContentEdit-main .TabBar > .TabBar-item {
-  @apply __tab-item-xs;
-}
-
-.ContentEdit-preview {
-  @apply visible relative bg-gray-100 transition-all @container/preview [transform:scaleX(.000001)] max-md:absolute max-md:bottom-[52px] max-md:z-[21] max-md:h-[calc(100dvh_-_52px)] max-md:w-full max-md:duration-700 md:origin-right md:border-r md:border-gray-200 md:[grid-area:preview];
-
-  iframe {
-    @apply absolute left-0 top-0 h-[var(--PreviewFrame-height,_calc(100%_/_var(--PreviewFrame-scale)))] w-[var(--ContentEdit-previewFrameWidth,_1920px)] origin-top-left overflow-clip;
-  }
-
-  dialog & {
-    @apply max-md:h-[unset] max-md:[grid-area:content] max-md:[position:unset];
-  }
-}
-
-.ContentEdit-preview[inert] {
-  @apply max-md:invisible max-md:top-[100dvh];
-}
-
-@scope (.ContentEdit-preview) {
-  & .PreviewFrame {
-    --gap: theme(spacing.2);
-    @apply grid h-full items-center overflow-auto bg-gray-50 pt-[--gap] [grid-template:'container-gap-top'_theme(spacing.2)_'controls'_min-content_'divider'_auto_'tools'_auto_'tools'_auto_'tools'_auto_'tools'_auto_'container-gap-bottom'_theme(spacing.2)_'space'_theme(spacing.2)_'preview'_1fr_/_theme(spacing.4)_[container-start]_theme(spacing.2)_[inner-start]_auto_auto_auto_1fr_auto_auto_[inner-end]_theme(spacing.2)_[container-end]_theme(spacing.4)] before:h-full before:rounded-2xl before:border before:border-gray-200 before:bg-white before:[grid-area:container-gap-top/container-start/container-gap-bottom/container-end] md:[--gap:theme(spacing.4)];
-  }
-
-  /* Device Width CI is present but there's no "view by url" CI or P2E toggle, so no need to show the divider and extra row on larger preview. */
-  &
-    .PreviewFrame:not(:has(.PreviewFrame-previewToEditToggle)):not(
-      :has(.PreviewFrame-typeControls [name='_previewPath'] + .ComboInput)
-    ):not(
-      :has(.PreviewFrame-typeControls [name='_mainObjectId'] + .ComboInput)
-    ) {
-    @apply @preview-lg:[grid-template:'container-gap-top'_theme(spacing.2)_'controls'_min-content_'container-gap-bottom'_theme(spacing.2)_'space'_theme(spacing.2)_'preview'_1fr_/_theme(spacing.4)_[container-start]_theme(spacing.2)_[inner-start]_auto_auto_auto_1fr_auto_auto_[inner-end]_theme(spacing.2)_[container-end]_theme(spacing.4)];
-
-    .PreviewFrame-moreActions {
-      @apply @preview-lg:hidden;
-    }
-  }
-
-  & .PreviewFrame:has(.PreviewFrame-moreActions[aria-expanded]) {
-    @apply after:mt-2 after:h-px after:w-full after:bg-gray-200 after:[grid-area:divider-start/container-start/divider-end/container-end];
-  }
-
-  & .PreviewFrame-typeDisplay {
-    @apply relative block size-full overflow-y-auto overflow-x-hidden rounded-none rounded-t-2xl border border-b-0 border-gray-200;
-  }
-
-  & .PreviewFrame-typeDisplay > iframe[name*='PreviewFrame'] {
-    @apply z-0 h-[var(--PreviewFrame-height,_calc(100%_/_var(--PreviewFrame-scale)))];
-  }
-
-  & .PreviewFrame-types,
-  & .PreviewFrame-typeForm,
-  & .PreviewFrame-typeFrame,
-  & .PreviewFrame-typeControlsContainer,
-  & .PreviewFrame-iFrameControlsForm,
-  & .PreviewFrame-typeControls,
-  & .PreviewFrame-typeActions {
-    @apply contents;
-  }
-
-  & .PreviewFrame-types .ComboInput {
-    @apply [grid-area:controls] [grid-column:inner-start];
-  }
-
-  & .PreviewFrame-moreActions {
-    @apply [grid-area:controls] [grid-column:4] @preview-lg/preview:[grid-column:5] @preview-xl/preview:[grid-column:6];
-  }
-
-  & .DateTimeInput {
-    @apply [grid-area:controls] [grid-column:7];
-  }
-
-  & .action-share {
-    @apply ms-2 [grid-area:controls] [grid-column:8];
-  }
-
-  /* Device/Responsive Width Comboinput */
-  & .deviceWidthSelect + .ComboInput {
-    @apply mt-2 [grid-area:tools] [grid-column:inner-start/inner-end] [grid-row:4] @preview-lg/preview:!my-0 @preview-lg/preview:ms-2 @preview-lg/preview:!inline-flex @preview-lg/preview:max-w-min @preview-lg/preview:[grid-column:4] @preview-lg/preview:[grid-row:2];
-  }
-
-  &
-    &:has(select[name='previewType'] + .ComboInput)
-    .deviceWidthSelect
-    + .ComboInput {
-    @apply ms-2 @preview-xl:ms-0;
-  }
-
-  &
-    .PreviewFrame:not(:has(select[name='previewType'] + .ComboInput))
-    .deviceWidthSelect
-    + .ComboInput {
-    @apply ms-0;
-  }
-
-  &
-    .PreviewFrame:not(.HasPreviewSelect):has(
-      select[name='previewType'] + .ComboInput
-    )
-    .deviceWidthSelect
-    + .ComboInput {
-    @apply ms-0;
-  }
-
-  /* "Preview Type" ComboInput */
-  & [name='previewType'] + .ComboInput {
-    @apply me-2;
-  }
-
-  /* "View by URL" Comboinput */
-  & [name='_previewPath'] + .ComboInput {
-    @apply mt-2 [grid-area:tools] [grid-column:inner-start/inner-end] [grid-row:5];
-  }
-
-  & .PreviewFrame.HasPreviewSelect .PreviewFrame-moreActions {
-    @apply ms-2;
-  }
-
-  &
-    .PreviewFrame:not(.HasPreviewSelect):has(.deviceWidthSelect + .ComboInput)
-    .PreviewFrame-moreActions {
-    @apply @preview-lg:ms-2;
-  }
-
-  & .PreviewFrame:not(.HasPreviewSelect) .PreviewFrame-moreActions {
-    @apply ms-0;
-  }
-
-  /* "View Reference" Comboinput */
-  & [name='_mainObjectId'] + .ComboInput {
-    @apply mt-2 [grid-area:tools] [grid-column:inner-start/inner-end] [grid-row:6];
-  }
-
-  & .PreviewFrame-previewToEditToggle {
-    @apply [grid-area:tools] [grid-column:inner-start/inner-end] [grid-row:7];
-  }
-
-  /* The toggle looks better with the label on the right */
-  & .PreviewFrame-previewToEditToggle label {
-    @apply flex-row-reverse;
-  }
-
-  /* "View by URL" Comboinput is present, so show the toggle until we reach XL size, then hide the toggle. */
-  &
-    .PreviewFrame.HasPreviewSelect:has(
-      .PreviewFrame-typeControls [name='_previewPath'] + .ComboInput
-    )
-    .PreviewFrame-moreActions {
-    @apply @preview-lg/preview:block;
-  }
-
-  &
-    .PreviewFrame.HasPreviewSelect:has(.PreviewFrame-previewToEditToggle)
-    .PreviewFrame-moreActions {
-    @apply !block;
-  }
-
-  & .PreviewFrame-typeDisplay {
-    @apply [grid-area:preview] [grid-column:container-start/container-end];
-  }
-
-  & .PreviewFrame-typeControls .ComboInput:not(:has(~ .ComboInput)) {
-    @apply relative;
-  }
-
-  /*
-  Matches controls which are hidden until the "more" button is expanded.
-  */
-  & .PreviewFrame-typeControls > .ComboInput,
-  .PreviewFrame-typeFrame
-    .PreviewFrame-typeActions
-    > *:not(.DateTimeInput):not(.action-share) {
-    @apply hidden;
-  }
-
-  /*
-  Matches an active "more" button and shows the hidden controls.
-  */
-  & .PreviewFrame:has(.PreviewFrame-moreActions[aria-expanded]) {
-    .PreviewFrame-typeControls > .ComboInput,
-    .PreviewFrame-typeFrame
-      .PreviewFrame-typeActions
-      > *:not(.DateTimeInput):not(.action-share) {
-      @apply inline-flex;
-    }
-  }
-  /*
-  When the hidden controls activated by the "more" button are shown,
-  and the preview-to-edit toggle is not the only visible control,
-  remove it's top margin, since the other controls will have a top margin.
-  */
-  &
-    .PreviewFrame-typeControls:has(.ComboInput)
-    + .PreviewFrame-typeActions
-    .PreviewFrame-previewToEditToggle {
-    @apply mb-2 mt-4;
-  }
-}
-
-.ContentEdit-toolbar {
-  @apply z-30 w-full bg-white px-4 py-2 [grid-area:bottom] max-md:flex max-md:flex-nowrap max-md:justify-evenly max-md:overflow-hidden max-md:overflow-x-auto max-md:border-t max-md:border-t-gray-200 md:z-10 md:block md:bg-gray-50 md:p-4 md:[grid-area:toolbar] md:[width:var(--ContentEdit-toolbarWidth)] md:[&_>_li]:mb-2;
-
-  button {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray;
-  }
-
-  button.is-error {
-    @apply btu-button-error;
-  }
-
-  button[data-icon-button-name='manage_search'] {
-    @apply md:absolute md:bottom-0 md:mb-8;
-  }
-
-  button[data-icon-button-name] {
-    @apply before:btu-icon-via-mask before:btu-icon-gradient-primary;
-
-    &.ContentEdit-previewButton {
-      @apply before:btu-icon-via-mask-eye;
-
-      .is-previewing & {
-        @apply btu-button-pressed active:before:btu-icon-via-mask-eye-closed; /* wink */
-      }
-    }
-
-    &.is-error {
-      @apply before:bg-error-gradient;
-    }
-  }
-
-  button.is-active {
-    @apply btu-button-pressed;
-
-    &:hover,
-    &:focus {
-      --IconButton-name: 'close';
-    }
-  }
-}
-
-.ContentEdit-left {
-  @apply relative;
-}
-
-.ContentEdit-left.is-openDrawer {
-  @apply pb-[350px];
-}
-
-.ContentEdit-right {
-  @apply hidden overflow-y-auto overflow-x-hidden bg-gray-50 [grid-area:content] max-md:absolute max-md:bottom-[52px] max-md:z-10 max-md:h-[calc(100dvh-52px)] max-md:w-full md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:w-auto md:border-r md:border-solid md:[grid-area:right];
-
-  &:has(.ContentEditDrawer-widget) {
-    @apply top-auto;
-  }
-
-  .Widget,
-  .Widget-title {
-    @apply bg-gray-50;
-  }
-
-  .Conversation-newPost .ProseMirror {
-    /* TODO: Copy over Conversation-newPost max height constraint from ContentEdit.less
-    if it's still relevant once ProseMirror styles are done */
-  }
-
-  .CIG .ComboInput {
-    @apply w-full;
-  }
-
-  /* Publishing tools styles */
-  /* URLs Widget */
-  .widget-urlsAutomatic {
-    @apply mt-4 text-sm text-gray-900 [overflow-wrap:anywhere];
-  }
-
-  /* This boost in specificity is needed to override
-  the default styles of the widget in ContentEdit.css */
-  .Widget :is(.widget-urls, .widget-urlsRepeatable) {
-    @apply col-span-full;
-  }
-
-  .widget-urlsItem {
-    @apply border-b px-[--space] pb-4;
-  }
-
-  .addButtonContainer.Repeatable-controls {
-    @apply flex px-[--space] py-3;
-  }
-
-  .Repeatable-add {
-    @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-plus;
-  }
-
-  .widget-urlsItem > fieldset {
-    @apply gap-2;
-  }
-
-  /* Based on the design, the two dropdowns are on the same line */
-  .widget-urlsItem > fieldset > .ComboInput {
-    @apply w-[calc(50%-theme(spacing.1))];
-  }
-
-  /* url link label */
-  .widget-urlsItemLabel {
-    @apply flex w-full items-start gap-2 text-sm font-medium [overflow-wrap:anywhere];
-
-    > a {
-      @apply grow;
-    }
-  }
-
-  /* remove button next to a widget url item */
-  .widget-urlsItemRemove > input[type='checkbox'] {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs border-none after:btu-icon after:btu-icon-x;
-  }
-
-  /* url item components in removed state */
-  .widget-urlsItem.is-removing > fieldset {
-    @apply bg-error-50;
-  }
-
-  .widget-urlsItem.is-removing .widget-urlsItemLabel > a {
-    @apply pointer-events-none text-error-400 line-through;
-  }
-
-  .widget-urlsItem.is-removing .ComboInput {
-    @apply pointer-events-none border-none bg-transparent;
-  }
-
-  .widget-urlsItem.is-removing .ComboInput-label {
-    @apply text-error-400 line-through;
-  }
-
-  .widget-urlsItem.is-removing .ComboInput-icon {
-    @apply hidden;
-  }
-
-  .widget-urlsItem.is-removing .widget-urlsItemRemove > input[type='checkbox'] {
-    @apply after:btu-icon-undo after:text-inherit;
-  }
-
-  /* Sites access widget */
-  .ContentEditSites-access select.ContentEditSites-someSelect + .ComboInput {
-    @apply mt-4;
-  }
-
-  .ContentEditSites-access
-    select.ContentEditSites-someSelect[disabled]
-    + .ComboInput {
-    @apply hidden;
-  }
-
-  /* vertical spacing around items inside right panel widgets */
-  .InputRow:last-child,
-  .CIG-row:last-child {
-    @apply pb-4;
-  }
-
-  /* have CIG-row spacing match InputRow spacing inside right panel widgets */
-  .CIG-row {
-    --CIG-row-space: 1rem;
-  }
-
-  .Widget .LinkTable {
-    @apply mt-4 [&:last-child]:mb-4;
-  }
-}
-
-.ContentEdit-right-top {
-  @apply sticky top-0 z-[11] flex items-center justify-between border-b border-b-gray-200 bg-gray-50 px-4 py-2;
-
-  > .ContentEdit-right-title {
-    @apply btu-heading-5 capitalize text-gray-900;
-  }
-
-  > .ContentEdit-right-close {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-x;
-  }
-}
-
-.ContentEdit-right.is-visible {
-  @apply block;
-}
-
-.ContentEdit-overlayList,
-.ContentEdit-controlsList {
-  @apply Dropdown z-[400] max-w-[100vw] overflow-y-auto;
-}
-
-.ContentEdit-overlayList.is-open,
-.ContentEdit-controls.is-open .ContentEdit-controlsList {
-  @apply Dropdown-is-open;
-}
-
-.ContentEdit-title--v5 {
-  @apply contents;
-
-  > span:not([class]) {
-    @apply truncate;
-  }
-
-  /* Content title */
-  .ContentEdit-contentTitle--v5 {
-    @apply btu-heading-5 my-3 w-full truncate not-italic text-gray-900 md:btu-heading-3 md:my-0 md:me-auto md:max-w-fit md:flex-1 md:pe-2;
-  }
-
-  /* Content type */
-  .ContentEdit-contentType--v5 {
-    @apply btu-badge-gray btu-badge-sm -order-2 block flex-1 truncate md:me-2 md:@6xl/page-header:inline;
-  }
-
-  /* Content status  */
-  .ContentEdit-status--v5 {
-    @apply -order-2 block min-w-[unset] flex-1 truncate before:me-1.5 before:inline-block md:me-2;
-  }
-}
-
-/* Content status badges */
-.ContentEdit-status--v5 {
-  @apply btu-badge-gray btu-badge-sm min-w-max font-medium before:size-2 before:rounded-lg before:bg-[currentColor];
-
-  /* Support custom workflow colors */
-  &[data-status-color] {
-    --foreground: oklch(
-      from var(--status-color) clamp(0.3, calc(l / 1.2), 0.5) c h
-    );
-    --background: oklch(
-      from var(--foreground) clamp(0.908, calc(l * 1.5), 0.98) c h
-    );
-    @apply btu-badge-foreground-[--foreground] btu-badge-background-[--background];
-  }
-}
-
-/* Published/updated/live */
-.ContentEdit.is-notNew:where(.is-updated, .is-live) {
-  .ContentEdit-status--v5 {
-    @apply btu-badge-success;
-  }
-}
-
-/* Draft/new */
-.ContentEdit.is-new,
-.ContentEdit:where(.is-draft:not(.is-revision)) {
-  .ContentEdit-status--v5 {
-    @apply btu-badge-primary;
-  }
-}
-
-/* Revision */
-.ContentEdit-status--v5.is-revision,
-.ContentEdit.is-revision .ContentEdit-status--v5 {
-  @apply btu-badge-purple;
-}
-
-/* Scheduled */
-.ContentEdit-status--v5.is-scheduled,
-.ContentEdit.is-scheduled .ContentEdit-status--v5 {
-  @apply btu-badge-warning;
-}
-
-/* Archived */
-.ContentEdit-status--v5.is-archived,
-.ContentEdit.is-archived .ContentEdit-status--v5 {
-  @apply btu-badge-error;
-}
-
-.ContentEdit-controlsToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
-
-  &.is-active {
-    @apply btu-button-pressed;
-  }
-}
-
-.ContentEdit-bar {
-  .ContentEdit-publish {
-    @apply flex gap-2 bg-transparent shadow-none;
-
-    .ContentEdit-publishButton {
-      @apply btu-button btu-button-success btu-button-sm;
-    }
-  }
-
-  .ContentEdit-publish {
-    > [name='newSchedule'],
-    .ContentEdit-draftUpdate {
-      & + .ComboInput {
-        @apply hidden;
-      }
-    }
-
-    > .ContentEdit-publishButton {
-      .is-locked & {
-        @apply hidden;
-      }
-
-      .is-save & {
-        @apply btu-button btu-button-success;
-      }
-    }
-
-    &.is-scheduling {
-      > [name='newSchedule'],
-      .ContentEdit-draftUpdate {
-        & + .ComboInput {
-          @apply inline-flex;
-        }
-      }
-
-      > .ContentEdit-publishButton {
-        @apply btu-button btu-button-warning;
-      }
-    }
-  }
-
-  > .icon-action-publish {
-    @apply relative flex flex-row-reverse items-center justify-end md:contents;
-
-    &:has(> [data-rtc-edit-field-update-other-viewers]:not(:empty)) {
-      @apply justify-between gap-2;
-    }
-
-    .WorkInProgressSaveStatus {
-      &:not(:empty) {
-        @apply btu-badge-gray btu-badge-sm 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-h-[calc(20px_+_2*0.13rem)] max-md:max-w-[calc(20px_+_1rem)] max-md:overflow-clip;
-      }
-
-      &[data-status='deleted'] {
-        @apply pointer-events-none;
-      }
-    }
-  }
-
-  .ContentEdit-saveButton {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm uppercase before:btu-icon before:btu-icon-save;
-  }
-
-  .ContentEdit-overlay {
-    @apply btu-badge-gray btu-badge-sm relative block flex-1 truncate !pe-7 after:btu-icon after:btu-icon-chevron-down after:absolute after:right-2 after:top-[5px] after:btu-icon-xs;
-  }
-}
-
-.EditFieldUpdateViewers-viewer:has(.Avatar) {
-  --avatar-size: theme('avatar.size.xs');
-}
-
-.EditFieldUpdateViewers-some {
-  @apply flex flex-nowrap gap-2;
-}
-
-.ContentEdit-resizeWrapper {
-  --resize-hitbox-w: 8px;
-  @apply pointer-events-none invisible absolute z-20 !col-[fullbleed-end] w-[--resize-hitbox-w] bg-transparent [inset-block-end:0] [inset-block-start:0] [inset-inline-start:calc(100%_-_var(--resize-hitbox-w))] md:pointer-events-auto md:visible md:cursor-col-resize;
-}
-
-.ContentEdit-resizeWrapper:hover .ContentEdit-resizeHandle {
-  @apply bg-primary-500;
-}
-
-.ContentEdit-resizeHandle {
-  --resize-handle-w: 2px;
-  @apply pointer-events-none fixed h-full w-[var(--resize-handle-w)] translate-x-[calc(var(--resize-hitbox-w)_-_var(--resize-handle-w))] transition-all;
-}
-
-/* Banners / Messages styling in Content edit form */
-.ContentEdit {
-  /* updates padding to vertically center text when revision badge label is present inside message */
-  .Message:has(.ContentEdit-revisionLabel) {
-    @apply py-[13px];
-  }
-
-  /* Scheduled content */
-  &.is-draft,
-  &.is-draft.is-workflow,
-  &.is-scheduled {
-    .Message:where(.is-revision) {
-      --Revision-revisionColor: theme(colors.warning.200);
-      --Revision-revisionTextColor: theme(colors.warning.700);
-      --Revision-revisionEmphasisColor: theme(colors.warning.800);
-      --Revision-revisionBackgroundColor: theme(colors.warning.25);
-
-      .ContentEdit-revisionLabel {
-        @apply btu-badge-warning;
-      }
-    }
-  }
-
-  /* Archived content */
-  &.is-archived .Message:where(.is-revision) {
-    --Revision-revisionColor: theme(colors.error.200);
-    --Revision-revisionTextColor: theme(colors.error.600);
-    --Revision-revisionEmphasisColor: theme(colors.error.700);
-    --Revision-revisionBackgroundColor: theme(colors.error.25);
-
-    .ContentEdit-revisionLabel {
-      @apply btu-badge-error;
-    }
-  }
-
-  /* Published/updated/live content */
-  &.is-updated .Message:where(.is-revision),
-  &.is-live .Message:where(.is-revision) {
-    --Revision-revisionColor: theme(colors.success.200);
-    --Revision-revisionTextColor: theme(colors.success.600);
-    --Revision-revisionEmphasisColor: theme(colors.success.700);
-    --Revision-revisionBackgroundColor: theme(colors.success.25);
-
-    .ContentEdit-revisionLabel {
-      @apply btu-badge-success;
-    }
-  }
-
-  /* Workflow status */
-  &.is-workflow .Message:where(.is-revision) {
-    --Revision-revisionColor: theme(colors.gray.200);
-    --Revision-revisionTextColor: theme(colors.gray.600);
-    --Revision-revisionEmphasisColor: theme(colors.gray.700);
-    --Revision-revisionBackgroundColor: theme(colors.gray.25);
-
-    .ContentEdit-revisionLabel {
-      @apply btu-badge-gray;
-    }
-  }
-
-  /* Revisions */
-  &.is-revision .Message:where(.is-revision) {
-    --Revision-revisionColor: theme(colors.purple.200);
-    --Revision-revisionTextColor: theme(colors.purple.600);
-    --Revision-revisionEmphasisColor: theme(colors.purple.700);
-    --Revision-revisionBackgroundColor: theme(colors.purple.25);
-
-    .ContentEdit-revisionLabel {
-      @apply btu-badge-purple;
-    }
-  }
-
-  /* Support custom workflow colors */
-  .Message[data-status-color] {
-    --foreground: oklch(
-      from var(--status-color) clamp(0.3, calc(l / 1.2), 0.5) c h
-    );
-    --background: oklch(
-      from var(--foreground) clamp(0.908, calc(l * 1.5), 0.98) c h
-    );
-
-    .ContentEdit-revisionLabel {
-      @apply btu-badge-foreground-[--foreground] btu-badge-background-[--background];
-    }
-  }
-}
-
-.ContentEdit-revisionInfo {
-  @apply flex grow flex-wrap items-center text-sm;
-
-  /* Visibility label defaults to gray but is reset above according to content status */
-  > .ContentEdit-revisionLabel {
-    @apply btu-badge-gray btu-badge-sm me-2 font-medium before:me-1.5 before:inline-flex before:size-2 before:rounded-lg before:bg-current;
-  }
-
-  > .ContentEdit-revisionName > .ContentEdit-revisionIcon,
-  > .ContentEdit-revisionUser {
-    @apply after:btu-icon after:btu-icon-dot;
-  }
-
-  .ContentEdit-revisionUser + .ContentEdit-revisionUser {
-    @apply after:content-none;
-  }
-
-  > .ContentEdit-revisionDate {
-    @apply order-1;
-  }
-}
-
-.ContentEdit-revisionActions {
-  @apply text-[--Revision-revisionEmphasisColor] max-md:mt-3;
-
-  > a {
-    white-space: nowrap;
-  }
-
-  > a:not(:first-child) {
-    margin-left: var(--gap-l);
-  }
-}
-
-/* Workstream banner & content edit styles containing the banner*/
-.ContentEdit-workstream {
-  @apply -order-3 m-[calc(theme(spacing.4)*-1)] mb-4 grid w-[calc(100%+theme(spacing.4)*2)] items-start gap-3 border-b bg-gray-25 p-4 text-sm md:m-[calc(theme(spacing.6)*-1)] md:mb-6 md:w-[calc(100%+theme(spacing.6)*2)] md:grid-cols-[1fr_auto_auto] md:gap-4 md:py-3.5;
-}
-
-.ContentEdit-workstreamMessage {
-  @apply grow [&>a]:text-inherit;
-}
-
-.ContentEdit-workstreamProgress {
-  @apply flex flex-wrap items-center gap-2 max-md:w-full md:gap-4;
-
-  > .RPB {
-    @apply hidden;
-  }
-
-  .progressBar {
-    @apply relative h-2 w-40 rounded-lg bg-gray-100 before:absolute before:h-full before:w-[--progressPct] before:rounded-lg before:bg-primary-600 max-md:w-full;
-  }
-
-  .progress {
-    @apply h-auto rounded-none bg-transparent;
-  }
-
-  .ContentEdit-workstreamProgressText {
-    @apply text-gray-500 max-md:-order-1 max-md:w-full;
-
-    > strong {
-      @apply font-normal;
-    }
-  }
-}
-
-.ContentEdit-workstreamActions {
-  @apply flex items-center justify-end gap-4 max-md:w-full;
-}
-
-.ContentEdit-workstreamSkip,
-.ContentEdit-workstreamStop {
-  @apply btu-button btu-button-fill-none btu-button-gray btu-button-container-none;
-}
-
-/* Workflow */
-.ContentEdit-workflowToggle {
-  @apply btu-button btu-button-primary;
-
-  .is-open {
-    @apply after:btu-icon-chevron-up;
-  }
-}
-
-.ContentEdit-workflow {
-  @apply opacity-0 [scale:0] @dialog-md:[--popup-h:55cqh] @dialog-md:[--popup-w:45cqw] @dialog-lg:[--popup-h:45cqh] @dialog-lg:[--popup-w:35cqw];
-}
-
-.ContentEdit-workflow .ContentEdit-publish {
-  @apply flex justify-end gap-3 py-4;
-}
-
-.ContentEdit-workflow .ContentEdit-publish .ContentEdit-publishButton {
-  @apply btu-button-success btu-button-md;
-}
-
-.ContentEdit-workflowWrapper {
-  @apply contents;
-}
-
-.ContentEdit-workflowTitle {
-  @apply btu-heading-5 border-b px-6 py-4 text-gray-900;
-}
-
-.ContentEdit-workflowBody {
-  --space: theme(spacing.6);
-
-  @apply border-b p-6;
-
-  .CIG-row:not(.TC-unselected) {
-    @apply mb-[--CIG-row-space] mt-0;
-  }
-
-  .ProseMirrorToolbar {
-    @apply -top-6;
-  }
-}
-
-.ContentEdit-workflowActions {
-  @apply flex flex-col gap-4;
-
-  > .Conversation-add-comment {
-    @apply my-3 me-auto;
-  }
-
-  > button {
-    @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
-  }
-
-  > button.is-dominant {
-    @apply btu-button-primary;
-  }
-
-  .ContentEdit-workflowScheduleLink {
-    @apply mr-2 inline-block;
-
-    &.is-empty {
-      @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-calendar;
-    }
-  }
-
-  &.is-scheduling .ContentEdit-publishButton {
-    @apply btu-button-warning;
-  }
-}
-
-button.ContentEdit-workflowLink {
-  @apply btu-button btu-button-fill-none btu-button-primary m-6 !ms-auto btu-button-container-none after:btu-icon after:btu-icon-arrow-right after:ml-2;
-}
-
-[data-name='publishOverride'] button.ContentEdit-workflowLink {
-  @apply !me-auto !ms-6 before:btu-icon before:btu-icon-arrow-left before:mr-2 after:hidden;
-}
-
-/* Hide workflow link when not in publish override mode */
-.ContentEdit-workflow:not(.is-publishOverride) .ContentEdit-workflowLink {
-  @apply hidden;
-}
-
-.ContentEdit-workflow > .ContentEdit-workflowWrapper:not(.is-active) {
-  @apply hidden;
-}
-
-.ContentEdit-overrideMessage {
-  @apply text-sm;
-}
-
-/* Restore */
-.ContentEdit-restoreToggle {
-  @apply btu-button btu-button-primary after:btu-icon after:btu-icon-chevron-down;
-
-  .is-open {
-    @apply after:btu-icon-chevron-up;
-  }
-}
-
-.ContentEdit-restore {
-  @apply Dropdown;
-}
-
-.ContentEdit-restore.is-open {
-  @apply Dropdown-is-open;
-}
-
-.ContentEdit-restoreWrapper,
-.ContentEdit-restoreBody {
-  @apply contents;
-}
-
-.ContentEdit-restoreTitle {
-  @apply hidden;
-}
-
-form.is-submitting .ContentEdit-restoreToDraft > button.is-clicked,
-form.is-submitting .ContentEdit-restoreToLive > button.is-clicked {
-  @apply before:content-none;
-}
-
-/* Copied from v4 ContentEdit.less */
-.state-disabled {
-  @apply pointer-events-none opacity-50;
-}