@import '../../../scss/styles.scss';

@layer payload-default {
  .live-preview-window {
    background-color: var(--theme-bg);
    display: none;
    width: 60%;
    flex-shrink: 0;
    flex-grow: 0;
    position: sticky;
    top: var(--doc-controls-height);
    height: calc(100vh - var(--doc-controls-height));
    overflow: hidden;

    &--is-live-previewing {
      display: block;
    }

    &__wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-start;
    }

    &__main {
      flex-grow: 1;
      height: 100%;
      width: 100%;
    }

    &--has-breakpoint {
      .live-preview-iframe {
        border: 1px solid var(--theme-elevation-100);
      }

      .live-preview-window {
        &__main {
          padding: var(--base);
        }
      }
    }

    @include mid-break {
      width: 100%;
    }
  }
}