.ide {
	display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: wrap;
  @include themify() {
    color: getThemifyVariable('primary-text-color');
    background-color: getThemifyVariable('background-color');
  }
}

.editor-preview-container {
  width: 100%;
  flex: 1 0 0px;
  display: flex;
  position: relative;

  // create a stacking context to isolate z-index layering
  z-index: 0;
}

.editor-console-container {
  // flex: 1 0 0px;
  // max-width: 45%;
  width: 100%;
  height: 100%;
  position: relative;

  // temporary fix for safari
  min-height: 75vh;
}

.editor-accessibility {
  @extend %hidden-element;
}

.accessible-output {
	@extend %hidden-element;
}

.toolbar {
	width: 100%;
}

.sidebar {
  width: 100%;
  height: 100%;
}