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

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

  &__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%;
  }
}