:root {
	--wbx-icon-size: 1.5rem;
}

.wbx-icon {
	display: inline-block;
	inline-size: var(--wbx-icon-size);
	block-size: var(--wbx-icon-size);
	flex: 0 0 auto;
	vertical-align: -0.18em;
	color: currentColor;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
	transition: transform 180ms ease, color 180ms ease, opacity 180ms ease;
}

.wbx-icon--sm {
	--wbx-icon-size: 1.125rem;
}

.wbx-icon--md {
	--wbx-icon-size: 1.5rem;
}

.wbx-icon--lg {
	--wbx-icon-size: 2rem;
}

.wbx-icon--xl {
	--wbx-icon-size: 2.75rem;
}

.wbx-icon--navy {
	color: var(--wbx-color-navy);
}

.wbx-icon--violet {
	color: var(--wbx-color-violet);
}

.wbx-icon--mint {
	color: var(--wbx-color-mint);
}

.wbx-icon--coral {
	color: var(--wbx-color-coral);
}

.wbx-icon-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.wbx-icon-badge {
	inline-size: calc(var(--wbx-icon-size) + 1.5rem);
	block-size: calc(var(--wbx-icon-size) + 1.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--small);
	background: color-mix(in srgb, currentColor 12%, var(--wbx-color-white));
	box-shadow: var(--wbx-shadow-soft);
}
.wbx-icon-badge:not(.wbx-icon--navy):not(.wbx-icon--violet):not(.wbx-icon--mint):not(.wbx-icon--coral) {
	color: var(--wbx-color-violet);
}


.wbx-icon-link,
.wp-block-button__link:has(.wbx-icon) {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.wbx-card:is(:hover, :focus-within) .wbx-icon,
.wbx-icon-link:is(:hover, :focus-visible) .wbx-icon,
.wp-block-button__link:is(:hover, :focus-visible) .wbx-icon {
	transform: translateX(0.08rem) translateY(-0.04rem);
}

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

	.wbx-card:is(:hover, :focus-within) .wbx-icon,
	.wbx-icon-link:is(:hover, :focus-visible) .wbx-icon,
	.wp-block-button__link:is(:hover, :focus-visible) .wbx-icon {
		transform: none;
	}
}