/**
 * Icon System Styles
 * Base styles for SVG icon system
 */

/* Base icon styles */
.icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	flex-shrink: 0;
}

/* Icon size variations */
.icon--sm {
	width: 16px;
	height: 16px;
}

.icon--md {
	width: 24px;
	height: 24px;
}

.icon--lg {
	width: 32px;
	height: 32px;
}

.icon--xl {
	width: 40px;
	height: 40px;
}

/* Icon positioning helpers */
.icon--before {
	margin-right: 0.5em;
}

.icon--after {
	margin-left: 0.5em;
}

/* Interactive icon states */
a:hover .icon,
button:hover .icon {
	opacity: 0.8;
}

a:active .icon,
button:active .icon {
	opacity: 0.6;
}

/* Spinning animation for loading states */
@keyframes icon-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.icon--spin {
	animation: icon-spin 1s linear infinite;
}