.voice-recognition-button.disabled {
  opacity: 0.8;
  pointer-events: none;
}

@keyframes quiet {
  25% {
    transform: scaleY(0.6);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(0.8);
  }
}

@keyframes normal {
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(0.6);
  }
}
@keyframes loud {
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(1.2);
  }
}

.voice-icon {
  display: flex;
  justify-content: space-between;
  height: 32px;
  --boxSize: 6px;
  --gutter: 2.4px;
  width: calc((var(--boxSize) + var(--gutter)) * 3);
  margin-left: 5px;
}

.voice-icon-box {
  transform: scaleY(0.4);
  height: 100%;
  width: var(--boxSize);
  background: red;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
}

.voice-icon-box1 {
  animation-name: quiet;
}

.voice-icon-box2 {
  animation-name: normal;
}

.voice-icon-box3 {
  animation-name: quiet;
}