@border: 1px solid rgba(0, 0, 0, 0.08);

.flex {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-height: calc(100vh - 48px);
  font-size: 12px;
}

.experiment {
  .flex();

  .nodeSourceTree {
    flex-basis: 290px;
    width: 290px;
    max-height: calc(100vh - 48px);
    border-right: @border;
  }

  .editPanel {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;

    .dagCanvas {
      flex-grow: 1;
      border-right: @border;
    }

    .confPanel {
      width: 290px;
      min-width: 290px;
    }
  }
}
