/* SVG Icons styling */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* SVG icon sizes */
.svg-icon-xs {
    width: 0.75em;
    height: 0.75em;
}

.svg-icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.svg-icon-lg {
    width: 1.33em;
    height: 1.33em;
}

.svg-icon-xl {
    width: 1.5em;
    height: 1.5em;
}

.svg-icon-2x {
    width: 2em;
    height: 2em;
}

.svg-icon-3x {
    width: 3em;
    height: 3em;
}

/* Animation for certain icons */
.svg-icon-spin {
    animation: svg-icon-spin 2s infinite linear;
}

@keyframes svg-icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* For fixed width icons (like in lists) */
.svg-icon-fw {
    width: 1.25em;
    text-align: center;
}

/* Transition effects */
.svg-icon-transition {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Common hover effects */
a:hover .svg-icon-transition,
button:hover .svg-icon-transition {
    transform: translateY(-2px);
}