/**
 * Team Portal SVG Icons Styles
 * 
 * @description أنماط لمكتبة الأيقونات SVG
 * @version 1.0.0
 * @since 3.0.0
 */

/* ==================== Base Icon Styles ==================== */

.tp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
    transition: all var(--tp-transition-base, 200ms);
}

.tp-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==================== Icon Sizes ==================== */

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

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

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

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

.tp-icon-xl {
    width: 40px;
    height: 40px;
}

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

/* ==================== Icon Colors ==================== */

.tp-icon-primary {
    color: var(--tp-primary-500, #3b82f6);
}

.tp-icon-success {
    color: var(--tp-success-500, #10b981);
}

.tp-icon-warning {
    color: var(--tp-warning-500, #f59e0b);
}

.tp-icon-danger {
    color: var(--tp-danger-500, #ef4444);
}

.tp-icon-info {
    color: var(--tp-info-500, #06b6d4);
}

.tp-icon-gray {
    color: var(--tp-gray-500, #6b7280);
}

.tp-icon-white {
    color: #ffffff;
}

/* ==================== Icon Hover Effects ==================== */

.tp-icon-hover:hover {
    transform: scale(1.1);
}

.tp-icon-rotate:hover {
    transform: rotate(15deg);
}

.tp-icon-pulse {
    animation: tp-icon-pulse 2s ease-in-out infinite;
}

@keyframes tp-icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.tp-icon-spin {
    animation: tp-icon-spin 1s linear infinite;
}

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

/* ==================== Icon in Buttons ==================== */

.tp-btn .tp-icon {
    margin-left: var(--tp-space-2, 0.5rem);
}

.tp-btn .tp-icon:first-child {
    margin-left: 0;
    margin-right: var(--tp-space-2, 0.5rem);
}

.tp-btn .tp-icon:only-child {
    margin: 0;
}

/* ==================== Icon in Badges ==================== */

.tp-badge .tp-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

/* ==================== Icon Containers ==================== */

.tp-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tp-radius-full, 50%);
    padding: var(--tp-space-2, 0.5rem);
}

.tp-icon-container-primary {
    background-color: var(--tp-primary-100, #dbeafe);
    color: var(--tp-primary-600, #2563eb);
}

.tp-icon-container-success {
    background-color: var(--tp-success-100, #d1fae5);
    color: var(--tp-success-600, #059669);
}

.tp-icon-container-warning {
    background-color: var(--tp-warning-100, #fef3c7);
    color: var(--tp-warning-600, #d97706);
}

.tp-icon-container-danger {
    background-color: var(--tp-danger-100, #fee2e2);
    color: var(--tp-danger-600, #dc2626);
}

.tp-icon-container-info {
    background-color: var(--tp-info-100, #cffafe);
    color: var(--tp-info-600, #0891b2);
}

/* ==================== Icon with Text ==================== */

.tp-icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2, 0.5rem);
}

.tp-icon-text .tp-icon {
    flex-shrink: 0;
}

/* ==================== Placeholder Icon ==================== */

.tp-icon-placeholder {
    background: var(--tp-gray-200, #e5e7eb);
    color: var(--tp-gray-500, #6b7280);
    font-size: 12px;
    font-weight: bold;
    border-radius: var(--tp-radius-base, 4px);
}

/* ==================== Dark Mode ==================== */

[data-theme="dark"] .tp-icon-primary {
    color: var(--tp-primary-400, #60a5fa);
}

[data-theme="dark"] .tp-icon-success {
    color: var(--tp-success-400, #34d399);
}

[data-theme="dark"] .tp-icon-warning {
    color: var(--tp-warning-400, #fbbf24);
}

[data-theme="dark"] .tp-icon-danger {
    color: var(--tp-danger-400, #f87171);
}

[data-theme="dark"] .tp-icon-info {
    color: var(--tp-info-400, #22d3ee);
}

[data-theme="dark"] .tp-icon-gray {
    color: var(--tp-gray-400, #9ca3af);
}

[data-theme="dark"] .tp-icon-placeholder {
    background: var(--tp-gray-700, #374151);
    color: var(--tp-gray-400, #9ca3af);
}

[data-theme="dark"] .tp-icon-container-primary {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--tp-primary-400, #60a5fa);
}

[data-theme="dark"] .tp-icon-container-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--tp-success-400, #34d399);
}

[data-theme="dark"] .tp-icon-container-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--tp-warning-400, #fbbf24);
}

[data-theme="dark"] .tp-icon-container-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--tp-danger-400, #f87171);
}

[data-theme="dark"] .tp-icon-container-info {
    background-color: rgba(6, 182, 212, 0.2);
    color: var(--tp-info-400, #22d3ee);
}

/* ==================== RTL Support ==================== */

[dir="rtl"] .tp-btn .tp-icon {
    margin-left: 0;
    margin-right: var(--tp-space-2, 0.5rem);
}

[dir="rtl"] .tp-btn .tp-icon:first-child {
    margin-right: 0;
    margin-left: var(--tp-space-2, 0.5rem);
}

[dir="rtl"] .tp-badge .tp-icon {
    margin-right: 0;
    margin-left: 4px;
}

/* ==================== Accessibility ==================== */

.tp-icon[aria-hidden="true"] {
    pointer-events: none;
}

.tp-icon:focus-visible {
    outline: 2px solid var(--tp-primary-500, #3b82f6);
    outline-offset: 2px;
    border-radius: var(--tp-radius-sm, 2px);
}

/* ==================== Responsive ==================== */

@media (max-width: 768px) {
    .tp-icon-2xl {
        width: 40px;
        height: 40px;
    }

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

/* ==================== Print ==================== */

@media print {
    .tp-icon {
        color: #000 !important;
    }

    .tp-icon-spin,
    .tp-icon-pulse {
        animation: none !important;
    }
}