.visEditor {
  @include flex-parent();

  @include euiBreakpoint('l', 'xl') {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  @include euiBreakpoint('xs', 's', 'm') {
    .visualization {
      // While we are on a small screen the visualization is below the
      // editor. In this cases it needs a minimum height, since it would otherwise
      // maybe end up with 0 height since it just gets the flexbox rest of the screen.
      min-height: 400px;
    }
  }

  /* 1. Without setting this to 0 you will run into a bug where the filter bar modal is hidden under
a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
  > .visualize {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    z-index: 0; /* 1 */
  }
}


.visEditor__content {
  @include flex-parent();
  width: 100%;
  z-index: 0;

  // overrides for tablet and desktop
  @include euiBreakpoint('l', 'xl') {
    flex-direction: row;
  }
}
