/*!
 * 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.
 */

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

/**
 * 1. Without the animation, the bars are all the same height,
 *    so we apply transforms only if they can't animate
 */
.ouiLoadingChart__bar {
  height: 100%;
  width: $ouiSizeS;
  display: inline-block;
  margin-bottom: -$ouiSize;
  margin-left: $ouiSizeXS / 2;

  // sass-lint:disable-block mixins-before-declarations
  @include ouiCanAnimate {
    animation: ouiLoadingChart 1s infinite;
  }

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

    @include ouiCantAnimate {
      transform: translateY(66%); /* 1 */
    }
  }

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

    @include ouiCantAnimate {
      transform: translateY(44%); /* 1 */
    }
  }

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

    @include ouiCantAnimate {
      transform: translateY(22%); /* 1 */
    }
  }

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

.ouiLoadingChart--mono {
  .ouiLoadingChart__bar {
    &:nth-child(1) {
      background-color: $ouiColorLightShade;
    }

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

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

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

.ouiLoadingChart--medium {
  height: $ouiSize;

  > span {
    width: $ouiSizeXS / 2;
    margin-left: $ouiSizeXS / 2;
    margin-bottom: $ouiSizeS;
  }
}

.ouiLoadingChart--large {
  height: $ouiSizeL;

  > span {
    width: $ouiSizeXS;
    margin-left: $ouiSizeXS / 2;
    margin-bottom: $ouiSizeL / 2;
  }
}

.ouiLoadingChart--xLarge {
  height: $ouiSizeXL;

  > span {
    width: $ouiSizeS;
    margin-left: $ouiSizeXS;
    margin-bottom: $ouiSizeXL / 2;
  }
}

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

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

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