@import "../common/index.less";

.ph-audio-horn {
  width: 35px;
  height: 28px;
  display: inline-block;
  background-size: contain;
  background-image: url('https://cdn.llscdn.com/sprout/assets/20190116/icSound3@2x.png');
  background-repeat: no-repeat;

  &.is-pad {
    width: @r * 35px;
    height: @r * 28px;
  }

  .audio-el {
    display: none;
  }

  &.on-play {
    animation: 1s audio-horn-animation infinite;
  }
}

@keyframes audio-horn-animation {
  0% {
    background-image: url('https://cdn.llscdn.com/sprout/assets/20190116/icSound1@2x.png');
  }

  50% {
    background-image: url('https://cdn.llscdn.com/sprout/assets/20190116/icSound2@2x.png');
  }

  100% {
    background-image: url('https://cdn.llscdn.com/sprout/assets/20190116/icSound3@2x.png');
  }
}