@import (reference) "../style/themes/default.less";
.am-loading {
  &-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: @size-1;
    width: var(--am-loading-item-size, @size-1);
    height: @size-1;
    height: var(--am-loading-item-size, @size-1);
    min-width: 66 * @pixelSize;
    min-height: 66 * @pixelSize;
  }
  &-item {
    flex: 0 0 8 * @pixelSize;
    min-width: 6 * @pixelSize;
    min-height: 6 * @pixelSize;
    max-width: 8 * @pixelSize;
    max-height: 8 * @pixelSize;
    overflow: hidden;
    margin-right: @h-spacing-standard;
    margin-right: var(--am-loading-marginR, @h-spacing-standard);
    border-radius: @corner-radius-sm / 2;
    border-radius: var(--am-loading-item-radius, calc(@corner-radius-sm / 2));
    background-color: @color-text-subtitle;
    background-color: var(--am-color-text-subtitle, @color-text-subtitle);
    animation: aliui_loading_animation 1s 0s infinite linear;
    &__1 {
      animation-delay: 0s;
    }
    &__2 {
      animation-delay: 150ms;
    }
    &__3 {
      margin-right: 0;
      animation-delay: 300ms;
    }
  }
}

@keyframes aliui_loading_animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  12% {
    transform: translate3d(0, -150%, 0);
  }
  40% {
    transform: translate3d(0, 110%, 0);
  }
  55% {
    transform: translate3d(0, -10%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
