Problem with changing the size of the background of the icon

Configuration Frontend
1

During the development of the home dashboard, I encountered the following problem: When creating a functional icon and changing its style, I cannot change the size of the background itself (in the photo, it is dark gray); I can only change the size of everything completely. I would like to know how I can do this? I would appreciate any advice!

My code:

- type: state-icon
    entity: sensor.esp32_kitchen_smoke_level
    icon: mdi:fire-circle
    style:
      left: 70%
      top: 60%
      background-color: rgba(0, 0, 0, 0.5)
      border-radius: 20%
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7)
      border: 2px solid rgba(255, 255, 255, 0.8)
      transform: translate(-50%, -50%) scale(2)

Знімок екрана 2025-07-17 225945
Знімок екрана 2025-07-17 225945132×132 11.3 KB

2

The problem is solved!
Explanation:
I had issues with the width and height parameters (unknown reason), so I couldn’t fix it in this way.
Solution:
I reduced the entire block in the line:

transform: translate(-50%, -50%) scale(2)

and the icon in the middle could be enlarged with the command:

--mdc-icon-size: 26px