/**
 * Icon System CSS
 * Utilities for SVG icon sizing and behavior
 * ============================================
 */

/* Base icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    fill: currentColor;
}

/* Ensure Tailwind's `hidden` works with icons */
.icon.hidden,
.hidden.icon,
.hidden .icon {
    display: none !important;
}

/* Icon size utilities */
.icon-xs {
    width: 14px;
    height: 14px;
}

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

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

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

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

/* Custom sizes via inline styles */
.icon[style*="--icon-size"] {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* Animated icons */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Icon button styles - icons inside clickable elements */
button .icon,
a .icon,
.btn .icon {
    pointer-events: none;
}

/* Icon with text spacing */
.icon + span,
span + .icon {
    margin-left: 0.375rem;
}

/* Transition for hover effects */
.icon {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover scale effect (opt-in) */
.icon-hover-scale:hover {
    transform: scale(1.1);
}

/* Icon colors inherit from text by default (currentColor) */
/* Use Tailwind classes like text-white, text-gray-500, etc. for coloring */