flux.radio.group color on selected option

[yangsystem]

I want to have the ability to specify the color the selected option is selected.
<flux:radio.group wire:model="status" label="Choose state" variant="segmented"> <flux:radio label="Activ" color='green'/> <flux:radio label="Inactiv" color='red'/> </flux:radio.group>

[jeffchown]

@yangsystem This can be done with CSS. Try:

<flux:radio.group label="Choose state" variant="segmented">
    <flux:radio label="Activ" class="data-[checked]:bg-green-600" />
    <flux:radio label="Inactiv" class="data-[checked]:bg-red-600" />
</flux:radio.group>

[yangsystem]

I have tried, also have read the docs on flux and added the !, but it is now working:
Am I doing it wrong?
Code
<flux:radio.group wire:model="status_user" label="Status *" variant="segmented"> <flux:radio value='1' label="Activ" class="!data-[checked]:bg-green-600" /> <flux:radio value='0' label="Suspendat" class="!data-[checked]:bg-red-600" /> </flux:radio.group>

Output only for active

<ui-radio class="flex whitespace-nowrap flex-1 justify-center items-center gap-2 rounded-md data-[checked]:shadow-sm text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-[checked]:text-zinc-800 data-[checked]:dark:text-white data-[checked]:bg-white data-[checked]:dark:bg-white/20 [&amp;[disabled]]:opacity-50 dark:[&amp;[disabled]]:opacity-75 [&amp;[disabled]]:cursor-default [&amp;[disabled]]:pointer-events-none px-4 !data-[checked]:bg-green-600" value="1" data-flux-control="" data-flux-radio-segmented="" tabindex="0" aria-checked="true" role="radio" data-active="" data-checked="">
    Activ
    </ui-radio>

[jeffchown]

@yangsystem Try this:

<flux:radio.group wire:model="status_user" label="Status *" variant="segmented">
    <flux:radio value='1' label="Activ" class="data-[checked]:!bg-green-600" />
    <flux:radio value='0' label="Suspendat" class="data-[checked]:!bg-red-600" />
</flux:radio.group>

[yangsystem]

Yes it is working now.
<flux:radio value='1' label="Activ" class="data-[checked]:!bg-green-600" />

not working variant.
<flux:radio value='1' label="Activ" class="!data-[checked]:bg-green-600" />
I must read more css.

[jeffchown]

Great @yangsystem. 👍
Like @calebporzio says, #cssishard