.euiLoadingKibana {
  position: relative;
  display: inline-block;

  &:before,
  &:after {
    position: absolute;
    content: '';
    width: 90%;
    left: 5%;
    border-radius: 50%;
    opacity: .2;
    z-index: 1;
  }

  &:before {
    box-shadow: 0 0 8px $euiColorFullShade;
    animation: 1s euiLoadingKibanaPulsateAndFade $euiAnimSlightResistance infinite;
  }

  &:after {
    background-color: $euiColorFullShade;
    animation: 1s euiLoadingKibanaPulsate $euiAnimSlightResistance infinite;
  }

  .euiLoadingKibana__icon {
    display: block;
  }
}

/**
 * 1. Requires pixel math for animation.
 */
.euiLoadingKibana--medium {
  width: $euiSize;

  &:before,
  &:after {
    height: $euiSizeXS - 1; /* 1 */
    bottom: -$euiSizeXS;
  }

  .euiLoadingKibana__icon {
    z-index: 999;
    animation: 1s euiLoadingKibanaBounceMedium $euiAnimSlightResistance infinite;
  }
}

/**
 * 1. Requires pixel math for animation.
 */
.euiLoadingKibana--large {
  width: $euiSizeL;

  &:before,
  &:after {
    height: $euiSizeS - 2; /* 1 */
    bottom: -$euiSizeS;
  }

  .euiLoadingKibana__icon {
    animation: 1s euiLoadingKibanaBounceLarge $euiAnimSlightResistance infinite;
  }
}

.euiLoadingKibana--xLarge {
  width: $euiSizeXL;

  &:before,
  &:after {
    height: $euiSizeS;
    bottom: -$euiSizeM;
  }

  .euiLoadingKibana__icon {
    animation: 1s euiLoadingKibanaBounceXLarge $euiAnimSlightResistance infinite;
  }
}

@keyframes euiLoadingKibanaBounceMedium {
  50% {
    transform: translateY(-$euiSizeS);
  }
}

@keyframes euiLoadingKibanaBounceLarge {
  50% {
    transform: translateY(-$euiSizeM);
  }
}

@keyframes euiLoadingKibanaBounceXLarge {
  50% {
    transform: translateY(-$euiSize);
  }
}

@keyframes euiLoadingKibanaPulsateAndFade {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(.5);
    opacity: .1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes euiLoadingKibanaPulsate {
  0% {
    opacity: .15;
  }

  50% {
    transform: scale(.5);
    opacity: .05;
  }

  100% {
    opacity: .15;
  }
}