.euiLoadingChart {
  height: $euiSizeXL;
  z-index: 500;
  overflow: hidden;
  display: inline-block;
}

.euiLoadingChart__bar {
  height: 100%;
  width: $euiSizeS;
  display: inline-block;
  margin-bottom: -$euiSize;
  margin-left: $euiSizeXS / 2;
  animation: euiLoadingChart 1s infinite;

  &:nth-child(1) {
    background-color: $euiColorVis0;
  }

  &:nth-child(2) {
    background-color: $euiColorVis1;
    animation-delay: .1s;
  }

  &:nth-child(3) {
    background-color: $euiColorVis2;
    animation-delay: .2s;
  }

  &:nth-child(4) {
    background-color: $euiColorVis3;
    animation-delay: .3s;
  }
}

.euiLoadingChart--mono {
  .euiLoadingChart__bar {
    &:nth-child(1) {
      background-color: $euiColorLightShade;
    }

    &:nth-child(2) {
      background-color: shadeOrTint($euiColorLightShade, 4%, 4%);
    }

    &:nth-child(3) {
      background-color: shadeOrTint($euiColorLightShade, 8%, 8%);
    }

    &:nth-child(4) {
      background-color: shadeOrTint($euiColorLightShade, 12%, 12%);
    }
  }
}

.euiLoadingChart--medium {
  height: $euiSize;

  > span {
    width: $euiSizeXS / 2;
    margin-left: $euiSizeXS / 2;
    margin-bottom: $euiSizeS;
  }
}

.euiLoadingChart--large {
  height: $euiSizeL;

  > span {
    width: $euiSizeXS;
    margin-left: $euiSizeXS / 2;
    margin-bottom: $euiSizeL / 2;
  }
}

.euiLoadingChart--xLarge {
  height: $euiSizeXL;

  > span {
    width: $euiSizeS;
    margin-left: $euiSizeXS;
    margin-bottom: $euiSizeXL / 2;
  }
}

@keyframes euiLoadingChart {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(66%);
  }

  100% {
    transform: translateY(0);
  }
}