@import '@tandem/editor/browser/scss/variables.scss';

.m-editor-stage-isolate {

  // prevents the canvas content from moving around
  position: absolute;
  overflow: hidden;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: none;
}

.preview-root {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.m-editor-stage-loading {
  &::before {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    background: #00B5FF;
    border-radius: 10px;
  }
  opacity: 0.4;
  animation: stage-loading-pulse 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// TODO - bounce
@keyframes stage-loading-pulse {
  0% {
    opacity: 0.2;
  } 

  50% {
    opacity: 0.8;
    // transform: translate(-50%, calc(-50% - 10px));
  }

  100% {
    opacity: 0.2;
  }
}

.m-editor-stage-canvas {
  background: transparent;
  width: 100%;
  height: 100%;
}

.fade-in {
  animation: fade-in 500ms;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}