.single-waveform {
	width: 100%;
	min-width: 0;
	margin-top: 18px;
	padding: 10px 13px 8px;
	box-sizing: border-box;
	direction: rtl;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.track-player-row {
	display: grid;
	min-width: 0;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
}

.track-player-toggle {
	display: inline-grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #713cff 0%, #9b5cff 58%, #36c9f6 140%);
	box-shadow: 0 10px 28px rgba(113, 60, 255, 0.28);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.track-player-toggle:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(113, 60, 255, 0.36);
}

.track-player-toggle:active:not(:disabled) {
	transform: scale(0.96);
}

.track-player-toggle:focus-visible {
	outline: 3px solid rgba(113, 60, 255, 0.2);
	outline-offset: 4px;
}

.track-player-toggle:disabled {
	opacity: 0.48;
	cursor: wait;
}

.track-player-toggle svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.track-player-toggle .track-player-icon-pause,
.track-player-toggle.is-playing .track-player-icon-play {
	display: none;
}

.track-player-toggle.is-playing .track-player-icon-pause {
	display: block;
}

.track-player-waveform {
	min-width: 0;
}

.waveform-player {
	position: relative;
	width: 100%;
	height: 52px;
	overflow: hidden;
	cursor: pointer;
	touch-action: manipulation;
}

.waveform-player canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.track-player-waveform .waveform-player {
	--waveform-body-gap: 0;
	--waveform-track-gap: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.track-player-waveform .waveform-loading {
	background: transparent;
}

.track-player-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	color: #8f8b9b;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	user-select: none;
}

[data-track-current-time],
[data-track-duration] {
	font-size: 13px !important;
}

@media (max-width: 600px) {
	.single-waveform {
		margin-top: 14px;
		padding-inline: 10px;
	}

	.track-player-row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 12px;
	}

	.track-player-toggle {
		width: 48px;
		height: 48px;
	}
}