/**
 * Direct SVG Icon Styles
 * Styles for inline SVG icons without wrapper elements
 */

/* Default SVG icon styles */
svg {
    vertical-align: middle;
    fill: currentColor;
}

/* Icon sizing - can be applied directly to SVG or parent elements */
svg.icon-sm,
.icon-sm svg {
    width: 18px;
    height: 18px;
}

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

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

/* Spinning animation for loading icons */
svg.spinning,
.spinning svg {
    animation: spin 1s linear infinite;
}

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

/* Color utilities for SVG icons */
svg.text-red-500,
.text-red-500 svg {
    fill: #ef4444;
}

svg.text-green-500,
.text-green-500 svg {
    fill: #10b981;
}

svg.text-blue-500,
.text-blue-500 svg {
    fill: #3b82f6;
}

svg.text-gray-500,
.text-gray-500 svg {
    fill: #6b7280;
}

svg.text-4xl,
.text-4xl svg {
    width: 2.25rem;
    height: 2.25rem;
}

/* Ensure icons work in buttons */
button svg,
a svg {
    pointer-events: none;
    vertical-align: middle;
}

/* SVG icon with text spacing */
svg + span,
span + svg {
    margin-left: 0.5rem;
}

/* Flex container support for icons */
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}