@import "../../../scss/variables";

$context-box-spacing: 10px;

live-preview {
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%,rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)),
  linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;

  > .width-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transition: width 225ms cubic-bezier(.4,0,.2,1);

    &.phone {
      width: 480px;
      @include mat-elevation(6);
    }

    &.tablet {
      width: 768px;
      @include mat-elevation(6);
    }

    &.laptop {
      width: 992px;
      @include mat-elevation(6);
    }

    &.desktop {
      width: 100%;
    }
  }

  iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
  }

  .highlights {
    position: absolute;
  }
  
  .drag-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}