Product filter usability

<div class="filter-demo"><div class="filter-head">FIND A BAG <b id="result-count">6 RESULTS</b></div><div class="filter-pills"><button id="size-filter">SIZE M</button><button id="color-filter">BLUE</button></div><div class="filter-products" id="filter-products"><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="filter-empty" id="filter-empty">No match · Remove BLUE</div></div>

.filter-demo{width:min(84%,455px);font:700 clamp(10px,3.2vmin,15px)/1.15 sans-serif}.filter-head{display:flex;justify-content:space-between}.filter-head b{color:var(--accent)}.filter-pills{display:flex;gap:6px;margin:clamp(7px,2vmin,14px) 0}.filter-pills button{font:inherit;border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(4px,1vmin,8px);cursor:pointer}.filter-pills button.active{background:var(--fg);color:var(--bg)}.filter-products{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;min-height:clamp(57px,15vmin,114px)}.filter-products i{background:var(--line);border-top:clamp(4px,1vmin,8px) solid var(--accent);transition:opacity .3s}.filter-products i:nth-child(2n){background:var(--surface)}.filter-products i.hidden{opacity:.12}.filter-empty{color:var(--accent);padding-top:5px;min-height:1.2em}

const size=document.querySelector('#size-filter'),color=document.querySelector('#color-filter'),tiles=[...document.querySelectorAll('#filter-products i')],count=document.querySelector('#result-count'),empty=document.querySelector('#filter-empty');let mode=1;function draw(){size.classList.toggle('active',mode>0);color.classList.toggle('active',mode>1);const remaining=[6,3,0][mode];tiles.forEach((tile,index)=>tile.classList.toggle('hidden',index>=remaining));count.textContent=remaining+' RESULTS';empty.style.visibility=remaining?'hidden':'visible'}size.addEventListener('click',()=>{mode=mode===0?1:0;draw()});color.addEventListener('click',()=>{mode=mode===2?1:2;draw()});draw();setInterval(()=>{mode=(mode+1)%3;draw()},2300);