.radio-player-source {
	align-items: center;
	background: var(--radio-player-button-bg, #f3f5f6);
	border: 1px solid var(--radio-player-border, #1b1f23);
	box-shadow: none;
	color: var(--radio-player-button-fg, #1b1f23);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 0.7rem;
	letter-spacing: 0;
	margin-block: 0.75rem;
	min-block-size: 2.9rem;
	padding: 0.85rem 1rem;
	position: relative;
}

.radio-player-source:hover,
.radio-player-source:focus-visible {
	background: var(--radio-player-button-bg-hover, #fff);
	outline: 2px solid var(--radio-player-focus, #0a7c8c);
	outline-offset: 3px;
}

.radio-player-source.is-playing,
.radio-player-source[aria-pressed="true"] {
	box-shadow:
		inset 2px 2px 0 var(--radio-player-bevel-dark, #6f7680),
		inset -2px -2px 0 var(--radio-player-bevel-light, #fff);
	transform: translate(2px, 2px);
}

.radio-player-source.is-playing .radio-player-source__icon,
.radio-player-source[aria-pressed="true"] .radio-player-source__icon {
	border: 0;
	block-size: 0.7rem;
	display: inline-grid;
	gap: 0.18rem;
	grid-template-columns: repeat(2, 0.22rem);
	inline-size: 0.62rem;
}

.radio-player-source.is-playing .radio-player-source__icon::before,
.radio-player-source.is-playing .radio-player-source__icon::after,
.radio-player-source[aria-pressed="true"] .radio-player-source__icon::before,
.radio-player-source[aria-pressed="true"] .radio-player-source__icon::after {
	background: currentColor;
	content: "";
	display: block;
}

.radio-player-source__icon {
	block-size: 0;
	border-block: 0.45rem solid transparent;
	border-inline-start: 0.7rem solid currentColor;
	display: inline-block;
	inline-size: 0;
}

.radio-player {
	background: var(--radio-player-bg, #ffffff);
	border-block-start: 1px solid var(--radio-player-border, #d2d7db);
	box-shadow: 0 -8px 24px rgb(0 0 0 / 12%);
	color: var(--radio-player-fg, #111416);
	inset-block-end: 0;
	inset-inline: 0;
	position: fixed;
	z-index: 50;
}

.radio-player__inner {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.4fr);
	margin-inline: auto;
	max-inline-size: 76rem;
	padding: 0.75rem 1rem;
}

.radio-player__eyebrow,
.radio-player__title,
.radio-player__subtitle {
	margin: 0;
}

.radio-player__eyebrow {
	color: var(--radio-player-muted, #4b5b61);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: none;
}

.radio-player__title {
	font-size: 1rem;
	font-weight: 700;
}

.radio-player__subtitle {
	color: var(--radio-player-muted, #4b5b61);
	font-size: 0.85rem;
}

.radio-player__transport {
	align-items: center;
	display: grid;
	gap: 0.9rem;
	grid-template-columns: auto minmax(8rem, 1fr) minmax(7rem, auto);
}

.radio-player__toggle {
	align-items: center;
	background: var(--radio-player-button-bg, #f3f5f6);
	border: 1px solid var(--radio-player-border, #1b1f23);
	border-radius: 0;
	color: var(--radio-player-button-fg, #1b1f23);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 700;
	gap: 0.7rem;
	justify-content: center;
	min-block-size: 3rem;
	min-inline-size: 5.5rem;
	padding: 0.65rem 0.9rem;
}

.radio-player__toggle:hover,
.radio-player__toggle:focus-visible {
	background: var(--radio-player-button-bg-hover, #fff);
	color: var(--radio-player-button-fg, #1b1f23);
	outline: 2px solid var(--radio-player-focus, #0a7c8c);
	outline-offset: 3px;
}

.radio-player__toggle-icon {
	block-size: 0;
	border-block: 0.45rem solid transparent;
	border-inline-start: 0.7rem solid currentColor;
	display: inline-block;
	inline-size: 0;
}

.radio-player.is-playing .radio-player__toggle-icon {
	border: 0;
	block-size: 0.7rem;
	display: inline-grid;
	gap: 0.18rem;
	grid-template-columns: repeat(2, 0.22rem);
	inline-size: 0.62rem;
}

.radio-player.is-playing .radio-player__toggle-icon::before,
.radio-player.is-playing .radio-player__toggle-icon::after {
	background: currentColor;
	content: "";
	display: block;
}

.radio-player.is-error .radio-player__toggle {
	background: var(--radio-player-error-bg, #bf2f4a);
	border-color: var(--radio-player-error-border, #6d1021);
	color: var(--radio-player-error-fg, #fff8fb);
}

.radio-player.is-error .radio-player__toggle:hover,
.radio-player.is-error .radio-player__toggle:focus-visible {
	background: var(--radio-player-error-bg-hover, #d63c59);
	outline-color: var(--radio-player-error-border, #6d1021);
}

.radio-player__timeline {
	display: grid;
	gap: 0.35rem;
}

.radio-waveform {
	align-items: end;
	block-size: 2rem;
	display: flex;
	gap: 2px;
	opacity: 0.56;
	overflow: hidden;
}

.radio-waveform span {
	background: linear-gradient(180deg, var(--radio-player-wave-a, #4a90e2), var(--radio-player-wave-b, #8ac6ff));
	block-size: var(--bar-height);
	display: block;
	flex: 1;
	min-inline-size: 2px;
	transform-origin: 50% 100%;
	transition: block-size 140ms linear, opacity 140ms linear;
}

.radio-waveform.is-animated {
	opacity: 0.78;
}

.radio-waveform.is-mock span {
	opacity: 0.82;
}

.radio-player__seek,
.radio-player__volume input {
	accent-color: var(--radio-player-accent, #111416);
	appearance: none;
	inline-size: 100%;
}

.radio-player__seek::-webkit-slider-runnable-track,
.radio-player__volume input::-webkit-slider-runnable-track {
	background: var(--radio-player-track, #d9dfe4);
	block-size: 0.65rem;
	border: 1px solid var(--radio-player-border, #1b1f23);
}

.radio-player__seek::-webkit-slider-thumb,
.radio-player__volume input::-webkit-slider-thumb {
	appearance: none;
	background: var(--radio-player-thumb, #f5f6f7);
	block-size: 1.1rem;
	border: 1px solid var(--radio-player-border, #1b1f23);
	box-shadow: inset 1px 1px 0 var(--radio-player-bevel-light, #fff), inset -1px -1px 0 var(--radio-player-bevel-dark, #6f7680);
	inline-size: 1rem;
	margin-block-start: -0.25rem;
}

.radio-player__seek::-moz-range-track,
.radio-player__volume input::-moz-range-track {
	background: var(--radio-player-track, #d9dfe4);
	block-size: 0.65rem;
	border: 1px solid var(--radio-player-border, #1b1f23);
}

.radio-player__seek::-moz-range-thumb,
.radio-player__volume input::-moz-range-thumb {
	background: var(--radio-player-thumb, #f5f6f7);
	block-size: 1.1rem;
	border: 1px solid var(--radio-player-border, #1b1f23);
	box-shadow: inset 1px 1px 0 var(--radio-player-bevel-light, #fff), inset -1px -1px 0 var(--radio-player-bevel-dark, #6f7680);
	inline-size: 1rem;
}

.radio-player__time,
.radio-player__volume {
	align-items: center;
	color: var(--radio-player-muted, #4b5b61);
	display: flex;
	font-size: 0.78rem;
	gap: 0.5rem;
	justify-content: space-between;
}

.radio-player__volume span {
	font-size: 0.72rem;
	font-weight: 700;
}

.radio-player.is-live .radio-player__seek,
.radio-player.is-live [data-radio-player-current] {
	display: none;
}

.radio-player.is-live .radio-player__time {
	justify-content: flex-end;
}

@media (max-width: 720px) {
	.radio-player__inner {
		display: grid;
		grid-template-columns: 2.35rem minmax(0, 1fr);
		min-block-size: 3.75rem;
		padding: 0.35rem 0.8rem 0.75rem;
		position: relative;
	}

	.radio-player__transport {
		display: contents;
	}

	.radio-player__toggle {
		block-size: 2.25rem;
		grid-column: 1;
		grid-row: 1;
		inline-size: 2.25rem;
		min-block-size: 2.25rem;
		min-inline-size: 2.25rem;
		padding: 0;
	}

	.radio-player__toggle [data-radio-player-toggle-label],
	.radio-player__eyebrow,
	.radio-player__subtitle,
	.radio-player__volume,
	.radio-player__time,
	.radio-waveform {
		display: none;
	}

	.radio-player__title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.radio-player__timeline {
		inset-block-end: 0.25rem;
		inset-inline: 0.8rem;
		position: absolute;
	}
}