Ha_card conditinal CSS syntax

I found excellent syntax

box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2)' if is_state('input_number.vaermelding_hjelper', '4.0') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2)' }};

by @gasolli in Share your Tablet/Desktop Dashboards - #110 by gasolli

I am no programmer, so relying on heavy googling (and this forum). The above conditional statements are exactly what I need - but I’d need more complex ones. And simply cannot understand the syntax. How to add elseif -type of statements to the above ha_card box-shadow?

My goal is to create a button that can be either active or not active. Latter has no shadow, while the former has some fancy glow. This is for electric car charging. I use jonasbkarlsson’s ev charging integration. I have two cars, so I created one view where you can select either car1 or car2 (with these glowing buttons, using just one variable - works nice). But now I’d need one button that would be active if 1) the car is selected 2) the smart charging for that car is active. I.e.

  1. Car1 selected, smart charging for car1 not active → black button
  2. Car1 selected, smart charging for car1 active → glowing button
  3. Car2 selected, smart charging for car2 not active → black button
  4. Car2 selected, smart charging for car2 active → glowing button

I find the above “result1 - if - else - result2” bit awkward, the “{% if %} result1 [% else %} result2 {% endif %}” is much more logical.

I apparently can’t use two buttons and hide the other one, because the buttons, even if hidden, are still on top of each other. And the one under the invisible one cannot be pressed.