.kb-clap {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 2.2rem 0;
}

.kb-clap-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	flex: none;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--muted, #e0ddd4);
	background: var(--wp--preset--color--base, #ffffff);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.kb-clap-button:hover:not(:disabled) {
	background: var(--wp--preset--color--highlight, #f3d98b);
}

.kb-clap-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #c98a4b);
	outline-offset: 2px;
}

.kb-clap-button.is-clapping {
	transform: scale(1.3) rotate(-8deg);
}

.kb-clap-button:disabled,
.kb-clap-button.is-maxed {
	cursor: default;
	opacity: 0.55;
}

.kb-clap-count {
	font-weight: 700;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}