// Prefix all styles with "mtr" to avoid conflicts.
// Examples
//   mtrChart
//   mtrChart__legend
//   mtrChart__legend--small
//   mtrChart__legend-isLoading

.legacyMtrVis {
  @include euiScrollBar;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: auto;
}

.legacyMtrVis__value {
  @include euiTextTruncate;
  font-weight: $euiFontWeightBold;
}

.legacyMtrVis__container {
  text-align: center;
  padding: $euiSize;
  display: flex;
  flex-direction: column;
}

.legacyMtrVis__container--light {
  color: $euiColorEmptyShade;
}

.legacyMtrVis__container-isfull {
  min-height: 100%;
  min-width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 100%;
}

.legacyMtrVis__container-isFilterable {
  cursor: pointer;
  transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance;
  transform: translate(0, 0);

  &:hover,
  &:focus {
    box-shadow: none;
    transform: translate(0, -2px);
  }
}