$flux-editor--right-panel: 330px;

.flux-editor {
  position: absolute;
  top: $cf-marg-b;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

// Monaco Editor
.flux-editor--left-panel {
  flex: 1 0 0;
  position: relative;
  border-radius: $cf-radius;
}

// Variables / Functions List
.flux-editor--right-panel {
  flex: 0 0 ($flux-editor--right-panel - $cf-marg-b);
  margin-left: $cf-marg-b;
  display: flex;
}

.flux-editor--monaco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.time-machine-editor--embedded {
  @extend .flux-editor--monaco;
  border-radius: $cf-radius;
  border: $cf-border solid $g5-pepper;
  overflow: hidden;
}

.time-machine-editor--loading {
  width: 100%;
  height: 100%;
  position: relative;
  background: #292933;

  &:after {
    content: '';
    position: absolute;
    background: #202028;
    top: 8px;
    bottom: 8px;
    left: 24px;
    right: 8px;
  }
}
