#audio-player
	vertical
	default-transition
	position relative
	justify-content center
	align-items center
	margin 0.8rem 0
	min-height 90px

.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
	color text-color
	background rgba(0, 0, 0, 0.03)
	border none
	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)

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)