.wab-wrap {
	display: inline-block;
	line-height: 0;
}

.wab-btn {
	--wab-size: 64px;
	--wab-bg: #DFAA2F;
	--wab-icon: #ffffff;
	--wab-pulse: #DFAA2F;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wab-size);
	height: var(--wab-size);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wab-bg);
	color: var(--wab-icon);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.wab-btn:hover,
.wab-btn:focus {
	background: var(--wab-bg);
	color: var(--wab-icon);
	transform: scale(1.08);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
	outline: none;
}

.wab-btn:focus-visible {
	outline: 2px solid var(--wab-icon);
	outline-offset: 3px;
}

.wab-btn:active {
	transform: scale(.95);
}

/* pulse ring */
.wab-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wab-pulse);
	opacity: .5;
	pointer-events: none;
	animation: wab-pulse 2s ease-out infinite;
}

.wab-btn.is-playing .wab-ring {
	animation-duration: 1.2s;
}

@keyframes wab-pulse {
	0%   { transform: scale(1);   opacity: .5; }
	100% { transform: scale(1.7); opacity: 0;  }
}

/* icons */
.wab-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42%;
	height: 42%;
}

.wab-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--wab-icon);
}

.wab-icon-play svg {
	transform: translateX(6%);
}

.wab-icon-pause {
	display: none;
}

.wab-btn.is-playing .wab-icon-play {
	display: none;
}

.wab-btn.is-playing .wab-icon-pause {
	display: flex;
}

@media (prefers-reduced-motion: reduce) {
	.wab-ring { animation: none; opacity: 0; }
	.wab-btn  { transition: none; }
}