@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;
}
