Im getting error Operation on Invalid Type

https://codepen.io/jh3y/pen/oNqdmbW

Im trying to implement this button i found in code pen onto my website but Im getting an error message even after changing the hsl function which I don't think Squarespace can recognize

How are you trying to implement it? 

Im putting the css portion into the custom css and im inserting the html via code block

The code is stand alone in codepen, so probably needs customizing so it doesn't reuse standard selectors.

You will need to adjust some code in CSS box for example this code

font-size: calc(var(--font-size) * 1.5);

need to add symbols, like this

font-size: calc(~"var(--font-size) * 1.5");

or

width: calc(var(--font-size) * 0.5);

to

width: calc(~"var(--font-size) * 0.5");

(do similar for all code with calc text)