const soundtrack-margin = 1rem

.soundtracks
	horizontal-wrap
	justify-content space-around

.soundtrack
	vertical
	flex 1
	flex-basis 500px
	margin soundtrack-margin 0

> 500px
	.soundtrack
		margin soundtrack-margin
		margin-bottom media-bottom-margin

.soundtrack-content
	horizontal
	box-shadow shadow-light
	min-height 200px
	border-radius ui-element-border-radius
	overflow hidden

	iframe
		width 100%

.soundtrack-image
	object-fit cover
	width 100%
	height 100%
	border-radius ui-element-border-radius
	filter brightness(100%)
	transition filter transition-speed ease

.soundtrack-play-button
	position absolute
	top 50%
	left 50%
	transform translate(-50%, -50%)
	border-radius 50%
	width 92px
	height 92px
	font-size 3rem
	color rgba(0, 0, 0, 0.15)
	background rgba(255, 255, 255, 0.9)
	pointer-events none
	box-shadow outline-shadow-medium

	.icon-play
		transform translateX(27%)

.soundtrack-visualizer
	horizontal
	justify-content center
	align-items center
	pointer-events none
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	opacity 0
	transition opacity 250ms ease

.visualizer-box
	width 3px
	height 15px
	margin 0.2rem
	border-radius 1px
	transition all 250ms linear
	animation scale-vertically 300ms infinite ease, change-color 1s infinite ease
	animation-direction alternate

.visualizer-box-1
	animation-delay 0

.visualizer-box-2
	animation-delay 100ms

.visualizer-box-3
	animation-delay 200ms

animation scale-vertically
	0%
		transform scaleY(0.3)
		opacity 0.8
	100%
		transform scaleY(1)
		opacity 1

animation change-color
	0%
		background-color hsl(45, 100%, 68%)
	100%
		background-color hsl(235, 100%, 68%)

.soundtrack-play-area
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	cursor pointer
	transition opacity 250ms ease

	&.playing
		.soundtrack-play-button
			opacity 0

		.soundtrack-visualizer
			opacity 1

		.soundtrack-image
			filter brightness(0) !important

	:hover
		.soundtrack-play-button
			color button-hover-color
			background button-hover-background

		.soundtrack-image
			filter brightness(50%)

.soundtrack-footer
	media-footer

.soundtrack-anime-link
	display none

> 800px
	.soundtrack-anime-link
		display block

	.soundtrack-anime-image
		border-bottom-right-radius 0
		border-top-right-radius 0

	.soundtrack-image
		border-bottom-left-radius 0
		border-top-left-radius 0

.soundtrack-anime-image
	width anime-image-medium-width
	height anime-image-medium-height
	border-radius ui-element-border-radius
	object-fit cover