@use '../../../style/mixins' as *;

.preview {
  position: relative;

  .overlay {
    @include square(100%);
    position: absolute;
    left: 0;
    top: 0;

    iframe {
      position: absolute;
      left: 0;
    }

    .loading {
      @include square(var(--large-icon-size));
      @include absolute-center;
      visibility: hidden;

      & > svg {
        @include square(var(--large-icon-size));
        @include absolute-center;
      }
    }

    iframe {
      @include square(100%);
      border: none;
      &:fullscreen {
        border-radius: 0;
      }
    }
  }

  &.loaded {
    .figure-container,
    .start-button {
      visibility: hidden;
    }

    .loading {
      visibility: visible;
    }
  }
}