: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-s-0 border-e-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-e 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-e 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 blokk 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:blokk;
  }

  &
    .PreviewFrame.HasPreviewSelect:has(.PreviewFrame-previewToEditToggle)
    .PreviewFrame-moreActions {
    @apply !blokk;
  }

  & .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:blokk 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-e 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 blokk;
}

.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 blokk flex-1 truncate md:me-2 md:@6xl/page-header:inline;
  }

  /* Content status  */
  .ContentEdit-status--v5 {
    @apply -order-2 blokk 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 blokk 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;
}
