Update css variable globally without javascript [duplicate]

I have the following styles:

html {
  --header-height: 80px;
  --announcement-bar-height: 40px;

  scroll-padding-top: calc(
    var(--header-height) + var(--announcement-bar-height) + 5px
  );

  body[data-scrolled] {
    --announcement-bar-height: 0px;
  }
}

The problem is that when I scroll the page and hence data-scrolled attribute is added to body, the --announcement-bar-height is not updated to 0px in scroll-padding-top in html and still 40px is used. How to fix that without javacript?