.ingredient-carousel{--icon-size:52px;--icon-gap:20px;width:100%;height:130px;position:relative;overflow:hidden;container-type:inline-size}.ingredient-carousel ul{scrollbar-width:none;gap:var(--icon-gap);scroll-snap-type:x mandatory;align-items:end;max-width:100cqw;height:calc(100% + 17px);padding:30px 50cqw 17px;list-style:none;display:flex;position:absolute;bottom:0;overflow-x:scroll}.ingredient-carousel ul li{scroll-snap-align:center;width:var(--icon-size);height:var(--icon-size);border:1px solid;border-color:var(--color-grey-1);border-radius:var(--icon-size);flex:none;transition:scale .5s ease-out,border-color .5s ease-out;position:relative;box-shadow:0 1px 10px -5px #000000bf}.ingredient-carousel ul li p{opacity:0;text-align:center;min-width:300px;transition:translate .3s,opacity .3s;position:absolute;top:-20px;left:50%;transform:translate(-50%)translateY(10px)}.ingredient-carousel ul li.disabled{opacity:.5;box-shadow:none}.ingredient-carousel ul li.active{scale:1.3}.ingredient-carousel ul li.active p{opacity:1;transition-delay:.5s;translate:0 -15px}.ingredient-carousel ul li.selected{border-color:var(--color-highlight)}.ingredient-carousel ul li button{border-radius:var(--icon-size);cursor:pointer;background-color:var(--color-grey-1);width:100%;height:100%;position:relative}.ingredient-carousel ul li button:disabled{pointer-events:none}.ingredient-carousel ul li button img,.ingredient-carousel ul li button span{border-radius:var(--icon-size);object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0;scale:.9}