/**
 * SVG Icons System
 * Custom icon library for DoronWeb
 * Replaces emoji with consistent SVG icons
 */

/* Base icon styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.icon-sm {
    width: 1em;
    height: 1em;
}

.icon-md {
    width: 1.5em;
    height: 1.5em;
}

.icon-lg {
    width: 2em;
    height: 2em;
}

.icon-xl {
    width: 3em;
    height: 3em;
}

/* Icon colors (predefined) */
.icon-primary {
    stroke: var(--primary-color, #007bff);
}

.icon-success {
    stroke: #28a745;
}

.icon-danger {
    stroke: #dc3545;
}

.icon-warning {
    stroke: #ffc107;
}

.icon-info {
    stroke: #17a2b8;
}

.icon-light {
    stroke: #f8f9fa;
}

.icon-dark {
    stroke: #343a40;
}

.icon-white {
    stroke: #ffffff;
}

/* Icon with background (circular) */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: var(--icon-bg, #f0f0f0);
    padding: 0.5em;
}

.icon-circle .icon {
    width: 1.2em;
    height: 1.2em;
}

/* Icon with background colors */
.icon-circle-primary {
    background-color: rgba(0, 123, 255, 0.1);
}

.icon-circle-primary .icon {
    stroke: #007bff;
}

.icon-circle-success {
    background-color: rgba(40, 167, 69, 0.1);
}

.icon-circle-success .icon {
    stroke: #28a745;
}

.icon-circle-danger {
    background-color: rgba(220, 53, 69, 0.1);
}

.icon-circle-danger .icon {
    stroke: #dc3545;
}

.icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.1);
}

.icon-circle-warning .icon {
    stroke: #ffc107;
}

.icon-circle-info {
    background-color: rgba(23, 162, 184, 0.1);
}

.icon-circle-info .icon {
    stroke: #17a2b8;
}

/* Inline with text */
.icon-inline {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

/* Icon animations */
.icon-spin {
    animation: icon-spin 2s linear infinite;
}

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

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

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

/* Icon hover effects */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

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

/* For mobile - match existing emoji-mobile class */
.emoji-mobile .icon,
.icon-mobile {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
}

/* RTL Support */
[dir="rtl"] .icon-inline {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

[dir="rtl"] .emoji-mobile .icon,
[dir="rtl"] .icon-mobile {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Specific icon variations */
.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* Console/Debug icons (for JavaScript) */
.console-icon {
    font-size: 16px;
    vertical-align: middle;
}