#audio-player
	vertical
	default-transition
	justify-content center
	position relative
	margin 0.8rem 0
	flex-shrink 0

#audio-player-anime-info
	display flex
	justify-content center
	align-items center
	width 100%

#audio-player-anime-image
	opacity 0.15 !important
	width 39px
	height 39px
	border-radius 3px
	object-fit cover
	default-transition
	animation rotate-y-once 5s ease infinite alternate

	:hover
		filter saturate(130%)
		opacity 1.0 !important

animation rotate-y-once
	0%
		transform rotateY(0)
	90%
		transform rotateY(0)
	100%
		transform rotateY(90deg)

#audio-player-track-title
	width 100%
	color text-color
	font-size 0.7rem
	line-height 1.7em
	opacity 0.8
	text-align center
	padding 0.8rem
	animation rotate-x-once 5s ease infinite alternate

animation rotate-x-once
	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

mixin volume-slider-hover-thumb
	background link-hover-color
	opacity 1
	transform scale(1)

#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
			volume-slider-hover-thumb

#audio-player-volume:hover ::-moz-range-thumb
	volume-slider-thumb