$canvasLayoutFontSize: $euiFontSizeS;

.canvasLayout {
  display: flex;
  background: $euiPageBackgroundColor;
  flex-grow: 1;
  overflow: hidden;
}

.canvasLayout__rows {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-height: 100vh;
  max-width: 100%;
}

.canvasLayout__cols {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
}

.canvasLayout__stage {
  flex-grow: 1;
  flex-basis: auto;
  display: flex;
  flex-direction: column;
}

.canvasLayout__stageHeader {
  flex-grow: 0;
  flex-basis: auto;
  padding: $euiSizeS $euiSize;
  font-size: $canvasLayoutFontSize;
  border-bottom: $euiBorderThin;
  background: $euiColorLightestShade;
  user-select: none;
}

.canvasLayout__stageHeaderInner {
  height: ($euiSizeL * 2);
}

.canvasLayout__stageContent {
  flex-grow: 1;
  flex-basis: auto;
  position: relative;
}

.canvasLayout__stageContentOverflow {
  @include euiScrollBar;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  display: flex;
  align-items: center;
}

.canvasLayout__sidebar {
  flex-grow: 0;
  flex-basis: auto;
  width: 350px;
  background: $euiColorLightestShade;
  display: flex;
  position: relative;
  border-left: $euiBorderThin;

  .euiPanel {
    margin-bottom: $euiSizeS;
  }
  .euiPanel.euiSplitPanel__inner {
    margin-bottom: 0;
  }
}

.canvasLayout__footer {
  flex-grow: 0;
  flex-basis: auto;
  width: 100%;
  background-color: $euiPageBackgroundColor;
  z-index: $euiZNavigation;
  font-size: $canvasLayoutFontSize;
}
