Creating Battery Notification Icon on a Button when Battery levels get to a certain %

Configuration Frontend
,
1

Currently, I have Notification that will show up on a button if I have more than 10 entities missing or unavailable through the watchman service. See example image and code below:

image

styles:
  icon:
    - color: mediumseagreen
    - width: 40px
  grid:
    - position: relative
  card:
    - border-radius: 5%
    - height: 72px
    - padding: 5px
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.watchman_missing_entities'].state > 0)
            return "indianred";
          ]]]
      - border-radius: 100%
      - position: absolute
      - left: 75%
      - top: 0%
      - height: 20px
      - width: 20px
      - font-size: 10px
      - line-height: 20px
      - font-weight: null
custom_fields:
  notification: |
    [[[ 
      if (states['sensor.watchman_missing_entities'].state > 10)
      return Math.floor(states['sensor.watchman_missing_entities'].state) ]]]

THE ASK - I want to create the exact same thing but for batteries. When any battery gets below a certain % (i.e. <20%) the icon will appear with the number of batteries that are at that level. The end result would look like the below. I know theres many ways to probably accomplish this, but I’m struggling to figure this out. Any help would be much appreciated!

image