/* Playlist page overrides.
   `public/css/style.css` forces full-height + translateY on `.app .audio-slider .swiper`,
   which pushes vertical coverflow slides down (large wrapper translate3d).
   This file is loaded after style.css, so it can safely override legacy rules. */

.app.playlist-page .audio-slider {
	height: auto !important;
	pointer-events: auto !important;
	/* In CSS grid, items stretch by default; prevent stretching so Swiper autoHeight works */
	align-self: start !important;
	min-height: 0;
}

.app.playlist-page .audio-slider .swiper {
	height: auto !important;
	transform: none !important;
}

.app.profile-page .audio-slider {
	height: auto !important;
	pointer-events: auto !important;
	align-self: start !important;
	min-height: 0;
}

.app.profile-page .audio-slider .swiper {
	height: auto !important;
	transform: none !important;
}

.app .audio-slider .swiper {
	transform: translateY(calc(-50% + 24rem)) !important;
}

/* `audio-nav` in legacy HTML uses <a>. In Next/React we render <button>,
   so we restyle buttons to match the original look 1:1. */
.app .audio-nav button {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 5.2rem;
	height: 5.2rem;
	min-width: 5.2rem;
	border-radius: 100%;
	font-size: 2rem;
	position: relative;
	z-index: 1;
	transition: all 0.5s;
	color: #333332;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.app .audio-nav button:after {
	content: "";
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 100%;
	top: 5px;
	left: 5px;
	background: linear-gradient(
		348.79deg,
		#fff 11.08%,
		rgba(255, 255, 255, 0.5) 69.78%,
		rgba(115, 115, 115, 0.71) 104.24%
	);
	border: 0.2px solid #fff;
	z-index: -1;
	box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}

.app .audio-nav button._main {
	width: 6rem;
	height: 6rem;
	min-width: 6rem;
	border: 1px solid;
}

.app .audio-nav button i.icon-pause-fill {
	display: none;
}

.app .audio-nav button._active {
	background: linear-gradient(
		148.22deg,
		#fff 7.28%,
		rgba(0, 0, 0, 0.25) 82.69%,
		rgba(115, 115, 115, 0.42) 92.72%
	);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.app .audio-nav button._active:after {
	opacity: 1;
}

.app .audio-nav button._active._main {
	border: none;
}

.app .audio-nav button._active._main i.icon-pause-fill {
	display: block;
}

.app .audio-nav button._active._main i.icon-play-fill {
	display: none;
}

.app .audio-nav button:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}