/*
 * Morningstar Dynamics mini player.
 * Uniform spec: 44px pill in every state, 32px buttons, 18px icons, 4px gaps, 32px playlist rows.
 * Colours, radii and spacing come from the site's Bricks tokens.
 */

.msdp {
	--msdp-pill-h: 44px;
	--msdp-btn: 32px;
	--msdp-pad: 6px; /* (44 - 32) / 2: same inset on every side of the pill */
	--msdp-gap: 4px;
	--msdp-ease: cubic-bezier(0.2, 0, 0, 1);
	--msdp-dur: 220ms;
	--msdp-fg: var(--ink-muted, #9ea7b3);
	--msdp-fg-hover: var(--ink-body, #d5d8dc);
	--msdp-accent: var(--primary, #00c6d4);

	position: fixed;
	right: var(--space-m, 24px);
	bottom: var(--space-m, 24px);
	z-index: 990; /* under the sticky header and mobile menu */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--msdp-gap);
	font-family: "Zalando Sans", system-ui, sans-serif;
	color: var(--msdp-fg);
	pointer-events: none; /* only the pill and the open list take clicks */
}

.msdp *,
.msdp *::before,
.msdp *::after {
	box-sizing: border-box;
}

/* ---------- Pill ---------- */

.msdp-pill {
	display: flex;
	align-items: center;
	height: var(--msdp-pill-h);
	padding: var(--msdp-pad);
	border-radius: var(--radius-pill, 999px);
	background: var(--surface-sunken, #04060b);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.45);
	pointer-events: auto;
}

.msdp-btn {
	all: unset;
	box-sizing: border-box; /* all: unset resets it */
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--msdp-btn);
	height: var(--msdp-btn);
	border-radius: var(--radius-pill, 999px);
	color: var(--msdp-fg);
	cursor: pointer;
	transition: color var(--msdp-dur) var(--msdp-ease), background-color var(--msdp-dur) var(--msdp-ease), transform 120ms var(--msdp-ease);
	-webkit-tap-highlight-color: transparent;
}

.msdp-btn:hover,
.msdp-list-toggle[aria-expanded="true"] {
	color: var(--msdp-fg-hover);
	background: rgb(255 255 255 / 0.06);
}

.msdp-btn:active {
	transform: scale(0.92);
}

.msdp-btn:focus-visible,
.msdp-song:focus-visible {
	outline: 2px solid var(--msdp-accent);
	outline-offset: 1px;
}

.msdp-icon {
	display: block;
	width: 18px;
	height: 18px;
}

/* Two stacked icons that cross-fade (expand/collapse, play/pause, speaker/muted). */
.msdp-swap {
	grid-area: 1 / 1;
	display: grid;
	transition: opacity var(--msdp-dur) var(--msdp-ease), transform var(--msdp-dur) var(--msdp-ease);
}

.msdp-swap-b {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.msdp[data-expanded="true"] .msdp-toggle .msdp-swap-a,
.msdp[data-playing="true"] .msdp-play .msdp-swap-a,
.msdp[data-muted="true"] .msdp-mute .msdp-swap-a {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

.msdp[data-expanded="true"] .msdp-toggle .msdp-swap-b,
.msdp[data-playing="true"] .msdp-play .msdp-swap-b,
.msdp[data-muted="true"] .msdp-mute .msdp-swap-b {
	opacity: 1;
	transform: none;
}

/* The toggle arrows slide rather than spin. */
.msdp-toggle .msdp-swap-b,
.msdp[data-expanded="true"] .msdp-toggle .msdp-swap-a {
	transform: translateX(-6px);
}

.msdp-toggle .msdp-swap-a {
	transform: none;
}

.msdp[data-expanded="true"] .msdp-toggle .msdp-swap-b {
	transform: none;
}

/* Playing: the play/pause button turns the accent colour. */
.msdp[data-playing="true"] .msdp-play {
	color: var(--msdp-accent);
}

/* Resume hint after a page change: one soft ring pulse. */
.msdp[data-resume="true"] .msdp-play::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--msdp-accent) 60%, transparent);
	animation: msdp-ring 1.6s var(--msdp-ease) 3;
}

@keyframes msdp-ring {
	to {
		box-shadow: 0 0 0 10px transparent;
	}
}

/* Speaker waves breathe while playing. */
.msdp[data-playing="true"]:not([data-muted="true"]) .msdp-wave {
	animation: msdp-wave 1.4s ease-in-out infinite;
}

.msdp[data-playing="true"] .msdp-wave-2 {
	animation-delay: 0.2s;
}

@keyframes msdp-wave {
	50% {
		opacity: 0.35;
	}
}

/* ---------- Expanding section ---------- */

.msdp-extra {
	display: grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns 280ms var(--msdp-ease);
}

.msdp[data-expanded="true"] .msdp-extra {
	grid-template-columns: 1fr;
}

.msdp-extra-in {
	display: flex;
	align-items: center;
	gap: var(--msdp-gap);
	min-width: 0;
	overflow: hidden;
	padding-inline: var(--msdp-gap); /* keeps the gaps either side of the extra controls equal */
}

/* The strip clips its overflow, so focus rings there sit inside the control. */
.msdp-extra-in .msdp-btn:focus-visible {
	outline-offset: -2px;
}

.msdp-extra-in > * {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 180ms var(--msdp-ease), transform 220ms var(--msdp-ease);
}

.msdp[data-expanded="true"] .msdp-extra-in > * {
	opacity: 1;
	transform: none;
}

.msdp[data-expanded="true"] .msdp-extra-in > :nth-child(1) { transition-delay: 60ms; }
.msdp[data-expanded="true"] .msdp-extra-in > :nth-child(2) { transition-delay: 100ms; }
.msdp[data-expanded="true"] .msdp-extra-in > :nth-child(3) { transition-delay: 140ms; }

/* ---------- Volume ---------- */

.msdp-volume {
	--msdp-fill: 60%;
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 80px;
	height: var(--msdp-btn);
	margin: 0 var(--msdp-gap) 0 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.msdp-volume::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--msdp-fg-hover) var(--msdp-fill), var(--border, #626f84) var(--msdp-fill));
}

.msdp-volume::-moz-range-track {
	height: 2px;
	border-radius: 2px;
	background: var(--border, #626f84);
}

.msdp-volume::-moz-range-progress {
	height: 2px;
	border-radius: 2px;
	background: var(--msdp-fg-hover);
}

.msdp-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var(--msdp-fg);
	transition: transform 150ms var(--msdp-ease), background-color 150ms var(--msdp-ease);
}

.msdp-volume::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--msdp-fg);
	transition: transform 150ms var(--msdp-ease), background-color 150ms var(--msdp-ease);
}

.msdp-volume:hover::-webkit-slider-thumb,
.msdp-volume:focus-visible::-webkit-slider-thumb {
	transform: scale(1.17);
	background: var(--ink, #fff);
}

.msdp-volume:hover::-moz-range-thumb,
.msdp-volume:focus-visible::-moz-range-thumb {
	transform: scale(1.17);
	background: var(--ink, #fff);
}

.msdp-volume:focus-visible {
	outline: 2px solid var(--msdp-accent);
	outline-offset: -2px;
	border-radius: 4px;
}

.msdp[data-muted="true"] .msdp-volume {
	opacity: 0.5;
}

/* ---------- Playlist ---------- */

.msdp-list {
	width: max-content;
	min-width: 100%;
	max-width: min(280px, calc(100vw - 2 * var(--space-s, 16px)));
	padding: var(--space-2xs, 8px) calc(var(--msdp-pad) + 2px);
	border-radius: var(--radius-lg, 16px);
	background: var(--surface-sunken, #04060b);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 12px 32px rgb(0 0 0 / 0.5);
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	visibility: hidden;
	transition: opacity 180ms var(--msdp-ease), transform 220ms var(--msdp-ease), visibility 0s linear 220ms;
}

.msdp[data-list="true"] .msdp-list {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.msdp-songs {
	max-height: calc(32px * 6);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--border, #626f84) transparent;
}

.msdp-songs li {
	margin: 0;
	padding: 0;
}

.msdp-song {
	all: unset;
	box-sizing: border-box; /* all: unset resets it */
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 32px;
	padding: 0 8px;
	border-radius: var(--radius-sm, 6px);
	font-size: var(--text-xs, 13px);
	line-height: 1;
	color: var(--ink-body, #d5d8dc);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms var(--msdp-ease), color 150ms var(--msdp-ease);
}

.msdp-song:hover {
	background: rgb(255 255 255 / 0.06);
	color: var(--ink, #fff);
}

.msdp-song-title {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.msdp-song-artist {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: auto;
	padding-left: 8px;
	color: var(--msdp-fg);
	overflow: hidden;
	text-overflow: ellipsis;
}

.msdp-song[aria-current="true"] {
	color: var(--msdp-accent);
}

/* Equaliser: shown on the current song, animated while playing. */
.msdp-eq {
	display: none;
	align-items: flex-end;
	gap: 2px;
	flex: none;
	width: 10px;
	height: 10px;
}

.msdp-song[aria-current="true"] .msdp-eq {
	display: flex;
}

.msdp-eq i {
	flex: 1;
	height: 40%;
	border-radius: 1px;
	background: currentColor;
	transform-origin: bottom;
}

.msdp-eq i:nth-child(2) { height: 100%; }
.msdp-eq i:nth-child(3) { height: 65%; }

.msdp[data-playing="true"] .msdp-eq i {
	animation: msdp-eq 0.9s ease-in-out infinite alternate;
}

.msdp[data-playing="true"] .msdp-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.msdp[data-playing="true"] .msdp-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }

@keyframes msdp-eq {
	from { transform: scaleY(0.3); }
	to { transform: scaleY(1); }
}

/* Screen-reader announcements. */
.msdp-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Small screens ---------- */

@media (max-width: 478px) {
	.msdp {
		right: var(--space-s, 16px);
		bottom: var(--space-s, 16px);
	}

	.msdp--no-mobile {
		display: none;
	}
}

/* Touch screens: the slider is hard to use at 80px; give it more room. */
@media (pointer: coarse) {
	.msdp-volume {
		width: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msdp *,
	.msdp *::before,
	.msdp *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}