/* Configuração Global do Google Material Icons */

/* Importa a fonte do Google Material Icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Configuração padrão para todos os ícones do Material */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,      /* 0 = outlined, 1 = filled */
    'wght' 300,    /* Peso: 100-700 (300 = suave) */
    'GRAD' 0,      /* Gradiente: -25 a 200 */
    'opsz' 24;     /* Tamanho óptico: 20, 24, 40, 48 */
    
    /* Propriedades visuais */
    user-select: none;
    vertical-align: middle;
    
    /* Transição suave ao mudar estados */
    transition: all var(--transition-fast);
}

/* Variações de tamanho - Use classes quando necessário */
.material-symbols-outlined.icon-xs {
    font-size: 16px;
}

.material-symbols-outlined.icon-sm {
    font-size: 20px;
}

.material-symbols-outlined.icon-md {
    font-size: 24px;
}

.material-symbols-outlined.icon-lg {
    font-size: 32px;
}

.material-symbols-outlined.icon-xl {
    font-size: 48px;
}

/* Variações de peso - Para ênfase diferente */
.material-symbols-outlined.icon-light {
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-outlined.icon-regular {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-outlined.icon-bold {
    font-variation-settings:
    'FILL' 0,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;
}

/* Ícone preenchido - Para estados ativos */
.material-symbols-outlined.icon-filled {
    font-variation-settings:
    'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* Cores personalizadas para ícones - Use com as variáveis do projeto */
.material-symbols-outlined.icon-primary {
    color: var(--primary-color);
}

.material-symbols-outlined.icon-success {
    color: var(--success-color);
}

.material-symbols-outlined.icon-error {
    color: var(--error-color);
}

.material-symbols-outlined.icon-warning {
    color: var(--warning-color);
}

.material-symbols-outlined.icon-info {
    color: var(--info-color);
}

.material-symbols-outlined.icon-muted {
    color: var(--text-secondary);
}

/* Animações úteis para ícones */
.material-symbols-outlined.icon-spin {
    animation: spin 1s linear infinite;
}

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

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

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

/* Hover effect para ícones clicáveis */
.material-symbols-outlined.clickable {
    cursor: pointer;
}

.material-symbols-outlined.clickable:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* 
EXEMPLOS DE USO:

Básico:
<span class="material-symbols-outlined">home</span>

Com tamanho:
<span class="material-symbols-outlined icon-lg">settings</span>

Com cor:
<span class="material-symbols-outlined icon-primary">favorite</span>

Preenchido:
<span class="material-symbols-outlined icon-filled">star</span>

Clicável com hover:
<span class="material-symbols-outlined clickable">delete</span>

Múltiplas classes:
<span class="material-symbols-outlined icon-lg icon-primary icon-filled">check_circle</span>

Lista de ícones úteis:
- home, dashboard, menu
- person, login, logout
- mail, lock, visibility, visibility_off
- search, filter_alt, settings
- add, edit, delete, save
- check_circle, error, warning, info
- upload, download, print
- calendar_today, schedule
- attach_money, receipt
- restaurant, local_pizza
*/