$sound-wave-item-height: 90;
$sound-wave-item-height-px: 90px;

@function scaleSoundWaveItemY($height) {
  @return scaleY($height / $sound-wave-item-height);
}

.sound-wave-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .sound-wave {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &.active {
      .sound-wave-item {
        height: $sound-wave-item-height-px;
        animation: sound-wave-item 0ms -800ms linear infinite alternate;
      }
    }

    .sound-wave-item {
      display: block;
      width: 0.2%;
      margin-right: 1px;
      background: #7c93bf;
      transition: all ease 0.8s;
      height: 0;
      animation: none;

      @keyframes sound-wave-item {
        0% {
          opacity: 0.35;
          transform: scaleSoundWaveItemY(6);
        }
        100% {
          opacity: 1;
          transform: scaleSoundWaveItemY(46);
        }
      }

      &:nth-child(10n + 1) {
        transform: scaleSoundWaveItemY(2);
        animation-duration: 474ms;
      }
      &:nth-child(10n + 2) {
        transform: scaleSoundWaveItemY(10);
        animation-duration: 433ms;
      }
      &:nth-child(10n + 3) {
        transform: scaleSoundWaveItemY(18);
        animation-duration: 407ms;
      }
      &:nth-child(10n + 4) {
        transform: scaleSoundWaveItemY(26);
        animation-duration: 458ms;
      }
      &:nth-child(10n + 5) {
        transform: scaleSoundWaveItemY(30);
        animation-duration: 400ms;
      }
      &:nth-child(10n + 6) {
        transform: scaleSoundWaveItemY(32);
        animation-duration: 427ms;
      }
      &:nth-child(10n + 7) {
        transform: scaleSoundWaveItemY(34);
        animation-duration: 441ms;
      }
      &:nth-child(10n + 8) {
        transform: scaleSoundWaveItemY(36);
        animation-duration: 419ms;
      }
      &:nth-child(10n + 9) {
        transform: scaleSoundWaveItemY(40);
        animation-duration: 487ms;
      }
      &:nth-child(10n + 10) {
        transform: scaleSoundWaveItemY(46);
        animation-duration: 442ms;
      }
    }
  }
}
