#audio-player
	vertical
	default-transition
	position relative
	margin 0.8rem 0
	min-height 90px

#audio-player-track-title
	color text-color
	font-size 0.7rem
	opacity 0.8
	text-align center
	padding 0.8rem
	animation title-flow 5s ease infinite alternate

animation title-flow
	0%
		transform rotateX(0)
	90%
		transform rotateX(0)
	100%
		transform rotateX(90deg)

#audio-player-controls
	horizontal
	justify-content center
	align-items center
	justify-content space-evenly

.audio-player-play-pause-container
	position relative
	width 48px
	height 48px

#audio-player-play,
#audio-player-pause
	position absolute
	left 0
	top 0
	display flex
	justify-content center
	align-items center
	font-size 1.5rem

	border-radius 50%
	width 100%
	height 100%

	:hover
		color button-hover-color
		background button-hover-background

	&.fade-out
		pointer-events none

	.icon-play
		transform translateX(3px)

#audio-player-play,
#audio-player-pause,
.audio-player-side-button
	color text-color
	background rgba(0, 0, 0, 0.03)
	border none

.audio-player-side-button
	width 32px
	height 32px
	display flex
	justify-content center
	align-items center

#audio-player-prev
	//

#audio-player-next
	//

mixin volume-slider-thumb
	appearance none
	width 18px
	height 18px
	transform scale(0.5)
	border-radius 50%
	background text-color
	cursor pointer
	opacity 0.25
	box-shadow shadow-medium
	default-transition

#audio-player-volume
	appearance none
	-webkit-appearance none
	width 100%
	height 6px
	background rgba(0, 0, 0, 0.03)
	outline none !important
	border none !important
	border-radius 0
	padding 0
	margin 0
	margin-top 1rem

	::-webkit-slider-thumb
		volume-slider-thumb
		-webkit-appearance none

	::-moz-range-thumb
		volume-slider-thumb

	:active
		transform none

	:hover
		background rgba(0, 0, 0, 0.06)

		::-webkit-slider-thumb
			background link-hover-color
			opacity 1
			transform scale(1)