/*
 * THEME SWITCHER MODULE - Synergia AI
 * Styles for dark/light mode toggle button
 */

/* === THEME TOGGLE BUTTON === */
.theme-toggle-button { 
    position: relative; 
    font-size: 0; 
}

.theme-toggle-button::before { 
    content: '☀️'; 
    font-size: 24px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0); 
    transition: transform 0.3s ease; 
}

.theme-toggle-button.light-theme-active::before { 
    transform: translate(-50%, -50%) scale(1); 
}

.theme-toggle-button::after { 
    content: '🌙'; 
    font-size: 24px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(1); 
    transition: transform 0.3s ease; 
}

.theme-toggle-button.light-theme-active::after { 
    transform: translate(-50%, -50%) scale(0); 
}

.menu-toggle, 
.theme-toggle-button { 
    background: none; 
    border: none; 
    cursor: pointer; 
    color: var(--text-primary); 
    padding: 8px; 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background-color 0.2s; 
}

.theme-toggle-button:hover, 
.menu-toggle:hover { 
    background-color: rgba(255,255,255,0.1); 
}

body.light-mode .theme-toggle-button:hover, 
body.light-mode .menu-toggle:hover { 
    background-color: rgba(0,0,0,0.05); 
}