/**
 * Icon System Styles
 * SVG icon base styles and variants
 *
 * @package Papagid
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════
   Base Icon Styles
   ═══════════════════════════════════════════════════════════ */

.icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	fill: currentColor;
	transition: transform 0.2s ease, fill 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════
   Icon Sizes
   ═══════════════════════════════════════════════════════════ */

.icon--xs {
	width: 16px;
	height: 16px;
}

.icon--sm {
	width: 20px;
	height: 20px;
}

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

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

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

.icon--2xl {
	width: 64px;
	height: 64px;
}

/* ═══════════════════════════════════════════════════════════
   Icon Wrappers (with background)
   ═══════════════════════════════════════════════════════════ */

.icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full, 9999px);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon wrap sizes */
.icon-wrap--sm {
	width: 32px;
	height: 32px;
	padding: 6px;
}

.icon-wrap--md {
	width: 40px;
	height: 40px;
	padding: 8px;
}

.icon-wrap--lg {
	width: 56px;
	height: 56px;
	padding: 12px;
}

.icon-wrap--xl {
	width: 72px;
	height: 72px;
	padding: 16px;
}

.icon-wrap--2xl {
	width: 96px;
	height: 96px;
	padding: 20px;
}

/* Icon wrap color variants */
.icon-wrap--pink {
	background: var(--color-pink-50, #FDF2F4);
	color: var(--color-pink-400, #E57B8A);
}

.icon-wrap--teal {
	background: var(--color-teal-50, #EEF7F5);
	color: var(--color-teal-400, #4D9E91);
}

.icon-wrap--lavender {
	background: var(--color-lavender-50, #F5F0FA);
	color: var(--color-lavender-300, #A888C0);
}

.icon-wrap--neutral {
	background: var(--color-neutral-100, #F0EEE9);
	color: var(--color-neutral-600, #6B6560);
}

/* Hover states */
.icon-wrap:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-md, 0 4px 6px rgba(31, 27, 24, 0.07));
}

.icon-wrap--pink:hover {
	background: var(--color-pink-100, #FBDFE4);
}

.icon-wrap--teal:hover {
	background: var(--color-teal-100, #C8E8E2);
}

.icon-wrap--lavender:hover {
	background: var(--color-lavender-100, #E8DAEF);
}

.icon-wrap--neutral:hover {
	background: var(--color-neutral-200, #E2DDD7);
}