.now-playing-bars {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

.now-playing-bars > span {
  width: 3px;
  height: 100%;
  background-color: var(--foreground);
  border-radius: 3px;
  transform-origin: bottom;
  transition: opacity 0.3s ease-out;
  animation: bounce 2.2s ease infinite alternate;
  content: "";
}

.now-playing-bars > span:nth-of-type(2) {
  animation-delay: -2.2s;
}

.now-playing-bars > span:nth-of-type(3) {
  animation-delay: -3.7s;
}

@keyframes bounce {
  10% {
    transform: scaleY(0.3);
  }

  30% {
    transform: scaleY(1);
  }

  60% {
    transform: scaleY(0.5);
  }

  80% {
    transform: scaleY(0.75);
  }

  100% {
    transform: scaleY(0.6);
  }
}