Show HN: I made Logic gates using CSS if() function

I'm a little behind on my CSS, but apparently you can now evaluate styles in the container and act on them, at least in Chrome:

https://developer.chrome.com/blog/new-in-chrome-137

The example uses a newer `style(..)` condition I haven't seen yet:

https://developer.mozilla.org/en-US/docs/Web/CSS/@container#...

I'm curious if you can accidentally make loops using some of these, and if there's some sort of settling/recursion limit.

EDIT: Apparently `style(..)` can only evaluate vars in this `if()`? It looks like `@container` is a way to manage generic style queries and that supports the full gamut of CSS queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/if

  A @container query does have some advantages — you 
  can only set single property values at a time with
  if() style queries, whereas @container queries can
  be used to conditionally apply whole sets of rules.
  The two approaches are complementary, and have
  different uses.

  Note that container style queries currently don't
  support regular CSS properties, just CSS custom 
  properties. For example, the following won't work: [..]

EDIT 2: OK, this required digging out the spec. They cannot cause recursion because of the substitution context rules:

https://drafts.csswg.org/css-values-5/#if-notation

  For example, in --foo: if(style(--foo: bar): baz);
  the style() query is automatically false, since
  property replacement has already established a 
  «"property", "--foo"» substitution context. "

... and there are rules around cyclic evaluation in CSS:

https://drafts.csswg.org/css-values-5/#cyclic-substitution-c...

  When a cycle is detected, all participants in the cycle
  become invalid. For example, all of the following 
  declarations become invalid at computed-value time."

Phew.