/* /assets/style/collection.css */
:root{
	--collection_knightrider_rgb:var(--accent_b);
}

:root.has_spotify_theme{
	--collection_knightrider_rgb:var(--spotify_theme_rgb);
}

:root.has_spotify_accent{
	--collection_knightrider_rgb:var(--spotify_accent_rgb);
}

/* page: collection */
.collection_host{
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	min-height:6rem;
	padding:0 0.875rem;
	position:relative;
	width:100vw;
}

.collection_shell{
	margin:0;
	padding:0 0.875rem;
	width:100%;
}

.collection_rack_wrap{
	background:linear-gradient(180deg,rgba(var(--panel),0.78),rgba(var(--card),0.52));
	border:0.0625rem solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 1.5rem 3.75rem rgba(var(--shadow),0.45);
	margin:0 auto;
	max-width:var(--max);
	overflow:hidden;
	padding:0.75rem 0.75rem;
	position:relative;
	width:100%;
}

.collection_rack_wrap::before{
	background:
		radial-gradient(28rem 12rem at 10% 10%,rgba(var(--accent_a),0.10),transparent 60%),
		radial-gradient(26rem 12rem at 90% 25%,rgba(var(--accent_b),0.08),transparent 62%),
		linear-gradient(115deg,rgba(255,255,255,0.00),rgba(255,255,255,0.05),rgba(255,255,255,0.00));
	content:"";
	inset:-30%;
	opacity:0.95;
	pointer-events:none;
	position:absolute;
	transform:translateZ(0);
}

.collection_rack{
	align-items:stretch;
	border-radius:1rem;
	display:flex;
	gap:0;
	height:3.25rem;
	justify-content:stretch;
	margin:0;
	overflow:hidden;
	padding:0;
	position:relative;
	width:100%;
}

.collection_spine{
	--spine_color:#2b2b2b;
	align-items:stretch;
	cursor:pointer;
	flex:var(--spine_flex, 1) 1 0;
	min-width:0;
	opacity:0.82;
	position:relative;
	transform:translateZ(0);
	transition:filter 160ms ease,opacity 160ms ease,transform 180ms ease;
}

.collection_spine::before{
	background:
		linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.00) 35%,rgba(0,0,0,0.22)),
		linear-gradient(90deg,rgba(0,0,0,0.25),rgba(0,0,0,0.00) 40%,rgba(255,255,255,0.10)),
		linear-gradient(180deg,rgba(0,0,0,0.10),rgba(0,0,0,0.24)),
		var(--spine_color);
	content:"";
	inset:0;
	position:absolute;
}

.collection_spine::after{
	box-shadow:inset -0.0625rem 0 0 rgba(255,255,255,0.08);
	content:"";
	inset:0;
	pointer-events:none;
	position:absolute;
}

.collection_spine:hover{
	filter:saturate(1.08) brightness(1.06);
	opacity:0.98;
}

.collection_spine.is_selected{
	filter:saturate(1.12) brightness(1.10);
	opacity:1;
	transform:scaleX(3);
	z-index:2;
}

.collection_spine.is_selected::before{
	box-shadow:
		inset 0 0 0 0.0625rem rgba(255,255,255,0.22),
		0 0.75rem 2.25rem rgba(0,0,0,0.45);
}

.collection_spine.is_selected::after{
	box-shadow:
		inset -0.0625rem 0 0 rgba(255,255,255,0.10),
		inset 0.0625rem 0 0 rgba(255,255,255,0.10);
}

/* page: album_roulette */
.collection_roulette_btn{
	align-items:center;
	background:
		radial-gradient(0.75rem 0.75rem at 30% 30%,rgba(255,255,255,0.10),rgba(255,255,255,0.00) 60%),
		linear-gradient(180deg,rgba(255,255,255,0.06),rgba(0,0,0,0.18)),
		rgba(0,0,0,0.45);
	border:0.0625rem solid rgba(255,255,255,0.18);
	border-radius:62.4375rem;
	box-shadow:
		0 0.75rem 2rem rgba(var(--shadow),0.35),
		0 0 0 0.0625rem rgba(0,0,0,0.28) inset;
	color:inherit;
	cursor:pointer;
	display:inline-flex;
	height:2.75rem;
	justify-content:center;
	left:50%;
	min-width:2.75rem;
	opacity:1;
	padding:0;
	pointer-events:auto;
	position:absolute;
	top:50%;
	transform:translate(-50%,-50%);
	transition:border-color 140ms ease,box-shadow 140ms ease,opacity 420ms ease,transform 140ms ease;
	width:2.75rem;
	z-index:6;
}

.collection_roulette_btn::before{
	background:
		radial-gradient(0.1875rem 0.1875rem at 35% 40%,rgba(255,255,255,0.78),rgba(255,255,255,0.00) 70%),
		radial-gradient(0.1875rem 0.1875rem at 65% 40%,rgba(255,255,255,0.78),rgba(255,255,255,0.00) 70%),
		radial-gradient(0.1875rem 0.1875rem at 35% 60%,rgba(255,255,255,0.78),rgba(255,255,255,0.00) 70%),
		radial-gradient(0.1875rem 0.1875rem at 65% 60%,rgba(255,255,255,0.78),rgba(255,255,255,0.00) 70%);
	border-radius:0.5rem;
	box-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,0.45);
	content:"";
	height:1.125rem;
	opacity:0.9;
	width:1.125rem;
}

.collection_roulette_btn.is_roulette_hidden{
	opacity:0;
	pointer-events:none;
}

.collection_roulette_btn:active{
	transform:translate(-50%,-50%) scale(0.98);
}

.collection_roulette_btn:focus-visible{
	border-radius:62.4375rem;
}

.collection_roulette_btn:hover{
	border-color:rgba(var(--accent_a),0.42);
	box-shadow:
		0 1rem 2.5rem rgba(var(--shadow),0.40),
		0 0 0 0.0625rem rgba(0,0,0,0.28) inset;
	transform:translate(-50%,-50%) translateY(-0.0625rem);
}

:root.has_spotify_theme .collection_roulette_btn:hover{
	border-color:var(--spotify_theme_color);
}

.collection_rack_wrap:focus-within .collection_roulette_btn,
.collection_rack_wrap:hover .collection_roulette_btn{
	border-color:rgba(var(--accent_a),0.30);
	box-shadow:
		0 1.125rem 2.75rem rgba(var(--shadow),0.42),
		0 0 0 0.0625rem rgba(255,255,255,0.06) inset;
	transform:translate(-50%,-50%) translateY(-0.0625rem);
}

:root.has_spotify_theme .collection_rack_wrap:focus-within .collection_roulette_btn,
:root.has_spotify_theme .collection_rack_wrap:hover .collection_roulette_btn{
	border-color:var(--spotify_theme_color);
}

.collection_roulette_overlay{
	align-items:center;
	color:rgba(255,255,255,0.98);
	display:flex;
	font-family:var(--mono);
	font-size:1.125rem;
	font-weight:950;
	inset:0;
	justify-content:center;
	letter-spacing:0.14em;
	opacity:0;
	pointer-events:none;
	position:absolute;
	text-shadow:0 0.125rem 0.5rem rgba(0,0,0,0.88),0 0.0625rem 0.1875rem rgba(0,0,0,0.82);
	text-transform:uppercase;
	transform:scale(0.985);
	transition:opacity 220ms ease,transform 220ms ease;
	z-index:7;
}

.collection_roulette_overlay.is_visible{
	opacity:1;
	transform:scale(1);
}

.collection_slider_shell{
	align-items:center;
	display:flex;
	justify-content:center;
	margin:0.75rem auto 0 auto;
	max-width:var(--max);
	padding:0;
	position:relative;
	width:100%;
}

.collection_slider{
	appearance:none;
	background:linear-gradient(90deg,rgba(var(--accent_a),0.22),rgba(var(--accent_b),0.18));
	border:0.0625rem solid rgba(var(--line),0.10);
	border-radius:62.4375rem;
	height:0.5rem;
	margin:0;
	opacity:1;
	padding:0;
	pointer-events:auto;
	transition:opacity 180ms ease;
	width:100%;
}

.collection_slider_shell.is_knightrider_active .collection_slider{
	opacity:0;
	pointer-events:none;
}

.collection_slider::-webkit-slider-thumb{
	appearance:none;
	background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(0,0,0,0.25)),rgba(var(--card),0.92);
	border:0.0625rem solid rgba(255,255,255,0.18);
	border-radius:62.4375rem;
	box-shadow:0 0.75rem 2rem rgba(var(--shadow),0.35);
	height:1.25rem;
	width:1.25rem;
}

.collection_slider::-moz-range-thumb{
	background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(0,0,0,0.25)),rgba(var(--card),0.92);
	border:0.0625rem solid rgba(255,255,255,0.18);
	border-radius:62.4375rem;
	box-shadow:0 0.75rem 2rem rgba(var(--shadow),0.35);
	height:1.25rem;
	width:1.25rem;
}

.collection_slider_knightrider{
	height:0.5rem;
	inset:auto 0 auto 0;
	pointer-events:none;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:5;
}

.collection_slider_knightrider.is_hidden{
	display:none;
}

.collection_slider_knightrider_glow{
	background:
		radial-gradient(1.5rem 0.6rem at 50% 50%,rgba(var(--collection_knightrider_rgb),0.92),rgba(var(--collection_knightrider_rgb),0.00) 70%),
		linear-gradient(90deg,rgba(var(--collection_knightrider_rgb),0.00),rgba(var(--collection_knightrider_rgb),0.62),rgba(var(--collection_knightrider_rgb),0.00));
	border-radius:62.4375rem;
	box-shadow:
		0 0 0.75rem rgba(var(--collection_knightrider_rgb),0.42),
		0 0 1.5rem rgba(var(--collection_knightrider_rgb),0.22);
	height:1.125rem;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%,-50%);
	width:4.5rem;
}

/* page: collection_meta */
.collection_meta{
	align-items:flex-start;
	background:linear-gradient(180deg,rgba(var(--panel),0.70),rgba(var(--card),0.50));
	border:0.0625rem solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 1.5rem 3.75rem rgba(var(--shadow),0.40);
	display:flex;
	gap:0.75rem;
	justify-content:space-between;
	margin:0.75rem auto 0 auto;
	max-width:var(--max);
	padding:0.875rem 0.875rem;
	width:100%;
}

.collection_meta.is_hidden{
	display:none;
}

.collection_meta_left{
	align-items:center;
	display:flex;
	flex-direction:row;
	gap:0.75rem;
	margin:0;
	min-width:0;
	padding:0;
}

.collection_meta_thumb_shell{
	border-radius:0.5rem;
	flex:0 0 auto;
	height:3rem;
	overflow:hidden;
	width:3rem;
}

.collection_meta_thumb_shell.is_hidden{
	display:none;
}

.collection_meta_thumb{
	display:block;
	height:100%;
	object-fit:cover;
	opacity:0;
	transition:opacity 180ms ease;
	width:100%;
}

.collection_meta_thumb.is_loaded{
	opacity:1;
}

.collection_meta_text{
	display:flex;
	flex-direction:column;
	gap:0.25rem;
	min-width:0;
}

.collection_meta_artist{
	font-size:0.8125rem;
	line-height:1.2;
	margin:0;
	opacity:0.78;
	overflow:hidden;
	padding:0;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.collection_meta_title{
	font-size:1rem;
	font-weight:800;
	line-height:1.2;
	margin:0;
	overflow:hidden;
	padding:0;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.collection_meta_link{
	align-items:center;
	background:rgba(0,0,0,0.30);
	border:0.0625rem solid rgba(255,255,255,0.16);
	border-radius:var(--pill_r);
	display:inline-flex;
	gap:0.5rem;
	margin:0;
	min-height:2.75rem;
	padding:0 1rem;
	text-decoration:none;
	transition:border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease;
	white-space:nowrap;
}

.collection_meta_link:active{
	transform:translateY(0.0625rem) scale(0.99);
}

.collection_meta_link:focus-visible{
	border-radius:var(--pill_r);
}

.collection_meta_link:hover{
	border-color:rgba(var(--accent_a),0.42);
	box-shadow:0 1rem 2.5rem rgba(var(--shadow),0.35);
	transform:translateY(-0.0625rem);
}

.collection_meta_link_icon{
	display:block;
	height:1rem;
	width:1rem;
}

.collection_meta_link_label{
	font-size:0.8125rem;
	font-weight:700;
	line-height:1;
	margin:0;
	padding:0;
}

@media (max-width:45rem){
	.collection_rack_wrap{
		padding:0.625rem 0.625rem;
	}

	.collection_rack{
		height:3rem;
	}

	.collection_meta{
		padding:0.75rem 0.75rem;
	}

	.collection_meta_thumb_shell{
		height:2.75rem;
		width:2.75rem;
	}
}

@media (prefers-reduced-motion:reduce){
	.collection_roulette_btn{
		transition:none;
	}

	.collection_roulette_overlay{
		transition:none;
	}

	.collection_spine{
		transition:none;
	}

	.collection_meta_link{
		transition:none;
	}

	.collection_meta_thumb{
		transition:none;
	}

	.collection_slider{
		transition:none;
	}

	.collection_slider::-webkit-slider-thumb{
		transition:none;
	}
}