.ntq-loading-bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: var(--ntq-loading-bars-height, 28px);
  pointer-events: none;
}

.ntq-loading-bars--sm {
  --ntq-loading-bars-height: 16px;
  --ntq-loading-bars-width: 3px;
  gap: 3px;
}

.ntq-loading-bars__bar {
  flex: 0 0 var(--ntq-loading-bars-width, 4px);
  width: var(--ntq-loading-bars-width, 4px);
  height: 100%;
  border-radius: 2px;
  background: var(--ntq-cyan);
  opacity: 0.88;
  transform: scaleY(0.2);
  transform-origin: center bottom;
  animation: ntq-loading-bars-pulse 0.9s ease-in-out infinite;
}

@for $i from 1 through 8 {
  .ntq-loading-bars__bar:nth-child(#{$i}) {
    animation-delay: #{($i - 1) * 0.1}s;
  }
}

@keyframes ntq-loading-bars-pulse {
  0%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.55;
  }

  50% {
    transform: scaleY(1);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ntq-loading-bars__bar {
    animation: none;
    transform: scaleY(0.65);
    opacity: 0.75;
  }
}
