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

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

@@ -0,0 +1,1065 @@
+: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;
+}