<!-- Animated equalizer icon
Source: https://codepen.io/virpo/details/YzKWWPW
Author: Peter Hraska
MIT License
-->
<script lang="ts">
  let playing = true;
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="inline fill-primary"
  class:stop={!playing}
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <rect class="eq-bar eq-bar--1" x="4" y="4" width="3.7" height="8" />
  <rect class="eq-bar eq-bar--2" x="10.2" y="4" width="3.7" height="16" />
  <rect class="eq-bar eq-bar--3" x="16.3" y="4" width="3.7" height="11" />
</svg>

<style lang="postcss">
  .eq-bar {
    transform: scale(1, -1) translate(0, -24px);
  }

  .stop .eq-bar {
    animation-name: none;
    height: 2px;
  }

  .eq-bar--1 {
    animation-name: short-eq;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-delay: 0s;
  }

  .eq-bar--2 {
    animation-name: tall-eq;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-delay: 0.17s;
  }

  .eq-bar--3 {
    animation-name: short-eq;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-delay: 0.34s;
  }

  @keyframes short-eq {
    0% {
      height: 8px;
    }

    50% {
      height: 4px;
    }

    100% {
      height: 8px;
    }
  }

  @keyframes tall-eq {
    0% {
      height: 16px;
    }

    50% {
      height: 6px;
    }

    100% {
      height: 16px;
    }
  }
</style>
