.builder-left {
  grid-area: left;
  min-width: 0;
}

.panel-editors {
  grid-area: editors;
}

.panel-preview {
  position: sticky;
  top: var(--preview-panel-sticky-top);
  width: auto;
  grid-area: preview;
  align-self: start;
  min-height: 0;
  z-index: 14;
  transition: transform 260ms ease-out;
}

.panel-preview.is-desktop-stuck.is-inline-horizontal {
  border-top: none;
  border-right: 1px solid var(--panel-line);
  border-bottom: 2px solid #000000;
  border-left: 1px solid var(--panel-line);
  border-radius: 0;
  box-shadow: none;
}

.builder-main.preview-inline-mode .panel-preview {
  position: sticky;
  top: var(--preview-inline-panel-sticky-top);
  width: auto;
  grid-area: preview;
  min-height: 200px;
  animation: preview-slide-center 260ms ease-out;
}

.builder-main.preview-inline-mode .preview-wrap {
  min-height: 200px;
}

.builder-main.preview-inline-mode .panel-title-row {
  padding-right: 0;
}

.builder-main.preview-inline-mode .preview-rotate-toggle {
  position: static;
}

.builder-main:not(.preview-inline-mode) .panel-preview {
  animation: preview-slide-side 260ms ease-out;
}

@keyframes preview-slide-center {
  from {
    opacity: 0.92;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes preview-slide-side {
  from {
    opacity: 0.92;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}