custum-hyprpanel/src/scss/style/menus/audiomenu.scss

.menu-items-container.audio {
    min-width: 18em * $bar-menus-menu-volume-scaling * 0.01;

    @import './menu.scss';

    * {
        font-size: $font-size * $bar-menus-menu-volume-scaling * 0.01;
    }

    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);

    .menu-items {
        border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
        opacity: $bar-menus-opacity * 0.01;
    }

    .menu-dropdown-label.audio {
        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
    }

    .menu-label.audio {
        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
    }

    .menu-active.playback,
    .menu-active.input {
        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
    }

    .menu-button-isactive.audio {
        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
    }

    .menu-icon-button.volume {
        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
        padding: 0em 1em;

        label {
            font-size: 1.25em;
        }
        &:hover {
            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
        }
    }

    .menu-slider.playback {
        trough {
            background: if(
                $bar-menus-monochrome,
                $bar-menus-slider-background,
                $bar-menus-menu-volume-audio_slider-background
            );

            highlight,
            progress {
                background: if(
                    $bar-menus-monochrome,
                    $bar-menus-slider-primary,
                    $bar-menus-menu-volume-audio_slider-primary
                );
            }
        }

        &:hover {
            trough {
                background: if(
                    $bar-menus-monochrome,
                    $bar-menus-slider-backgroundhover,
                    $bar-menus-menu-volume-audio_slider-backgroundhover
                );
            }

            slider {
                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
            }
        }
    }

    .menu-slider.input {
        trough {
            background: if(
                $bar-menus-monochrome,
                $bar-menus-slider-background,
                $bar-menus-menu-volume-input_slider-background
            );

            highlight,
            progress {
                background: if(
                    $bar-menus-monochrome,
                    $bar-menus-slider-primary,
                    $bar-menus-menu-volume-input_slider-primary
                );
            }
        }

        &:hover {
            trough {
                background: if(
                    $bar-menus-monochrome,
                    $bar-menus-slider-backgroundhover,
                    $bar-menus-menu-volume-input_slider-backgroundhover
                );
            }

            slider {
                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
            }
        }
    }

    .menu-active-percentage.playback,
    .menu-active-percentage.input {
        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
    }

    .menu-active-button {
        .menu-active-icon.playback,
        .menu-active-icon.input {
            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
            opacity: 1;
        }

        &.muted {
            .menu-active-icon.playback,
            .menu-active-icon.input {
                color: if(
                    $bar-menus-monochrome,
                    $bar-menus-iconbuttons-passive,
                    $bar-menus-menu-volume-iconbutton-passive
                );
                opacity: 1;
            }
        }

        &:hover {
            .menu-active-icon.playback,
            .menu-active-icon.input {
                color: if(
                    $bar-menus-monochrome,
                    $bar-menus-iconbuttons-passive,
                    $bar-menus-menu-volume-iconbutton-passive
                );
                opacity: 0.3;
            }
        }

        &.muted:hover {
            .menu-active-icon.playback,
            .menu-active-icon.input {
                color: if(
                    $bar-menus-monochrome,
                    $bar-menus-iconbuttons-active,
                    $bar-menus-menu-volume-iconbutton-active
                );
                opacity: 1;
            }
        }
    }

    .menu-button-icon.playback,
    .menu-button-icon.input {
        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);

        &.active {
            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
        }
    }

    .menu-button.audio {
        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);

        .menu-button-name.playback,
        .menu-button-name.input {
            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
        }

        &:hover {
            .menu-button-name.playback,
            .menu-button-name.input {
                color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
            }
        }
    }

    .menu-section-container.volume {
        margin-bottom: 0.65em;
    }

    .menu-section-container.playback {
        margin-top: 0em;
        margin-bottom: 1em;
    }

    .menu-section-container.input {
        margin-top: 0em;
    }

    .menu-label-container.input {
        border-radius: 0em;
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-label-container.playback {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-items-section.input {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-items-section.playback {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-label-container.selected {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-items-section.selected {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
    }

    .menu-items-section.playback {
        border-radius: 0em;
    }

    .active-playbacks-scrollable {
        min-height: 12.5em;

        scrollbar contents trough slider {
            background: $bar-menus-menu-volume-scroller-color;
        }

        .menu-active-percentage.playback,
        .menu-active-percentage.input {
            margin-right: 0.6em;
        }
    }

    .no-playbacks.dim {
        opacity: 0.5;
    }
}