.volume-control {
    background: rgba($background, .8);
    padding: 8px;
    border-radius: 16px;
    border: .5px solid rgba($foreground, .3);

    trough {
        background: rgba(lighten($color: $background, $amount: 8), .4);
        border-radius: 6px;
    }

    trough highlight {
        background: lighten($color: $color2, $amount: 40);
        padding: 10px;
        border-radius: inherit;
    }

    scale {
        padding: 10px;
    }
}

.volume-control .separator {
    border-top: .5px solid rgba(darken($color: $foreground, $amount: 25), .7);
    margin-bottom: 8px;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 1px;
}

.volume-control .slider {
    label {
        margin-left: 18px;
        color: $background;
    }
}