/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiLoadingLogo,
.ouiLoadingKibana {
  position: relative;
  display: inline-block;

  // sass-lint:disable-block mixins-before-declarations
  @include ouiCanAnimate {
    &:before,
    &:after {
      position: absolute;
      content: '';
      width: 90%;
      left: 5%;
      border-radius: 50%;
      opacity: .2;
      z-index: 1;
    }

    &:before {
      box-shadow: 0 0 8px $ouiColorFullShade;
      animation: 1s ouiLoadingKibanaPulsateAndFade $ouiAnimSlightResistance infinite;
    }

    &:after {
      background-color: $ouiColorFullShade;
      animation: 1s ouiLoadingKibanaPulsate $ouiAnimSlightResistance infinite;
    }
  }

  .ouiLoadingLogo__icon,
  .ouiLoadingKibana__icon {
    display: block;

    @include ouiCanAnimate {
      animation: 1s ouiLoadingKibanaBounceMedium $ouiAnimSlightResistance infinite;
    }
  }
}

/**
 * 1. Requires pixel math for animation.
 */
.ouiLoadingLogo--medium,
.ouiLoadingKibana--medium {
  width: $ouiSize;

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

  .ouiLoadingLogo__icon,
  .ouiLoadingKibana__icon {
    z-index: 999;
    animation-name: ouiLoadingKibanaBounceMedium;
  }
}

.ouiLoadingLogo--large,
.ouiLoadingKibana--large {
  width: $ouiSizeL;

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

  .ouiLoadingLogo__icon,
  .ouiLoadingKibana__icon {
    animation-name: ouiLoadingKibanaBounceLarge;
  }
}

.ouiLoadingLogo--xLarge,
.ouiLoadingKibana--xLarge {
  width: $ouiSizeXL;

  &:before,
  &:after {
    height: $ouiSizeS;
    bottom: -$ouiSizeM;
  }

  .ouiLoadingLogo__icon,
  .ouiLoadingKibana__icon {
    animation-name: ouiLoadingKibanaBounceXLarge;
  }
}

@keyframes ouiLoadingKibanaBounceMedium {
  50% {
    transform: translateY(-$ouiSizeS);
  }
}

@keyframes ouiLoadingKibanaBounceLarge {
  50% {
    transform: translateY(-$ouiSizeM);
  }
}

@keyframes ouiLoadingKibanaBounceXLarge {
  50% {
    transform: translateY(-$ouiSize);
  }
}

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

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

  100% {
    opacity: 0;
  }
}

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

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

  100% {
    opacity: .15;
  }
}