@use '../../../../mx-core/src/base/typography';
@use '../../../../mx-core/src/base/shape';

$dot-size: 1.5px;
$scale: 4;

:host {
  display: block;
}
.mx-loading-dots {
  @extend .gl-body-md;
  &__dots {
    white-space: nowrap;
  }
  &__dot {
    @extend .rounded-full;
    display: inline-block;
    position: relative;
    height: $dot-size * $scale;
    width: $dot-size * $scale;
    transform: scale(calc(1 / #{$scale}));
    transform-origin: 0%;
    &:nth-child(1) {
      animation: wave 1s 0s infinite ease-in-out;
    }
    &:nth-child(2) {
      animation: wave 1s 0.2s infinite ease-in-out;
    }
    &:nth-child(3) {
      animation: wave 1s 0.4s infinite ease-in-out;
    }
  }
}

@keyframes wave {
  0%,
  50%,
  100% {
    top: 0;
  }
  25% {
    top: 2.5px;
  }
}