Custom:Button-Card - Help with 3 button active/not active background color

I am trying to make a custom button for a ceiling fan. I only want/need “off”, MED, and HIGH. The problem I am having is I can’t figure out how to make the background change on MED and HIGH. The only way I get it to change is by a "state value “on” and both MED and HIGH light up. I would like for only the one selected to light up.

The buttons preform like they should it’s just the back ground doesn’t. I have tried doing value medium / high and 66 / 100 and it doesn’t work.

Fan Button

 type: horizontal-stack
  cards:
    - type: custom:button-card
      entity: fan.bedroom_ceiling_fan_sonoff
      name: "OFF"
      show_name: true
      show_icon: false
      tap_action:
        action: perform-action
        perform_action: fan.set_percentage
        target:
          entity_id:
            - fan.bedroom_ceiling_fan_sonoff
        data:
          percentage: 0
      state:
        - value: "off"
          styles:
            card:
              - background-color: teal
      styles:
        card:
          - padding: 0px 3px 0px 3px;
          - height: 35px
          - width: 325x
          - background-color: transparent
          - border: 0px solid rgb(80,80,80)
          - border-radius: 10%
    - type: custom:button-card
      entity: fan.bedroom_ceiling_fan_sonoff
      name: MED
      show_name: true
      show_icon: false
      tap_action:
        action: perform-action
        perform_action: fan.set_percentage
        target:
          entity_id:
            - fan.bedroom_ceiling_fan_sonoff
        data:
          percentage: 66
      state:
        - value: "on"
          styles:
            card:
              - background-color: teal
      styles:
        card:
          - height: 35px
          - width: 325x
          - background-color: transparent
          - border: 0px solid rgb(80,80,80)
          - border-radius: 10%
    - type: custom:button-card
      entity: fan.bedroom_ceiling_fan_sonoff
      name: HIGH
      show_name: true
      show_icon: false
      tap_action:
        action: perform-action
        perform_action: fan.set_percentage
        target:
          entity_id:
            - fan.bedroom_ceiling_fan_sonoff
        data:
          percentage: 100
      state:
        - value: "on"
          styles:
            card:
              - background-color: teal
      styles:
        card:
          - height: 35px
          - width: 325x
          - background-color: transparent
          - border: 0px solid rgb(80,80,80)
          - border-radius: 10%