Improved / alternative 'outline' style for QBtnToggle

[dsl101]

I've always had a hard time styling QBtnToggle to both match other QBtn styles, and provide good UI feedback on the options. This is what I'd like it to look like:

Which I think looks good next to ordinary outlined buttons, but still makes it really clear what the toggle options are, and which one is currently selected. I couldn't find any way to do this using the existing attributes for QBtnToggle. To get this, I used the following:

<style lang="sass">
.outlined-toggle
  button:not(:last-child)
    border-left: 1px solid $primary
    border-top: 1px solid $primary
    border-bottom: 1px solid $primary
  button:last-child
    border: 1px solid $primary
</style>

<template>

  <!-- Snipped other parts of page -->

              <q-btn-toggle
                v-model="quickFilter"
                unelevated
                toggle-text-color="white"
                toggle-color="primary"
                class="outlined-toggle"
                :options="[{
                  label: 'All',
                  value: 'all',
                },{
                  label: 'Invited',
                  value: 'invited',
                },{
                  label: 'Invited + Selected',
                  value: 'invited+',
                }]"
              />

Just using outline, it looks like this:

No clear indication of the selected option, and no visual delineation between options (even worse when dense). The 'ALL' option is selected here, but the primary colour is quite dark, and so lost against the grey alternative options.

I'd be happy if outline was changed to match my earlier workaround, but understand that might break other existing uses, so perhaps an outline-all or separated, which outlined each individual button, and I don't know whether another attribute is needed to 'invert' the active button—I guess that could just be done with the toggle-* attributes, but again it needs lots of extra template code to achieve what I think should be the default.