/* VoteMVP Icon System - Consistent muted styling for all icons */

/* Base icon styling - muted, accessible colors */
.bi {
    color: var(--color-text-muted);
    opacity: 0.8;
    transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Hover states for interactive icons */
button .bi,
a .bi,
.clickable .bi {
    cursor: pointer;
}

button:hover .bi,
a:hover .bi,
.clickable:hover .bi {
    opacity: 1;
    color: var(--color-text-input);
}

/* Focus states for accessibility */
button:focus .bi,
a:focus .bi {
    opacity: 1;
    color: var(--color-text-input);
}

/* Icon size variants */
.bi-sm {
    font-size: 0.875rem;
}

.bi-lg {
    font-size: 1.25rem;
}

.bi-xl {
    font-size: 1.5rem;
}

/* Semantic color variants (use sparingly) */
.bi-success {
    color: var(--color-success-500) !important;
}

.bi-danger {
    color: var(--color-error-500) !important;
}

.bi-warning {
    color: var(--color-accent-500) !important;
}

.bi-info {
    color: var(--color-primary-500) !important;
}

/* Context-specific overrides */
.navbar .bi,
.nav-link .bi {
    color: inherit; /* Inherit from navigation context */
}

.btn-primary .bi,
.btn-success .bi {
    color: white;
}

/* Empty state icons - more muted */
.empty-state-icon .bi {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bi {
        color: #adb5bd;
    }
    
    button:hover .bi,
    a:hover .bi,
    .clickable:hover .bi,
    button:focus .bi,
    a:focus .bi {
        color: #ced4da;
    }
    
    .empty-state-icon .bi {
        color: #6c757d;
    }
}