CSS transform causes --ggs var to not resize the icon

[ecupaio]

If I add a transform to an icon, then --ggs variable will not apply to the icon. I can use scale along with my transform and it works.

App.js

<Spinner className="loading-icon" />

app.css

.loading-icon {
  postion: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,50%);
  //--ggs does not make the icon larger
  --ggs: 2; 
}

app.css - Working

.loading-icon {
  postion: absolute;
  top: 50%;
  left: 50%;
  //icon is now scaled
  transform: translate(-50%,50%)scale(2);
}

Another alternative is wrapping the icon in a div and adding the transform to the parent div and using --ggs for the child icon.

I created a sandbox so you can see the transform fix in action

[astrit]

Not entirely sure what is happening on your version but works for me fine