Changing the font size of secondary font in a dynamic button

Configuration Frontend
1

I have a dynamic button where I am using the state to look like the buttons name, using the following code.

show_name: false
show_icon: false
type: button
entity: input_text.c_monday_breakfast
show_state: true
icon: none
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      background-color: {% if states('input_text.c_monday_breakfast') == 'unknown' %} red {% else %} green {% endif %};
     --secondary-text-color: white;
     --secondary-font-size: 8px;
    }

Basically if the state is unknown the button is red if its anything else it should be green, that all works perfectly but I have been trying for a day now, trying all sorts of card mods, mushrooms and anything else I can to change the font size of the state.

Please someone point me in the right direction, I know it has to be something simple, surely.

2

Try this…

show_name: false
show_icon: false
type: button
entity: input_text.c_monday_breakfast
show_state: true
icon: none
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      background-color: {% if states('input_text.c_monday_breakfast') == 'unknown' %} red {% else %} green {% endif %};
    .state {
     font-size: 20px;
     color: white;
      }
3

Fantastic thank you so much, that worked a treat.