// TODO: Move all of the styles here (should be modularised by, e.g., CSS-in-JS or CSS modules).

#consoleRoot {
  display: flex;
  flex: 1 1 auto;

  // Make sure the editor actions don't create scrollbars on this container
  // SASSTODO: Uncomment when tooltips are EUI-ified (inside portals)
  overflow: hidden;
}

.consoleContainer {
  padding: $euiSizeS;
}

.conApp {
  display: flex;
  flex: 1 1 auto;
}

.conApp__editor {
  width: 100%;
  display: flex;
  flex: 0 0 auto;

  // Required on IE11 to render ace editor correctly after first input.
  position: relative;

  &__spinner {
    width: 100%;
  }
}

.conApp__output {
  display: flex;
  flex: 1 1 1px;
}

.conApp__editorContent,
.conApp__outputContent {
  height: 100%;
  flex: 1 1 1px;
}

.conApp__editorActions {
  button {
    line-height: inherit;
  }

  position: absolute;
  z-index: $euiZLevel1;
  top: 0;

  // Adjust for possible scrollbars
  right: $euiSize;
  line-height: 1;

  // For IE11
  min-width: 40px;
}

.conApp__editorActionButton {
  padding: 0 $euiSizeXS;
  appearance: none;
  border: none;
  background: none;
}

.conApp__editorActionButton--success {
  color: $euiColorSuccess;
}

.conApp__resizer {
  @include osdResizer;

  // Give the aria selection border priority when the divider is selected on IE11 and Chrome
  z-index: $euiZLevel1;
}

.conApp__settingsModal {
  min-width: 460px;
}

.conApp__requestProgressBarContainer {
  position: relative;
  z-index: $euiZLevel2;
}

.conApp__tabsExtension {
  border-bottom: $euiBorderThin;
}