CSSで変数が0pxの場合のみ別の値のpxを使う

例えば --foo: 0px; の場合のみ var(--foo) ではなく16pxを指定したいというシチュエーションがあるとする。そんなシチュエーションがあるのかという突っ込みは一旦置いておいてほしい。

var() 関数の第二引数は第一引数に指定した変数が無効である場合の代替値として利用できるが、 --foo: 0px; であれば0pxという値がきちんと設定されているので var(--foo, 16px) と書いても16pxにはならない。

なのでもうちょっと頑張る必要がある:

calc(var(--foo) + max(calc(1px - var(--foo)), 0px) * 16);

これは --foo が正のpx数であれば第二項は max 部分が0pxとなって落ちるが --foo が0pxの場合のみ第二項の max 部分が1pxとなって生きるという仕組み。
この仕組みを考えるのに少し時間がかかったのでスクラップに備忘録として残しておく。