<div id="app">
	<div>
		<button class="button button--square" :class="likedSong ? 'button--true' : ''" @click="togleLikeSong">
			<ion-icon name="heart" class="button__icon"></ion-icon>
			<span class="sr-only">{{ likedSong ? 'Song liked' : 'Like song' }}</span>
		</button>
		<button class="button button--round">
			<ion-icon name="play-back-outline" class="button__icon"></ion-icon>
			<span class="sr-only">Previous track</span>
		</button>
		<button class="button button--round" @click="togglePauseTrack">
			<ion-icon :name="isPlaying ? 'pause-outline' : 'play-outline'" class="button__icon"></ion-icon>
			<span class="sr-only">{{ isPlaying ? 'Pause song' : 'Play song' }}</span>
		</button>
		<button class="button button--round">
			<ion-icon name="play-forward-outline" class="button__icon"></ion-icon>
			<span class="sr-only">Next track</span>
		</button>
	</div>
	<div>
		<div class="loader-5" :class="!isPlaying ? 'loader-5--paused' : ''"></div>
	</div>
	<!-- 	<audio autoplay>
		<source src="https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/7.mp3" />
	</audio> -->
</div>

<p class="info emboss">Components from <a href="https://codepen.io/JackDomleo/pen/mdeowoz" rel="nofollow noopener" target="_blank">this pen</a></p>

body,
#app {
	display: flex;
	height: 100vh;
	width: 100vw;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 3rem;
}

div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	width: 35%;
}

.button--true {
	color: var(--primary);
}

.info {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
}

.loader-5 {
	&::before {
		animation-duration: 15s;
		animation-timing-function: linear;
	}

	&--paused {
		&::before {
			animation-play-state: paused;
		}
	}
}

new Vue({
	el: "#app",
	data() {
		return {
			isPlaying: true,
			likedSong: false
		};
	},
	methods: {
		togglePauseTrack() {
			this.isPlaying = !this.isPlaying;
		},
		togleLikeSong() {
			this.likedSong = !this.likedSong;
		}
	}
});