/* ~/.config/eww/eww.scss */

/* Variables pour les couleurs Gruvbox */
$bg0: rgba(40, 40, 40, 0.95);
$bg1: rgba(60, 56, 54, 0.8);
$bg2: rgba(80, 73, 69, 0.8);
$fg: #ebdbb2;
$green: #98971a;
$bright-green: #b8bb26;
$red: #cc241d;
$bright-red: #fb4934;
$blue: #458588;
$purple: #b16286;
$aqua: #689d6a;
$orange: #d65d0e;

/* Styles de base pour le centre de contrôle */
.control-center {
    background-color: $bg0;
    border: 2px solid $bg2;
    border-radius: 12px;
    padding: 1.5rem;
    color: $fg;
    animation: slide-in 200ms ease-out;
}

/* En-tête du centre de contrôle */
.header {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    
    .close-button {
        margin-left: auto;
        padding: 0 8px;
        border-radius: 6px;
        background: transparent;
        color: $fg;
        font-size: 1.4rem;
        
        &:hover {
            background: $red;
            color: $bg0;
        }
    }
}

/* Styles communs pour toutes les sections */
.section {
    background: $bg1;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Section des curseurs */
.sliders-box {
    .slider {
        margin: 0.5rem 0;
        
        .icon {
            min-width: 2rem;
            margin-right: 1rem;
            font-size: 1.2rem;
            color: $fg;
            
            &.muted {
                color: $red;
            }
        }
        
        scale {
            min-width: 180px;
            min-height: 20px;
            
            trough {
                background: $bg2;
                border-radius: 6px;
                min-height: 6px;
                
                highlight {
                    background: $green;
                    border-radius: 6px;
                }
            }
            
            &:hover trough highlight {
                background: $bright-green;
            }
        }
    }
}

/* Section des toggles rapides */
.toggles-box {
    .toggle {
        background: $bg2;
        min-width: 3rem;
        min-height: 3rem;
        border-radius: 8px;
        font-size: 1.3rem;
        transition: all 200ms ease;
        
        &:hover {
            background: darken($bg2, 10%);
        }
        
        &.active {
            background: $green;
            color: $bg0;
            
            &:hover {
                background: $bright-green;
            }
        }
    }
}

/* Section d'information système */
.system-info {
    .system-info-item {
        margin: 0.5rem 0;
        
        .icon {
            min-width: 2rem;
            font-size: 1.2rem;
        }
        
        label {
            margin-right: 1rem;
        }
        
        .progress-bar {
            min-width: 100px;
            
            trough {
                background: $bg2;
                border-radius: 4px;
                min-height: 6px;
                
                progress {
                    background: $green;
                    border-radius: 4px;
                }
            }
        }
        
        /* Couleurs progressives basées sur les classes */
        &.high progress {
            background: $red;
        }
        
        &.medium progress {
            background: $orange;
        }
    }
}

/* Animation d'entrée du panneau */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour les transitions d'état des boutons */
.toggle, .close-button {
    transition: all 200ms ease;
}

/* Style des tooltips */
tooltip {
    background: $bg0;
    border: 1px solid $bg2;
    border-radius: 6px;
    
    label {
        color: $fg;
        padding: 4px 8px;
    }
}