State change color change

Configuration Frontend
1

I'm using the code below to create a dashboard display for 3 temperature sensors. I would like to modify this code so that each time the sensor reports a new value to the button the border of the button changes to indicate the trend -- blue if new value is less than previous, red if the new value is more than the previous, and gray if the new value is the same as the previous.

Thanks in advance!

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.temperature_humidity_xs_sensor_air_temperature
    name: OUT
    show_state: true
    show_icon: false
    aspect_ratio: 1/1
    styles:
      name:
        - font-size: 24px
      state:
        - font-size: 40px
        - font-weight: bold
  - type: custom:button-card
    entity: sensor.house_temp
    name: IN
    show_state: true
    show_icon: false
    aspect_ratio: 1/1
    styles:
      name:
        - font-size: 24px
      state:
        - font-size: 40px
        - font-weight: bold
  - type: custom:button-card
    entity: sensor.q_sensor_air_temperature
    name: BED
    show_state: true
    show_icon: false
    aspect_ratio: 1/1
    styles:
      name:
        - font-size: 24px
      state:
        - font-size: 40px
        - font-weight: bold
2

One pretty straight-forward soluion is to create a helper. Each time the temperature sensor value changes, you'll trigger an automation that writes the old temperature value to the helper - then you can use that helper as a variable and compare the current temperature with the old value and change the border colour accordingly:

styles:
  card:
    border-color: |
      [[[
        var lastTemperature = states['sensor.your.helper'].state;
        return (entity.state < lastTemperature) ? 'blue' : 'red';
      ]]]