/**
 * Round icon button: template-parts/ui/icon-button.php (Style Guide 2299:1300).
 * 48px circle, 20px icon. Hover is not designed: see docs/launch-checklist.md.
 */

.icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--icon-button-size);
	height: var(--icon-button-size);
	margin: 0;
	padding: 0;
	border: 1px solid var(--icon-btn-border, transparent);
	border-radius: 50%;
	background: var(--icon-btn-bg);
	color: var(--icon-btn-fg);
	cursor: pointer;
	transition: all 0.2s ease;
}

.icon-btn--light {
	--icon-btn-bg: var(--color-white);
	--icon-btn-fg: var(--color-ink);
	--icon-btn-border: var(--color-line);
}

.icon-btn--cream {
	--icon-btn-bg: var(--color-cream);
	--icon-btn-fg: var(--color-ink);
}

.icon-btn--orange {
	--icon-btn-bg: var(--color-orange);
	--icon-btn-fg: var(--color-white);
}

.icon-btn--dark {
	--icon-btn-bg: var(--color-ink);
	--icon-btn-fg: var(--color-white);
}

.icon-btn--light:hover,
.icon-btn--light.is-hover {
	border-color: var(--color-ink);
}

.icon-btn--cream:hover,
.icon-btn--cream.is-hover {
	background: var(--color-line);
}

.icon-btn--orange:hover,
.icon-btn--orange.is-hover {
	background: var(--color-orange-dark);
}

.icon-btn--dark:hover,
.icon-btn--dark.is-hover {
	background: var(--color-green);
	border-color: var(--color-green);
}

.icon-btn:disabled,
.icon-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.icon-btn {
		transition: none;
	}
}