/* Default state */
#kite-speak-button {
  color: red;
  
  margin:  0;
  border: none;
  cursor: pointer;
  width: auto;
  text-align: center;
  font-size: 14px;
  background-color: transparent;
}

#kite-speak-button #kite-speak-icon {
  margin-right: 10px;
}

/* Speaking state */
#kite-speak-button.speaking {
  color: red;
}

#kite-speak-button.speaking #kite-speak-icon {
  animation: pulse 1.5s infinite;
  color: red;
}

/* Paused state */
#kite-speak-button.paused {
  color: grey;
}

#kite-speak-button.paused .fa {
  color: grey;
}

/* Animation for speaking icon */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}