/* استایل‌های آیکون‌های SVG اختصاصی */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* رنگ‌های پیش‌فرض برای آیکون‌ها */
.icon svg {
    color: currentColor;
    fill: currentColor;
}

/* اندازه‌های مختلف */
.icon-xs {
    width: 12px;
    height: 12px;
}

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

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

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

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

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

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

/* انیمیشن برای آیکون sync */
.icon-sync {
    animation: spin 1s linear infinite;
}

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

/* استایل برای آیکون‌های قابل کلیک */
.icon-clickable {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.icon-clickable:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.icon-clickable:active {
    transform: scale(0.95);
}