@use '../../abstracts/variables' as *;

// -----------------------------------------------------------------------------
// Sound Wave: animated sound wave bars inside audio buttons
// -----------------------------------------------------------------------------

.animatesoundbtn .soundWave {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  width: 20px;
  height: 20px;
}

.animatesoundbtn .soundWave .bar {
  width: 2px;
  background-color: $primary;
  height: 8px;
  position: absolute;
  top: 50%;
  margin: -4px 0 0 1px;
}

.activeanimation.animatesoundbtn .soundWave .bar {
  animation: soundWave 0.5s linear infinite alternate;
}

@keyframes soundWave {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(2);
  }
}

.animatesoundbtn .soundWave .bar:nth-child(1) {
  animation-delay: 0s;
}

.animatesoundbtn .soundWave .bar:nth-child(2) {
  margin-left: 5px;
  animation-delay: 0.3333333333s;
}

.animatesoundbtn .soundWave .bar:nth-child(3) {
  margin-left: 9px;
  animation-delay: 0.6666666667s;
}

.animatesoundbtn .soundWave .bar:nth-child(4) {
  margin-left: 13px;
  animation-delay: 0s;
}

.animatesoundbtn .soundWave .bar:nth-child(5) {
  margin-left: 17px;
  animation-delay: 0.33333s;
}
