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

package/src/legacy/tool-ui/src/main/webapp/v4/ContentEdit.less

@@ -1,1512 +0,0 @@
-@import (reference) url('./Dropdown.less');
-
-.Page-content,
-.Popup {
-  --ContentEdit-toolbarWidth: calc(
-    var(--Icon-size) + var(--gap-m) * 2 + var(--gap-s) * 2
-  );
-  --ContentEdit-toolbarHeight: calc(
-    var(--gap-m) * 2 + var(--Icon-size) + var(--gap-s) * 2
-  );
-  --ContentEdit-workstreamHeight: 0px;
-  --ContentEdit-barTop: calc(
-    var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight)
-  );
-  --ContentEdit-barHeight: calc(
-    var(--gap-m) * 2 + var(--lineHeight-xl) + var(--ContentEdit-barBorderHeight)
-  );
-  --ContentEdit-barBorderHeight: 4px;
-  --ContentEdit-height: calc(
-    100dvh - var(--ContentEdit-workstreamHeight) - var(--ContentEdit-barHeight)
-  );
-  --ContentEdit-previewWidth: 100vw;
-
-  &.is-workstream {
-    --ContentEdit-workstreamHeight: calc(
-      var(--gap-m) * 2 + var(--lineHeight-m)
-    );
-  }
-
-  .is-asideHidden {
-    .ContentEdit-preview {
-      left: 0;
-      position: absolute;
-      top: calc(var(--ContentEdit-barHeight));
-      width: 100%;
-    }
-
-    .ContentEdit-right.is-visible {
-      display: none;
-    }
-  }
-}
-
-.Page.is-alertBroadcasting .Page-content .ContentEdit {
-  --ContentEdit-height: calc(
-    100dvh - var(--ContentEdit-workstreamHeight) - var(--ContentEdit-barHeight) -
-      var(--Page-broadcastHeight)
-  );
-}
-
-.Popup {
-  --ContentEdit-barTop: calc(
-    var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight) +
-      var(--gap-m) * 2 + var(--lineHeight-m)
-  );
-
-  .ContentEdit {
-    height: calc(
-      100vh - var(--ContentEdit-barTop) - var(--ContentEdit-barBorderHeight)
-    );
-
-    &.is-inGrid {
-      height: unset;
-      margin: 0;
-    }
-  }
-
-  .Widget .ContentEdit:not(.is-inGrid) {
-    margin: calc(0px - var(--gap-l));
-  }
-}
-
-// Live Blog
-.objectId-edit-heading {
-  .Popup-heading;
-}
-
-.popup-objectId-edit-heading {
-  display: block;
-  overflow: hidden;
-  padding: var(--gap-m) calc(var(--gap-l) * 2 + var(--Icon-size)) var(--gap-m)
-    var(--gap-l);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ContentEdit {
-  background: var(--color-white);
-  display: grid;
-  grid-template:
-    'left' 1fr
-    'toolbar' auto ~'/'
-    minmax(0, 1fr);
-  height: var(--ContentEdit-height);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding-top: calc(
-    var(--ContentEdit-workstreamHeight) + var(--ContentEdit-barHeight)
-  );
-
-  &.is-live {
-    --Revision-revisionColor: var(--color-green5);
-    --Revision-revisionActiveColor: var(--color-green6);
-    --Revision-revisionTextColor: var(--color-black);
-    --Revision-revisionBackgroundColor: var(--color-green1);
-  }
-
-  &.is-archived {
-    --Revision-revisionColor: var(--color-red6);
-    --Revision-revisionActiveColor: var(--color-red6);
-    --Revision-revisionTextColor: var(--color-white);
-    --Revision-revisionBackgroundColor: var(--color-red3);
-  }
-
-  &.is-updated {
-    --Revision-revisionColor: var(--color-green3);
-    --Revision-revisionActiveColor: var(--color-green4);
-    --Revision-revisionTextColor: var(--color-black);
-    --Revision-revisionBackgroundColor: var(--color-green1);
-  }
-
-  &.is-draft,
-  &.is-draft.is-workflow,
-  &.is-scheduled {
-    --Revision-revisionColor: var(--color-yellow3);
-    --Revision-revisionActiveColor: var(--color-yellow4);
-    --Revision-revisionTextColor: var(--color-black);
-    --Revision-revisionBackgroundColor: var(--color-yellow1);
-  }
-
-  &.is-workflow {
-    --Revision-revisionColor: var(--color-gray6);
-    --Revision-revisionActiveColor: var(--color-gray7);
-    --Revision-revisionTextColor: var(--color-black);
-    --Revision-revisionBackgroundColor: var(--color-gray3);
-  }
-
-  &:has(.ContentEdit-right.is-visible .ContentEditDrawer-widget)
-    .ContentEdit-left {
-    margin-bottom: calc(
-      var(--gap-l) * 7 + calc(var(--ContentEdit-toolbarHeight))
-    );
-  }
-
-  @keyframes scaleAndSpin {
-    from {
-      transform: scale(1.1) rotate(0deg);
-    }
-
-    to {
-      transform: scale(1.1) rotate(360deg);
-    }
-  }
-}
-
-.ContentEdit-toolbar {
-  background: var(--color-white);
-  border: 1px solid var(--color-gray2);
-  border-width: 1px 0 0;
-  display: flex;
-  flex-wrap: nowrap;
-  grid-area: toolbar;
-  justify-content: space-evenly;
-  padding: var(--gap-m);
-  width: auto;
-  z-index: 11;
-
-  button.is-active {
-    .IconButton.is-focus;
-
-    &:hover,
-    &:focus {
-      --IconButton-name: 'close';
-    }
-  }
-
-  button.is-error {
-    border: 1px solid var(--color-red6);
-    border-radius: 50%;
-    color: var(--color-red6);
-  }
-}
-
-.ContentEdit-right {
-  --ContentEdit-titleHeight: calc(var(--gap-s) * 4 + var(--iconSize-s));
-
-  background: var(--color-white);
-  bottom: var(--ContentEdit-toolbarHeight);
-  display: none;
-  grid-area: right;
-  overflow: auto;
-  position: fixed;
-  right: 0;
-  top: calc(var(--ContentEdit-barTop) + var(--ContentEdit-barHeight));
-  width: 100dvw;
-  z-index: 10;
-
-  &:has(.ContentEditDrawer-widget) {
-    top: auto;
-  }
-
-  &[data-right-tab='chat_bubble'] {
-    --contentRight-width: 360px;
-
-    > .frame.loaded {
-      height: calc(
-        100% - var(--ContentEdit-titleHeight) - var(--borderWidth-thin)
-      );
-
-      .Widget {
-        height: 100%;
-        padding: 0;
-      }
-    }
-  }
-
-  // newPost container should be max half the height of conversations widget
-  .Conversation-newPost {
-    .CIG-small {
-      .ProseMirror {
-        max-height: calc(
-          ((var(--ContentEdit-height) - var(--ContentEdit-barHeight)) / 2) -
-            var(--ProseMirror-toolbar-h) - (var(--Widget-padding) * 2) -
-            var(--gap-l)
-        );
-        overflow-y: auto;
-      }
-    }
-  }
-
-  .ContentEdit-right-top {
-    position: sticky;
-    top: 0;
-    z-index: 11;
-  }
-
-  .Widget-title {
-    top: var(--ContentEdit-titleHeight);
-  }
-}
-
-.ContentEdit-right-top {
-  align-items: center;
-  background: var(--color-gray2);
-  border-bottom: 1px solid var(--color-gray3);
-  display: flex;
-  justify-content: space-between;
-  padding: var(--gap-s) var(--gap-l);
-  padding-right: calc(var(--gap-l) - var(--gap-s));
-
-  > .ContentEdit-right-title {
-    .Text.is-m;
-
-    font-weight: bold;
-    text-transform: capitalize;
-  }
-
-  > .ContentEdit-right-close {
-    --Icon-size: var(--iconSize-s);
-  }
-}
-
-.ContentEdit-right.is-visible {
-  display: block;
-}
-
-.ContentEdit-workstream {
-  .Link.is-white;
-
-  align-items: center;
-  background: var(--color-gray6);
-  color: var(--color-white);
-  display: flex;
-  height: var(--ContentEdit-workstreamHeight);
-  left: 0;
-  padding: 0 var(--gap-l);
-  position: fixed;
-  right: 0;
-  top: var(--Page-headerBottom);
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-.ContentEdit-workstreamProgress {
-  --RPB-size: var(--iconSize-m);
-
-  min-height: var(--Text-height);
-  order: -1;
-  padding-left: var(--RPB-size);
-  position: relative;
-
-  .RPB {
-    display: inline-block;
-    left: 0;
-    position: absolute;
-    top: calc((var(--Text-height) - var(--RPB-size)) / 2);
-
-    .RPB-bg {
-      stroke: var(--color-gray5);
-    }
-
-    .RPB-fg {
-      stroke: var(--color-gray2);
-    }
-  }
-}
-
-.ContentEdit-workstreamProgressText {
-  display: none;
-}
-
-.ContentEdit-workstreamMessage {
-  margin-left: var(--gap-s);
-  max-width: calc(100% - 100px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ContentEdit-workstreamActions {
-  flex: auto;
-  text-align: right;
-
-  > * {
-    display: inline-block;
-  }
-}
-
-.ContentEdit-workstreamSkip,
-.ContentEdit-workstreamStop {
-  margin-left: var(--gap-l);
-}
-
-.ContentEdit-bar {
-  align-items: center;
-  background: linear-gradient(
-    to right,
-    rgb(255 255 255 / 0%),
-    var(--color-gray2) var(--gap-xl)
-  );
-  display: grid;
-  grid-area: bar;
-  grid-auto-flow: column;
-  grid-gap: var(--gap-m);
-  height: calc(
-    var(--ContentEdit-barHeight) - var(--ContentEdit-barBorderHeight)
-  );
-  justify-content: flex-end;
-  padding: 0 calc(var(--gap-l) - var(--gap-s)) 0
-    calc(var(--gap-xl) + var(--gap-l));
-  position: fixed;
-  right: 0;
-  top: var(--ContentEdit-barTop);
-  white-space: nowrap;
-  z-index: 300;
-
-  .ContentEdit-publish {
-    background-color: transparent;
-    box-shadow: none;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-rows: auto;
-    grid-gap: var(--gap-m);
-    justify-items: end;
-    padding-top: 0;
-
-    .ContentEdit-publishButton {
-      .Button.is-green;
-      .Text.is-m;
-    }
-  }
-
-  > .icon-action-publish {
-    align-items: center;
-    display: flex;
-    flex-direction: row-reverse;
-    order: -1;
-    position: relative;
-
-    .WorkInProgressSaveStatus {
-      .Link.is-gray;
-
-      display: none;
-      margin-right: var(--gap-l);
-      opacity: 1;
-
-      &[data-status='deleted'] {
-        pointer-events: none;
-      }
-
-      @media (@mq-s) {
-        display: inherit;
-      }
-    }
-  }
-
-  button[name='action-trash'] {
-    .Link.is-red;
-  }
-}
-
-.ContentEdit-overlay {
-  background: none;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin-right: var(--gap-l);
-  padding: 0 calc(var(--gap-xs) + var(--Icon-size)) 0 0;
-  text-transform: none;
-  vertical-align: baseline;
-
-  &:hover {
-    color: inherit;
-  }
-
-  &::after {
-    .Icon;
-
-    content: 'arrow_drop_down';
-    position: absolute;
-    right: 0;
-    top: calc(50% - var(--Icon-size) / 2);
-  }
-}
-
-.ContentEdit-controlsToggle {
-  .IconButton;
-
-  --IconButton-name: 'more_horiz';
-}
-
-.ContentEdit-overlayList,
-.ContentEdit-controlsList {
-  .Dropdown;
-
-  max-width: 100vw;
-  overflow-y: auto;
-  z-index: 400;
-
-  &[data-tether-ry='t'] {
-    top: calc(
-      var(--Tether-rt) + var(--Tether-rh) + var(--gap-s) +
-        var(--Dropdown-markerSize)
-    );
-  }
-
-  .is-locked & {
-    .icon-action-delete,
-    .icon-object-draft,
-    .icon-action-save,
-    .icon-action-trash,
-    .widget-publishing-tools {
-      display: none;
-    }
-  }
-}
-
-.ContentEdit-overlayList a {
-  .Dropdown-item;
-}
-
-.ContentEdit-controlsList [role='menuitem'] {
-  .Dropdown-item;
-}
-
-.ContentEdit-overlayList.is-open,
-.ContentEdit-controls.is-open .ContentEdit-controlsList {
-  .Dropdown.is-open;
-}
-
-.ContentEdit-controls.is-open {
-  .ContentEdit-controlsToggle {
-    &:hover,
-    &:focus {
-      --IconButton-name: 'close';
-    }
-  }
-}
-
-.ContentEdit-revisionInfo {
-  .Text.is-m;
-
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  font-weight: bold;
-  margin: 0;
-
-  > span {
-    overflow-wrap: anywhere;
-  }
-
-  > :not(:last-child) {
-    .ContentEdit-revisionIcon::after {
-      content: '\22C5';
-      padding: 0 var(--gap-xs);
-    }
-  }
-
-  > :last-child {
-    .ContentEdit-revisionIcon::after {
-      display: none;
-    }
-  }
-}
-
-.ContentEdit-revisionMarker {
-  background-color: var(--Revision-revisionColor);
-  border-radius: 50%;
-  display: inline-block;
-  height: var(--Icon-size);
-  margin-right: var(--gap-s);
-  min-height: var(--Icon-size);
-  min-width: var(--Icon-size);
-  width: var(--Icon-size);
-}
-
-.ContentEdit-revisionActions {
-  > a {
-    white-space: nowrap;
-  }
-
-  > a:not(:first-child) {
-    margin-left: var(--gap-l);
-  }
-}
-
-.ContentEdit-workflowToggle,
-.ContentEdit-restoreToggle {
-  .Button;
-  .Button.is-dominant;
-  .Text.is-m;
-
-  &::after {
-    .Icon;
-
-    content: 'arrow_drop_down';
-    transition: transform var(--time-xs);
-  }
-
-  &.is-open {
-    &::after {
-      transform: rotate(-180deg);
-    }
-  }
-}
-
-.ContentEdit-workflowWrapper {
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .CIG-label {
-    display: none;
-  }
-
-  .CIG-small {
-    margin-top: 0;
-  }
-}
-
-.ContentEdit-workflow,
-.ContentEdit-restore {
-  --Popup-gap: var(--gap-l);
-
-  background: var(--color-white);
-  box-shadow: var(--shadow-3);
-  position: fixed;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition:
-    opacity var(--time-xs) var(--ease-in),
-    transform var(--time-s) var(--ease-out);
-  z-index: 400;
-
-  &[data-tether-rx='l'],
-  &[data-tether-rx='r'] {
-    left: var(--Popup-gap) /*rtl:ignore*/;
-    right: var(--Popup-gap) /*rtl:ignore*/;
-
-    &::before {
-      left: auto;
-      right: calc(var(--gap-s) * 2 + var(--Icon-size) * 1.5 + var(--gap-m) * 2);
-    }
-  }
-
-  &[data-tether-ry='t'] {
-    --Popup-maxHeight: calc(
-      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--Popup-gap)
-    );
-
-    bottom: auto;
-    max-height: var(--Popup-maxHeight);
-    top: calc(var(--Tether-rt) + var(--Tether-rh));
-    transform-origin: top;
-
-    &::before {
-      border-color: transparent transparent var(--color-gray1) transparent;
-      top: 0;
-    }
-
-    .ContentEdit-workflowWrapper {
-      max-height: calc(
-        var(--Popup-maxHeight) - (4 * var(--gap-l) - 2 * var(--gap-m)) - 2 *
-          var(--gap-s) - 2px - var(--lineHeight-l)
-      );
-    }
-  }
-
-  &[data-tether-ry='b'] {
-    --Popup-maxHeight: calc(
-      var(--Tether-rt) - var(--Page-headerBottom) - var(--Popup-gap)
-    );
-
-    bottom: calc(100vh - var(--Tether-rt));
-    max-height: var(--Popup-maxHeight);
-    top: auto;
-    transform-origin: bottom;
-
-    &::before {
-      border-color: var(--color-gray1) transparent transparent transparent;
-      bottom: 0;
-    }
-
-    .ContentEdit-workflowWrapper {
-      max-height: calc(
-        var(--Popup-maxHeight) - (4 * var(--gap-l) - 2 * var(--gap-m)) - 2 *
-          var(--gap-s) - 2px - var(--lineHeight-l)
-      );
-    }
-  }
-
-  .CIG {
-    --CIG-padding: var(--gap-l);
-
-    margin-left: calc(0px - var(--gap-l));
-    margin-right: calc(0px - var(--gap-l));
-    padding-bottom: 0;
-  }
-
-  .CIG-row {
-    padding-top: var(--gap-m);
-
-    .ComboInput.is-multiple {
-      width: 100%;
-    }
-  }
-
-  .CIG-row:focus-within::after,
-  .CIG-row.state-changed:not(:focus-within)::after,
-  .CIG-row:focus-within > .CIG-wordCount {
-    opacity: 0;
-  }
-
-  .ContentEdit-workflowActions {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    margin: var(--gap-l) var(--gap-m) 0 0;
-
-    // "Add a comment" link takes full width, pushing schedule+publish to next row
-    .Conversation-add-comment {
-      flex-basis: 100%;
-      margin-bottom: var(--gap-m);
-    }
-
-    > button:not(.ContentEdit-publishButton) {
-      display: block;
-      white-space: normal;
-      width: 100%;
-
-      &:disabled {
-        opacity: 0.3;
-        pointer-events: none;
-      }
-    }
-
-    .ContentEdit-publishButton {
-      .Button.is-green;
-      .Text.is-m;
-
-      display: inline-block;
-      margin-top: 0;
-      width: auto;
-    }
-
-    .ContentEdit-workflowScheduleLink {
-      display: inline-block;
-      margin-right: var(--gap-s);
-
-      &.is-empty {
-        .IconButton;
-
-        --IconButton-name: 'date_range';
-
-        padding: unset;
-      }
-    }
-
-    &.is-scheduling {
-      .ContentEdit-publishButton {
-        .Button.is-yellow;
-      }
-    }
-  }
-
-  &.is-open {
-    display: block;
-    transform: none;
-  }
-}
-
-.ContentEdit-workflowTitle,
-.ContentEdit-restoreTitle {
-  .Text.is-m;
-
-  background: var(--color-gray1);
-  display: block;
-  font-weight: bold;
-  margin: 0;
-  padding: var(--gap-m) var(--gap-l);
-  text-align: left;
-  white-space: normal;
-}
-
-.ContentEdit-restore > .ContentEdit-restoreWrapper:not(.is-active) {
-  display: none;
-}
-
-.ContentEdit-workflow > .ContentEdit-workflowWrapper:not(.is-active) {
-  display: none;
-}
-
-.ContentEdit-workflowLink {
-  .Link;
-  .Text.is-m;
-
-  display: block;
-  margin: var(--gap-m);
-  text-align: center;
-  width: calc(100% - 2 * var(--gap-m));
-}
-
-.ContentEdit-workflow .ContentEdit-overrideMessage {
-  .Text.is-m;
-
-  display: block;
-  padding: var(--gap-l) var(--gap-l) var(--gap-m) var(--gap-l);
-  text-align: left;
-  white-space: pre-wrap;
-}
-
-.ContentEdit-restoreWrapper {
-  .ContentEdit-restoreBody {
-    min-height: 125px;
-    padding: var(--gap-l);
-
-    .ContentEdit-restoreToDraft {
-      margin-bottom: var(--gap-l);
-    }
-  }
-}
-
-.ContentEdit-workflowWrapper {
-  .ContentEdit-workflowBody {
-    border-bottom: 1px solid var(--color-gray3);
-    min-height: calc(233px + calc(var(--gap-m) + var(--gap-s)));
-    padding-bottom: var(--gap-l);
-  }
-
-  .ContentEdit-publish {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    padding: 0 var(--gap-l);
-
-    .ContentEdit-publishButton {
-      margin: 0 0 0 var(--gap-m);
-    }
-
-    &.is-scheduling > .ContentEdit-publishButton {
-      margin: var(--gap-s) 0 0 var(--gap-m);
-    }
-  }
-}
-
-.ContentEdit-workflow:not(.is-publishOverride) {
-  .ContentEdit-workflowLink {
-    display: none;
-  }
-
-  .ContentEdit-workflowActions {
-    padding: calc(var(--gap-l) - var(--gap-m)) var(--gap-l) var(--gap-l)
-      var(--gap-l);
-  }
-}
-
-.ContentEdit-publish {
-  background-color: var(--color-white);
-  box-shadow: var(--shadow-3);
-  padding-top: var(--gap-l);
-  position: relative;
-  text-align: right;
-
-  > [name='newSchedule'],
-  .ContentEdit-draftUpdate {
-    & + .ComboInput {
-      display: none;
-    }
-  }
-
-  > .ContentEdit-publishButton {
-    .is-locked & {
-      display: none;
-    }
-
-    &[disabled] {
-      opacity: 0.5;
-    }
-
-    .is-save & {
-      .Button.is-dominant;
-    }
-
-    &[disabled] {
-      opacity: 0.5;
-    }
-  }
-
-  &.is-scheduling {
-    > [name='newSchedule'],
-    .ContentEdit-draftUpdate {
-      & + .ComboInput {
-        display: block;
-      }
-    }
-
-    > .ContentEdit-publishButton {
-      .Button.is-yellow;
-    }
-  }
-
-  .DateTimeInput.is-empty {
-    .IconButton;
-
-    --IconButton-name: 'date_range';
-
-    padding: unset;
-  }
-}
-
-.ContentEdit-previewButtonWrapper {
-  height: calc(var(--gap-s) * 2 + var(--Icon-size));
-  position: relative;
-  width: calc(var(--gap-s) * 2 + var(--Icon-size));
-}
-
-.ContentEdit-previewButtonCircle {
-  height: 100%;
-  position: absolute;
-  transform: scale(1);
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    height: 50%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-  }
-}
-
-.is-previewing & .ContentEdit-previewButtonWrapper.is-animating {
-  .ContentEdit-previewButtonCircle {
-    animation: scaleAndSpin 600ms linear infinite;
-
-    &::before {
-      background-image: linear-gradient(
-        to right,
-        var(--color-blue5),
-        var(--color-blue4)
-      );
-      border-radius: var(--Icon-size) var(--Icon-size) 0 0;
-    }
-
-    &::after {
-      background-image: linear-gradient(
-        to right,
-        var(--color-blue5),
-        transparent
-      );
-      border-radius: 0 0 var(--Icon-size) var(--Icon-size);
-      top: 50%;
-    }
-  }
-
-  .ContentEdit-previewButton::after {
-    background: var(--color-white);
-    opacity: 1;
-  }
-}
-
-.ContentEdit-previewButton {
-  .IconButton;
-
-  --IconButton-name: 'remove_red_eye';
-
-  position: absolute;
-  z-index: 2;
-
-  &::after {
-    transition: transform var(--time-s) var(--ease-out);
-  }
-
-  .is-previewing & {
-    .IconButton.is-focus;
-
-    &:hover,
-    &:focus {
-      --IconButton-name: 'close';
-    }
-  }
-}
-
-.ContentEdit-saveButton {
-  .IconButton;
-
-  --IconButton-name: 'save';
-
-  text-transform: uppercase;
-
-  &::before {
-    pointer-events: none;
-  }
-}
-
-.ContentEdit-restoreButton {
-  .Button;
-  .Text.is-m;
-
-  background: transparent;
-  width: 100%;
-
-  &.Dropdown-item {
-    font-size: var(--fontSize-s);
-    padding: calc(var(--gap-s) - 1px) var(--gap-m);
-    text-align: center;
-  }
-}
-
-.ContentEdit-left {
-  display: block;
-  grid-area: left;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  &.is-openDrawer {
-    padding-bottom: calc(
-      (var(--ContentEdit-height) + var(--ContentEdit-barHeight)) / 2.5
-    );
-  }
-}
-
-.ContentEdit-main {
-  grid-area: main;
-  overflow: clip;
-}
-
-.ContentEdit-title {
-  .Text.is-xl;
-
-  background: var(--color-gray2);
-  border-bottom: var(--ContentEdit-barBorderHeight) solid
-    var(--Revision-revisionColor);
-  left: 0;
-  overflow: hidden;
-  padding: var(--gap-m) var(--gap-l);
-  position: fixed;
-  right: 0;
-  text-overflow: ellipsis;
-  top: var(--ContentEdit-barTop);
-  white-space: nowrap;
-  z-index: 300;
-
-  .ContentLabel > .visibilityLabel {
-    display: none;
-  }
-
-  .ComboInput {
-    margin: calc(0px - var(--gap-s)) var(--gap-l) calc(0px - var(--gap-s)) 0;
-    vertical-align: bottom;
-    width: auto;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  .Label {
-    border-radius: 0;
-    font-size: var(--fontSize-m);
-    text-transform: initial;
-  }
-}
-
-.ContentEdit-right {
-  grid-area: right;
-
-  .CIG .ComboInput {
-    width: 100%;
-  }
-
-  .CIG-row {
-    &:focus-within {
-      > .CIG-label {
-        background: inherit;
-      }
-    }
-  }
-}
-
-.is-compactRails {
-  .ContentEdit-right {
-    .Icon.is-s;
-    .Text.is-s;
-
-    .Widget {
-      .CIG-row[data-type='record']:not(.is-unlabeled) > .CIG-large {
-        > .toggleable-form > .CIG,
-        > .CIG {
-          > .CIG-row:only-child {
-            // Hide the shadow when a row is by itself.
-            box-shadow: 0 0 0 2px var(--color-gray1);
-          }
-        }
-      }
-    }
-  }
-}
-
-.ContentEdit-preview {
-  background: var(--color-white);
-  // Accounts for toolbar border height of 1px
-  bottom: calc(var(--ContentEdit-toolbarHeight) + 1px);
-  position: fixed;
-  right: 0;
-  top: calc(var(--ContentEdit-barTop) + var(--ContentEdit-barHeight));
-  transform: translateY(100vh);
-  transition-duration: var(--time-l);
-  transition-property: transform;
-  transition-timing-function: var(--ease-out);
-  z-index: 200;
-
-  &::before {
-    background: var(--color-gray1);
-    content: '';
-    height: 100vh;
-    opacity: 0;
-    pointer-events: none;
-    position: fixed;
-    transition: opacity var(--time-xs);
-    transition-timing-function: ease-out;
-    width: var(--ContentEdit-previewWidth);
-    will-change: opacity;
-    z-index: 1; // layered above the preview frame content to allow for interaction.
-  }
-
-  &::after {
-    content: unset;
-  }
-
-  h1 {
-    display: none;
-  }
-}
-
-.is-previewing {
-  .ContentEdit-preview {
-    display: flex;
-    flex-direction: column;
-    transform: none;
-    width: var(--ContentEdit-previewWidth);
-  }
-
-  .ContentEdit {
-    padding-right: 0;
-  }
-}
-
-.is-dragging .ContentEdit-preview {
-  z-index: 1000000;
-}
-
-.ContentEdit-previewDisplay {
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  position: relative;
-  width: 100%;
-
-  iframe:not('.Preview-overlayFrame') {
-    background: var(--color-white);
-  }
-
-  iframe {
-    height: 10000px;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    transform-origin: top left;
-    width: var(--ContentEdit-previewFrameWidth, 1920px);
-  }
-}
-
-.ContentEdit-preview {
-  .PreviewFrame-typeDisplay {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    position: relative;
-    width: 100%;
-
-    iframe:not('.Preview-overlayFrame') {
-      background: var(--color-white);
-    }
-
-    iframe {
-      height: var(
-        --PreviewFrame-height,
-        calc(100% / var(--PreviewFrame-scale))
-      );
-      left: 0;
-      overflow: hidden;
-      position: absolute;
-      top: 0;
-      transform-origin: top left;
-      width: var(--ContentEdit-previewFrameWidth, 1920px);
-    }
-  }
-}
-
-.ContentEdit-previewControls,
-.ContentEdit-previewTypes {
-  align-items: center;
-  background: var(--color-gray2);
-  border-bottom: 2px solid var(--color-gray3);
-  display: flex;
-  flex-flow: row wrap;
-  flex-shrink: 0;
-  height: auto;
-  padding: var(--gap-s) var(--gap-s) 0;
-
-  .ComboInput {
-    margin-left: var(
-      --gap-s
-    ); // Usese a larger gap to visually space the controls equally from the edges.
-
-    max-width: fit-content;
-
-    &::before {
-      content: none;
-    }
-  }
-
-  .ContentEdit-previewTypesForm {
-    order: -2;
-  }
-
-  .deviceWidthSelect + .ComboInput {
-    flex: 10;
-    order: -2;
-  }
-
-  .DateTimeInput {
-    order: -1;
-  }
-
-  .DateTimeInput.is-empty {
-    .IconButton;
-
-    --IconButton-name: 'date_range';
-
-    padding-top: 0;
-  }
-
-  .action-share {
-    .IconButton;
-
-    --IconButton-name: 'open_in_new';
-
-    margin-left: auto;
-    order: 0;
-  }
-
-  // Hide the controls initially while the preview frame is loading to prevent FOUC.
-  [name^='previewControls'] {
-    opacity: 0;
-  }
-
-  .frame.loaded[name^='previewControls'] {
-    display: contents;
-    opacity: 1;
-  }
-
-  .ContentEdit-previewControls {
-    display: contents;
-  }
-}
-
-.ContentEdit-previewControls {
-  > form {
-    display: contents;
-  }
-}
-
-.ContentEdit-previewControlsSpacer {
-  flex: 1;
-  margin-left: auto;
-  order: -1;
-}
-
-.ContentEdit-secondaryPreviewControls {
-  background: var(--color-gray3);
-  display: flex;
-  flex: 1 0 auto;
-  flex-flow: row wrap;
-  margin: var(--gap-s) calc(-1 * var(--gap-s)) 0;
-  padding: 0 var(--gap-s);
-  width: 100%;
-
-  .ComboInput {
-    flex: 1;
-    min-width: 33.33%; // At most, allow 3 ComboInputs in a single row.
-    width: auto;
-
-    &::before {
-      content: none;
-    }
-  }
-}
-
-.ContentEdit-newRevision {
-  --Link-color: var(--color-blue5);
-  --Link-hoverColor: var(--color-blue6);
-
-  .Button;
-  .Button.is-dominant;
-  .Text.is-m;
-}
-
-@media (@mq-s) {
-  .ContentEdit-workflow,
-  .ContentEdit-restore {
-    width: 400px;
-
-    &[data-tether-rx='l'] {
-      left: var(--Tether-rl) /*rtl:ignore*/;
-      right: auto /*rtl:ignore*/;
-    }
-
-    &[data-tether-rx='r'] {
-      left: auto /*rtl:ignore*/;
-      right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;
-    }
-  }
-
-  .is-previewing {
-    .ContentEdit-before {
-      display: none;
-    }
-  }
-}
-
-@media (@mq-m) {
-  .Page-content,
-  .Popup {
-    --ContentEdit-leftWidth: calc(
-      100vw - var(--ContentEdit-previewWidth) - var(--ContentEdit-toolbarWidth)
-    );
-    --ContentEdit-previewWidth: 50vw;
-
-    .is-asideHidden {
-      .ContentEdit-preview {
-        left: 50%;
-        position: absolute;
-        top: calc(var(--ContentEdit-barHeight));
-        width: calc(50% - var(--ContentEdit-toolbarWidth));
-      }
-
-      .ContentEdit {
-        grid-template:
-          'left toolbar' 1fr ~'/'
-          1fr var(--ContentEdit-toolbarWidth);
-      }
-
-      .ContentEdit-right.is-visible {
-        display: none;
-      }
-    }
-
-    &.is-previewing {
-      .is-asideHidden {
-        .ContentEdit-left {
-          width: 50%;
-        }
-      }
-    }
-  }
-
-  .ContentEdit {
-    grid-template:
-      'left right toolbar' 1fr ~'/'
-      1fr var(--ContentEdit-rightWidth) var(--ContentEdit-toolbarWidth);
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    transition: padding-right var(--time-s) var(--ease-out);
-
-    &.is-inGrid {
-      height: calc(100vh - var(--ContentEdit-barTop));
-    }
-
-    &:has(.ContentEdit-right.is-visible .ContentEditDrawer-widget)
-      .ContentEdit-left {
-      margin-bottom: 0;
-    }
-  }
-
-  .ContentEdit-right {
-    border-left: 1px solid var(--color-gray3);
-    bottom: auto;
-    position: relative;
-    right: auto;
-    top: auto;
-    width: auto;
-  }
-
-  .ContentEdit-toolbar {
-    border-width: 0 0 0 1px;
-    display: block;
-    width: var(--ContentEdit-toolbarWidth);
-
-    > li {
-      margin-bottom: var(--gap-s);
-    }
-
-    button[data-icon-button-name='manage_search'] {
-      bottom: 0;
-      margin-bottom: var(--gap-l);
-      position: absolute;
-    }
-  }
-
-  .ContentEdit-preview {
-    z-index: auto;
-  }
-
-  .is-previewing {
-    .ContentEdit-left {
-      margin-right: 0;
-      overflow-x: hidden;
-      width: var(--ContentEdit-leftWidth);
-    }
-
-    .ContentEdit {
-      padding-right: 0;
-    }
-  }
-
-  .ContentEdit-workstreamProgress {
-    padding-left: calc(var(--RPB-size) + var(--gap-s));
-  }
-
-  .ContentEdit-workstreamProgressText {
-    display: block;
-  }
-
-  .ContentEdit-workstreamMessage {
-    border-left: 1px solid var(--color-gray5);
-    margin-left: calc(var(--gap-l) / 2);
-    padding-left: calc(var(--gap-l) / 2);
-  }
-
-  .ContentEdit-bar {
-    position: absolute;
-    top: var(--ContentEdit-workstreamHeight);
-  }
-
-  .ContentEdit-left {
-    .Widget {
-      --Widget-padding: var(--gap-xl);
-
-      border-bottom: solid 1px var(--color-gray2);
-
-      &.is-collapsed {
-        padding-bottom: 0;
-      }
-
-      .Widget-title {
-        z-index: 12;
-      }
-    }
-
-    &.is-openDrawer {
-      padding-bottom: calc(var(--lineHeight-xxl) * 5.5);
-    }
-
-    // Widget placed at the top that only contains a Message
-    > .Widget:first-child:has(> .Message:only-child) {
-      padding-bottom: 0;
-
-      .Message {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .ContentEdit-title {
-    position: absolute;
-    top: var(--ContentEdit-workstreamHeight);
-  }
-
-  .ContentEdit-right {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-
-    .CIG {
-      --CIG-padding: var(--gap-l);
-    }
-  }
-
-  .ContentEdit-preview {
-    border-left: 1px solid var(--color-gray3);
-    bottom: 0;
-    right: var(--ContentEdit-toolbarWidth);
-    transform: scaleX(0.000001);
-    transform-origin: right;
-  }
-}
-
-@media (@mq-l) {
-  .Page-content,
-  .Popup {
-    --ContentEdit-previewWidth: calc((100vw - 320px) / 2);
-
-    &.is-preview-menu {
-      --ContentEdit-previewWidth: calc(
-        (100vw - var(--ContentEdit-rightWidth) - 250px)
-      );
-    }
-  }
-
-  .ContentEdit-preview {
-    right: var(--ContentEdit-toolbarWidth);
-  }
-
-  .ContentEdit-revisionActions {
-    margin-left: auto;
-  }
-}
-
-@media (@mq-xl) {
-  .Page-content,
-  .Popup {
-    --ContentEdit-rightWidth: 320px;
-  }
-}
-
-.ContentEdit-workflowLog,
-.ContentEdit-workflowActions {
-  padding: calc(var(--gap-l) - var(--gap-m)) var(--gap-l) var(--gap-m)
-    var(--gap-l);
-}
-
-.ContentEdit-workflowLog {
-  textarea::after {
-    display: none;
-  }
-}
-
-@media (@mq-xl) {
-  .Page-content,
-  .Popup {
-    --ContentEdit-rightWidth: 320px;
-  }
-}
-
-// Legacy.
-.content-edit,
-.contentForm-aside,
-.widget-preview {
-  display: contents;
-}
-
-.widget-publishingExtra,
-.widget-publishingHistory {
-  display: none;
-}
-
-.editpagebutton {
-  display: none;
-}
-
-.state-disabled {
-  opacity: 0.7;
-  pointer-events: none;
-}