<LumexCheckbox Value="@true" Classes="@_classes">
    <div class="flex items-center gap-4">
        <LumexIcon Icon="@Icons.Rounded.HealthAndSafety"
                   Size="@new("32")" />
        <div>
            <div class="font-medium">Mobile Anti-Virus</div>
            <p class="text-sm text-primary">5,07 €/month</p>
        </div>
    </div>
</LumexCheckbox>

@code {
    private CheckboxSlots _classes = new()
    {
        Root = ElementClass.Empty()
            .Add( "w-full max-w-md gap-2 p-4" )
            .Add( "rounded-lg border-2 border-default-100 " )
            .Add( "bg-surface1 hover:bg-surface2" )
            .Add( "data-[checked=true]:border-primary" )
            .ToString(),
        Label = "w-full"
    };
}