Hide an html element if a css var is greater than some value

Question

I'd like hide an element if a css var is greater than zero. I can get the inverse case to work:

#container {
  display: flex;
  width: 100%;
  height: 30px;
  border: 1px soild black;
}

.item {
  opacity: max(calc( var(--ind)*1), 0);
/* or clamp(var(--ind), 0 , 1);*/
  width: 30px;
  height: 100%;
}

<div id="container">
  <div class="item" style="--ind: 0;background-color:red;"></div>
  <div class="item" style="--ind: 1;background-color:orange;"></div>
  <div class="item" style="--ind: 2;background-color:yellow;"></div>
  <div class="item" style="--ind: 3;background-color:green;"></div>
  <div class="item" style="--ind: 4;background-color:blue;"></div>
</div>

However, I'd like to have the above example show only the red sqare. Can anyone see how to do this (in pure css)?

Answer 1

#container {
  display: flex;
  width: 100%;
  height: 30px;
  border: 1px soild black;
}

.item {
  opacity: min(calc( 1 - var(--ind)), 1);
  width: 30px;
  height: 100%;
}

<div id="container">
  <div class="item" style="--ind: 0;background-color:red;"></div>
  <div class="item" style="--ind: 1;background-color:orange;"></div>
  <div class="item" style="--ind: 2;background-color:yellow;"></div>
  <div class="item" style="--ind: 3;background-color:green;"></div>
  <div class="item" style="--ind: 4;background-color:blue;"></div>
</div>