* {
    border: none;
    border-radius: 0px;
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    font-size: 12px;
}

@import "colors.css";

window#waybar {
    background-color: transparent;
}
window#waybar > box {
    min-height: 1000px;
    border-radius: 3px; 
    border: 0.5px solid @bg; 
    margin: 12px 17px 12px 8px;
    padding: 0px 3px 0px 3px;
    background-color:  @bg; 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2); 
}

tooltip {
    background: @bg;
    color: @fg;
    border-radius: 5px;
    border: 1px solid rgba(100, 114, 125, 0.5);
    padding: 5px 10px;
    margin: 0;
}



/* Left-Modules */



#custom-cpuinfo {
    color: @cpuinfo;
    margin: 15px 0px 10px 0px;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             3px 3px 6px rgba(0, 0, 0, 0.5),
             5px 5px 10px rgba(0, 0, 0, 0.3),
             7px 7px 14px rgba(0, 0, 0, 0.15);
}

#custom-brightness {
    margin: 5px 0px 5px 5px;
    padding-right: 5px;
    font-size: 21px;
    color: @light;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2);
    
}


#memory {
    color: @fg;
    padding: 10px 0px 2px 0px;
    font-size: 16px;
    color: @memory;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             3px 3px 6px rgba(0, 0, 0, 0.5),
             5px 5px 10px rgba(0, 0, 0, 0.3),
             7px 7px 14px rgba(0, 0, 0, 0.15);
    

}

#custom-string {
    padding: 0px 0px 5px 0px;
    font-size: 16px;
    color: @string;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             3px 3px 6px rgba(0, 0, 0, 0.5),
             5px 5px 10px rgba(0, 0, 0, 0.3),
             7px 7px 14px rgba(0, 0, 0, 0.15);
}




#custom-weather {
    margin: 12px 0px 10px 0px;
    color: @weather;
    font-family: IBM plex sans;
    font-weight: 800;
    font-size: 13px;
    
}




/* Workspace style */


#workspaces label {
    font-size: 25px;
}

#workspaces button {
    padding: 0px 0px 0px 0px;
    color: alpha(@workspace, 1);
    border-radius: 5px;
    animation: ws_normal 20s ease-in-out 1;
}

#workspaces button.active {
    padding: 0px 0px 0px 0px;
    color: @workspace-active;
    animation: ws_active 20s ease-in-out 1;
    transition: all 0.4s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces button.urgent {
    background-color: @power;
}



/* Right Modules */

#pulseaudio-slider {
    margin-top: 10px;
}

#pulseaudio-slider slider {
    min-height: 17px;
    min-width: 17px;
    opacity: 0;
    background-image: none;
    background-color: @slider;
    border-color: #f1d6d6;
    border-radius: 3px;
    box-shadow: 1px 5px 4px 2px #282828;
}

#pulseaudio-slider trough {
    min-height: 100px;
    min-width: 10px;
    border-radius: 3px;
    background-color: @slider-bg;
}

#pulseaudio-slider highlight {
    min-width: 5px;   
    border-radius: 2px;
    background-image: none;
    background-color: @slider-highlight;
}

#pulseaudio.audio {
    margin: 0px 0px 5px 0px;
    font-size: 14px;
    color: @fg;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2);
}



box#tray {
    margin: 7px 3px 5px 3px;
    background-color: alpha(@container, 0.95);
    border-radius: 3px;
}

#tray {
    padding: 0px 0px 1px 0px;
    
}




#clock.hour {
    padding: 5px 0px 2px 0px;
    font-size: 16px;
    color: @clock;
    font-family: "JetBrainsMono Nerd Font";
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2);
}

#clock.minute {
    padding: 0px 0px 15px 0px;
    font-size: 16px;
    color: @clock2;
    font-family: "JetBrainsMono Nerd Font";
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2);
}




#custom-power {
    margin: 0px 15px 15px 15px;
    padding-right: 5px;
    font-size: 18px;
    color: @power;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
             2px 2px 4px rgba(0, 0, 0, 0.6),
             3px 3px 6px rgba(0, 0, 0, 0.4),
             4px 4px 8px rgba(0, 0, 0, 0.2);
    
}

#custom-reboot {
    margin: 5px 0px 7px 0px;
    padding-right: 2px;
    font-size: 18px;
    color: @reboot ;
    text-shadow: 2 2 2px rgba(0, 0, 0, 1);
}

#custom-suspend {
    padding-right: 2px;
    font-size: 18px;
    color: @suspend;
    text-shadow: 2 2 2px rgba(0, 0, 0, 1);
}