/* TRU Animated SVG Icon: draw-in plus per-icon hover choreography (also used inside .tru-hover-group). */
.tru-icon-wrap {
	display: flex;
}

.tru-icon {
	--tru-icon-size: 48px;
	--tru-icon-color: currentColor;
	--tru-icon-hover: var(--tru-icon-color);
	--tru-icon-shape: var(--tru-line-strong);
	display: inline-grid;
	place-items: center;
	color: var(--tru-icon-color);
	line-height: 0;
	text-decoration: none;
	transition: color var(--tru-dur) var(--tru-ease);
}

.tru-icon svg {
	width: var(--tru-icon-size);
	height: var(--tru-icon-size);
	overflow: visible;
}

.tru-icon--shape-circle,
.tru-icon--shape-square {
	padding: calc(var(--tru-icon-size) * 0.32);
	border: 1px solid var(--tru-icon-shape);
}

.tru-icon--shape-circle {
	border-radius: 50%;
}

a.tru-icon:hover,
a.tru-icon:focus-visible,
[data-tru-hover]:hover,
.tru-hover-group:hover .tru-icon,
.tru-hover-group:focus-within .tru-icon {
	color: var(--tru-icon-hover);
}

/* Shared icon feedback is loaded globally from icon-motion.css. */