can't make to work memory plugin with states

[Masber]

Dear waybar community,

I am trying to edit the style of the memory plugin based on memory utilization. This is what I am trying to do:

config file

  "memory": {
    "states": {
      "low": 35,
      "mid": 65,
      "high": 80,
      "critical": 90,
    },
    "format": "󰍛 {}%",
    "on-click": "alacritty -e btop"
  },

style.css file

#memory {
    background-color: @overlay0;
    margin: 15px 0px;
    padding: 0px 10px;
}

 #memory.low {
     color: @green;
 }

 #memory.mid {
     color: @yellow;
 }

 #memory.high {
     color: @orange;
 }

 #memory.critical {
     color: @red;
 }

But this is not working, I can see the icon and the %utilization but I the state based colors are not applied.

Any idea of what I am doing wrong?

thank you