<template>
  <svg-icon
    v-if="muted"
    class="o-mute"
    icon-class="mute"
  />
  <div
    v-else
    class="o-mute o-wave"
  >
    <span class="o-wave__line" />
    <span class="o-wave__line" />
    <span class="o-wave__line" />
    <span class="o-wave__line" />
  </div>
</template>

<script>
export default {
  name: 'Volume',
  props: {
    muted: {
      type: [Boolean, String],
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.o-mute {
  width: 24px;
  height: 24px;
}

@keyframes line {
  from {
    height: 1px;
    opacity: 0.4;
  }

  to {
    height: 20px;
    opacity: 1;
  }
}

.o-wave {
  box-sizing: content-box;
  display: inline-flex;
  align-items: flex-end;

  &.muted {
    .o-wave__line {
      animation: none;
    }
  }

  &__line {
    display: inline-block;
    width: 3px;
    height: 10px;
    background-color: currentColor;
    animation: line 0.6s infinite ease-in-out alternate;

    &:nth-child(2) {
      height: 18px;
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      height: 12px;
      animation-delay: 0.4s;
    }

    &:nth-child(4) {
      height: 8px;
      animation-delay: 0.6s;
    }

    & + & {
      margin-left: 3px;
    }
  }
}
</style>
