.sys-tray-box {
    background-color: $bg;
    border-radius: 6px;
    padding: 2em;

    .first-row {
        .sys-tray-box-left {
            .network {
                background-color: $contrastbg;
                border-radius: 6px;

                .title {
                    color: $fgDim;
                    margin-left: 1em;
                    margin-top: 1em;
                }
            
                .ssid {
                    margin-left: -8px;
                    margin-bottom: 0.3em;
                    font-size: 24px;
                    font-weight: bolder;
                }
            }

            .date {
                background-color: $contrastbg;
                border-radius: 6px;
                margin-top: 1em;
            
                .weekday {
                    color: $fgDim;
                    margin-top: 1em;
                    margin-left: 1em;
                }
            
                .monthday {
                    margin-left: -2.4em;
                    margin-bottom: 0.3em;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
        }
    
        .sys-tray-box-right {
            margin: 1em 0em 0em 1.5em;
    
            .ram {
                .ram-progress {
                    background-color: $contrastbg;
                    color: $red;
    
                    .ram-icon {
                        margin: 1em;
                        font-size: 40px;
                        font-family: "Material Icons";
                        color: $red;
                    }
                }
            }
        }
    }

    .second-row {
        margin-top: 1em;

        .music-player {
            .song-art {
                background-color: $contrastbg;
                background-size: 58% 100%;
                background-repeat: no-repeat;
                border-radius: 6px;
        
                min-width: 20em;
                margin-right: 15px;
        
                .music-info {
                    all: unset;
                    background-color: transparent;
                    border-radius: 6px;
        
                    margin-top: 10px;
                    margin-left: -9.1rem;

                    .np {
                        margin-bottom: 6px;
                    }
        
                    .title {
                        font-size: 16px;
                        font-weight: bolder;
                    }
                    .artist {
                        color: $fgDim;
                    }
                }
            }
            
            .song-controls {
                background-color: $contrastbg;
                padding: 0em 1em;
                margin-left: 6px;
                border-radius: 6px;
        
                button {
                    font-family: "Material Icons";
                    font-size: 24px;
        
                    &:hover {
                        color: $accent;
                    }
                }
            }
        }
    }

    .third-row {
        margin-top: 2em;

        .system-info {
            margin: 0em 1em 0em .7em;

            .volume {
                margin: 0.5em 0em;

                .volume-icon {
                    margin: 0rem 1rem;
                    color: $green;
                    font-size: 26px;
                }
                
                scale trough {
                    background-color: $contrastbg;
                    border-radius: 10px;
                    min-height: .7em;
                    min-width: 19em;
                    margin: 0.5rem 0;
                }
                
                .volbar trough highlight {
                    background-image: linear-gradient(to right, #87c7a1, $green);
                    border-radius: 10px;
                }
            }
            .brightness {
                margin: 0.75em 0em;

                .brightness-icon {
                    margin: 0rem 1rem;
                    color: $yellow;
                    font-size: 26px;
                }
                
                scale trough {
                    background-color: $contrastbg;
                    border-radius: 10px;
                    min-height: .7em;
                    min-width: 19em;
                    margin: 0.5rem 0;
                }
                
                .bribar trough highlight {
                    background-image: linear-gradient(to right, #de8f78, $yellow);
                    border-radius: 10px;
                }
            }
            .mic {
                margin: 0.5em 0em;

                .mic-icon {
                    margin: 0rem 1rem;
                    color: $blue;
                    font-size: 26px;
                }
                
                scale trough {
                    background-color: $contrastbg;
                    border-radius: 10px;
                    min-height: .7em;
                    min-width: 19em;
                    margin: 0.5rem 0;
                }
                
                .micbar trough highlight {
                    background-image: linear-gradient(to right, $blue-desaturated, $blue);
                    border-radius: 10px;
                }
            }
        }
    }
}
