:root {
	--nm-radio-rail-height: 52px;
	--nm-radio-widget-height: 60px;
}


.nm-radio,
.nm-radio * {
	box-sizing: border-box;
}


.nm-radio {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;

	z-index: 9998;

	color: #fff;
	background: #050505;

	border-top: 1px solid rgba(255, 255, 255, 0.18);
}


/*
|--------------------------------------------------------------------------
| Information drawer
|--------------------------------------------------------------------------
*/

.nm-radio__drawer {
	max-height: 0;

	overflow: hidden;

	background: #050505;

	opacity: 0;

	transform: translateY(20px);

	cursor: pointer;

	transition:
		max-height 240ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 180ms ease,
		transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}


.nm-radio.is-expanded
.nm-radio__drawer {
	max-height: 260px;

	opacity: 1;

	transform: translateY(0);
}


.nm-radio__drawer-inner {
	display: grid;
	grid-template-columns:
		150px
		minmax(0, 1fr);
	gap: 30px;
	align-items: center;

	max-width: 1600px;

	margin: 0 auto;
	padding: 24px clamp(22px, 4vw, 64px);

	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


.nm-radio__artwork-wrap {
	width: 150px;
	height: 150px;

	overflow: hidden;

	background: #111;
}


.nm-radio__artwork {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.nm-radio__drawer-content {
	min-width: 0;
}


.nm-radio__drawer-eyebrow {
	margin-bottom: 6px;

	font-size: 9px;
	letter-spacing: 0.22em;

	opacity: 0.48;
}


.nm-radio__drawer-episode {
	margin-bottom: 8px;

	font-size: 12px;
	letter-spacing: 0.08em;

	opacity: 0.62;
}


.nm-radio__drawer-title {
	max-width: 1000px;

	font-size: clamp(20px, 2.4vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}


.nm-radio__drawer-tags {
	margin-top: 15px;

	font-size: 9px;
	letter-spacing: 0.11em;
	text-transform: uppercase;

	opacity: 0.4;
}


.nm-radio__drawer-controls {
	display: flex;
	align-items: center;
	gap: 4px;

	margin-top: 18px;
}


/*
|--------------------------------------------------------------------------
| Collapsed information rail
|--------------------------------------------------------------------------
*/

.nm-radio__rail {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr);
	gap: 12px;
	align-items: center;

	height: var(--nm-radio-rail-height);

	padding-right: clamp(12px, 2vw, 28px);
	padding-left: clamp(12px, 2vw, 28px);

	background: #050505;
}


.nm-radio__rail-controls {
	display: flex;
	align-items: center;

	height: 100%;
}


.nm-radio__rail-meta {
	display: flex;
	align-items: center;
	gap: 8px;

	min-width: 0;
	width: 100%;
	height: 100%;

	padding: 0;

	color: inherit;
	background: transparent;
	border: 0;

	font: inherit;
	text-align: left;

	white-space: nowrap;

	cursor: pointer;
}


.nm-radio__rail-meta:hover
.nm-radio__rail-title,
.nm-radio__rail-meta:focus-visible
.nm-radio__rail-title {
	opacity: 0.72;
}


.nm-radio__rail-eyebrow {
	flex: 0 0 auto;

	font-size: 8px;
	letter-spacing: 0.22em;

	opacity: 0.44;
}


.nm-radio__rail-episode {
	flex: 0 0 auto;

	font-size: 12px;

	opacity: 0.9;
}


.nm-radio__rail-separator {
	flex: 0 0 auto;

	opacity: 0.45;
}


.nm-radio__rail-title {
	min-width: 0;

	overflow: hidden;

	font-size: 14px;
	letter-spacing: -0.01em;

	text-overflow: ellipsis;
}


/*
|--------------------------------------------------------------------------
| Controls
|--------------------------------------------------------------------------
*/

.nm-radio__nav,
.nm-radio__expand,
.nm-radio__collapse {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 100%;

	padding: 0;

	color: #fff;
	background: transparent;

	border: 0;

	font: inherit;
	font-size: 15px;
	line-height: 1;

	cursor: pointer;

	opacity: 0.55;

	transition:
		opacity 150ms ease,
		transform 150ms ease;
}


.nm-radio__drawer-controls
.nm-radio__nav,
.nm-radio__drawer-controls
.nm-radio__collapse {
	height: 38px;
}


.nm-radio__nav:hover,
.nm-radio__nav:focus-visible,
.nm-radio__expand:hover,
.nm-radio__expand:focus-visible,
.nm-radio__collapse:hover,
.nm-radio__collapse:focus-visible {
	opacity: 1;

	transform: scale(1.08);
}


/*
|--------------------------------------------------------------------------
| Expanded state
|--------------------------------------------------------------------------
*/

.nm-radio.is-expanded
.nm-radio__rail {
	display: none;
}


/*
|--------------------------------------------------------------------------
| Official Mixcloud transport
|--------------------------------------------------------------------------
*/

.nm-radio__mixcloud {
	width: 100%;
	height: var(--nm-radio-widget-height);

	background: #22272b;

	border-top: 1px solid rgba(255, 255, 255, 0.11);
}


.nm-radio__widget {
	display: block;

	width: 100%;
	height: var(--nm-radio-widget-height);

	border: 0;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

	:root {
		--nm-radio-rail-height: 46px;
	}


	.nm-radio__rail {
		grid-template-columns:
			auto
			minmax(0, 1fr);

		gap: 6px;

		padding-right: 8px;
		padding-left: 6px;
	}


	.nm-radio__nav,
	.nm-radio__expand {
		width: 30px;

		font-size: 13px;
	}


	.nm-radio__rail-eyebrow,
	.nm-radio__rail-separator {
		display: none;
	}


	.nm-radio__rail-episode {
		font-size: 9px;
	}


	.nm-radio__rail-title {
		font-size: 11px;
	}


	.nm-radio__drawer-inner {
		grid-template-columns:
			90px
			minmax(0, 1fr);

		gap: 16px;

		padding: 18px 16px;
	}


	.nm-radio__artwork-wrap {
		width: 90px;
		height: 90px;
	}


	.nm-radio__drawer-controls {
		justify-content: flex-start;
	}


	.nm-radio__drawer-title {
		font-size: 17px;
	}


	.nm-radio__drawer-tags {
		display: none;
	}

}


@media (max-width: 420px) {

	.nm-radio__rail-title {
		max-width: 42vw;
	}


	.nm-radio__drawer-inner {
		grid-template-columns:
			72px
			minmax(0, 1fr);
	}


	.nm-radio__artwork-wrap {
		width: 72px;
		height: 72px;
	}

}


@media (prefers-reduced-motion: reduce) {

	.nm-radio__drawer,
	.nm-radio__nav,
	.nm-radio__expand,
	.nm-radio__collapse {
		transition: none;
	}

}