.sabw-wf {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
}

.sabw-wf-button {
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #a6822f;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.sabw-wf-button:hover {
	transform: scale(1.04);
}

.sabw-wf-button:active {
	transform: scale(0.98);
}

.sabw-wf-button svg {
	width: 34%;
	height: 34%;
	fill: #1a1a1a;
	pointer-events: none;
}

.sabw-wf-button .sabw-wf-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.sabw-wf-main {
	flex: 1 1 auto;
	min-width: 0;
}

.sabw-wf-eyebrow {
	margin: 0 0 0.35em;
}

.sabw-wf-title {
	margin: 0 0 0.15em;
}

.sabw-wf-subtitle {
	margin: 0 0 0.75em;
}

/* Waveform: two identical bar layers, the played one clipped to the progress point. */
.sabw-wf-wave {
	--sabw-progress: 0%;
	position: relative;
	width: 100%;
	height: 96px;
	cursor: pointer;
	touch-action: none;
	overflow: hidden;
}

.sabw-wf-wave:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.sabw-wf-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1px;
	pointer-events: none;
}

.sabw-wf-layer--played {
	clip-path: inset(0 calc(100% - var(--sabw-progress)) 0 0);
}

.sabw-wf-bar {
	flex: 1 1 0;
	min-width: 1px;
	height: 22%;
	background-color: #a89880;
	transition: height 0.25s ease;
}

.sabw-wf-layer--played .sabw-wf-bar {
	background-color: #4a3b28;
}

.sabw-wf-times {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
	.sabw-wf-bar,
	.sabw-wf-button {
		transition: none;
	}
}

@media (max-width: 600px) {
	.sabw-wf {
		gap: 14px;
	}
}