// SASSTODO: Too risky to change to BEM naming
.visualize {
  display: flex;
  flex: 1 1 100%;
  overflow: hidden;
}

// SASSTODO: Too risky to change to BEM naming
.visualization {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  padding: $euiSizeS;
  flex: 1 1 100%;

  /**
   * 1. Expand to fill the container but accept being squeezed smaller by the spy, even so small
   *    that it disappears entirely.
   */
  .visChart__container {
    @include euiScrollBar;

    min-height: 0;
    flex: 1 1 0; /* 1 */
    display: flex;
    flex-direction: row;
    overflow: auto;
    transition: opacity 0.01s;

    // IE11 Hack
    // ---------
    // Normally we would just set flex: 1 1 0%, which works as expected in IE11.
    // Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we
    // have to use an IE-specific hack instead.
    @include internetExplorerOnly {
      flex: 1 0;
    }

    &:focus {
      box-shadow: none;
    }
  }

  // SASSTODO: Can't find exact usage
  .loading {
    opacity: 0.5;
  }

  // SASSTODO: Can't find exact usage
  .spinner {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    z-index: 20;
    opacity: 0.5;
  }
}

.visChart {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.visChart--vertical {
  flex-direction: column;
}

.visChart__spinner {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}