/**
 * Icon block – front-end styles.
 *
 * @package wuppi
 */

.wp-block-wuppi-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.wuppi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: opacity 0.15s ease;
}

.wuppi-icon svg {
	width: var(--wuppi-icon-size, 24px);
	height: var(--wuppi-icon-size, 24px);
	min-width: var(--wuppi-icon-size, 24px);
	min-height: var(--wuppi-icon-size, 24px);
	stroke: var(--wuppi-icon-color, currentColor);
	fill: none;
	display: block;
}

/* ── Link wrapper ──────────────────────────────────────────────────────── */

.wuppi-icon-link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

.wuppi-icon-link:hover .wuppi-icon {
	opacity: 0.75;
}

.wuppi-icon-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 2px;
	border-radius: 2px;
}