const audio-player-volume-background = rgba(0, 0, 0, 0.03)

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

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

#audio-player-anime-link
	width anime-image-medium-width
	height anime-image-medium-width
	overflow-y hidden
	border-radius ui-element-border-radius
	opacity 0.75
	transform opacity transition-speed ease

	:hover
		opacity 1 !important

#audio-player-anime-image
	width 100%
	transform translateY(0)
	will-change transform
	animation bounce-up-down 45s linear infinite

	// The element-found class doesn't set opacity,
	// because we're overwriting the animation.
	// That's why we have to manually add it here.
	&.element-found
		opacity 1

animation bounce-up-down
	50%
		transform translateY(-30%) rotate(0.002deg)

#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

	svg-icon
		[name="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 none
	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 audio-player-volume-background
	outline none !important
	border none !important
	box-shadow none !important
	border-radius 0
	padding 0
	margin 0
	margin-top 1rem

	::-moz-range-track
		background transparent

	::-moz-focus-outer
		border 0

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

	::-moz-range-thumb
		volume-slider-thumb
		-moz-appearance none

	:active
		transform none

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

		// Chrome parsing bug forces us to make the following 2 thumb definitions have different statements.
		// That is why we're adding the appearance statements here, even though they are not really needed.

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

		::-moz-range-thumb
			volume-slider-hover-thumb
			-moz-appearance none