.shopping-list{padding:.5rem;height:100%;overflow:hidden;display:flex;flex-direction:column}.shopping-list-item{&:hover{background-color:hsla(0,0%,100%,.2)}span.icon>svg:hover{color:red;stroke:red;cursor:pointer}}.squishy-nav{--nav-button-size:calc(0.9 * var(--nav-size));--background-width:calc(var(--background-ratio) * var(--nav-size));--bounce-height:calc(-0.5 * var(--nav-button-size));--icon-size:calc(0.35 * var(--nav-button-size));--nav-links-total:5;--animation-duration:500ms;display:flex;justify-content:center;position:fixed;bottom:0;width:100%;&[data-active-index="1"]{.nav-link:nth-of-type(n+2){transform:translateX(15px)}}&[data-active-index="2"]{.nav-link:nth-of-type(-n+1){transform:translateX(-5px)}.nav-link:nth-of-type(n+3){transform:translateX(5px)}}&[data-active-index="3"]{.nav-link:nth-of-type(-n+2){transform:translateX(-5px)}.nav-link:nth-of-type(n+4){transform:translateX(5px)}}&[data-active-index="4"]{.nav-link:nth-of-type(-n+3){transform:translateX(-5px)}.nav-link:nth-of-type(n+5){transform:translateX(5px)}}&[data-active-index="5"]{.nav-link:nth-of-type(-n+4){transform:translateX(-5px)}}@media (max-width:640px){--nav-button-size:calc(0.8 * var(--nav-size));--icon-size:calc(0.2 * var(--nav-size))}}.squish{pointer-events:none;position:absolute;bottom:0;z-index:-1}.squish svg{max-width:none;width:var(--background-width);height:var(--nav-size);transform:translateX(calc(-50% + var(--nav-button-size) / 2));path{fill:var(--background-color);stroke:var(--color-ui);stroke-width:var(--border-width)}@media (max-width:640px){height:calc(.8 * var(--nav-size))}}.nav-links{display:grid;grid-template-columns:repeat(var(--nav-links-total),var(--nav-button-size));position:relative;@media (max-width:640px){grid-template-columns:repeat(var(--nav-links-total),calc(.8 * var(--nav-button-size)))}}.nav-link{transition:transform var(--animation-duration)}.nav-link button{all:unset;box-sizing:border-box;cursor:pointer;width:var(--nav-button-size);height:var(--nav-button-size);display:flex;align-items:center;justify-content:center;transition:transform .55s;position:relative;transition:color var(--animation-duration) ease var(--animation-duration);>*{pointer-events:none}@media (max-width:640px){width:calc(.8 * var(--nav-button-size));height:calc(.8 * var(--nav-button-size));margin-left:5px}&:after{border-radius:50%;content:"";position:absolute;height:100%;width:100%;background:var(--main-color);color:#fff;transform:scale(0);opacity:0;transition:transform var(--animation-duration) ease var(--animation-duration),opacity var(--animation-duration) ease var(--animation-duration);svg{fill:#fff}}&[data-state=active]{color:var(--color-light);animation:bounceUp calc(2 * var(--animation-duration)) forwards;&:after{transform:scale(.9);opacity:1}}&[data-state=inactive]{animation:slideDown calc(2 * var(--animation-duration)) forwards;&:after{transition:transform var(--animation-duration),opacity var(--animation-duration)}}svg{position:relative;z-index:1;fill:none;stroke-width:var(--border-width);stroke-linecap:round;stroke-linejoin:round;height:calc(.3 * var(--nav-size));width:calc(.3 * var(--nav-size));-o-object-fit:contain;object-fit:contain;@media (max-width:640px){height:calc(.25 * var(--nav-size));width:calc(.25 * var(--nav-size))}}}@keyframes bounceUp{0%{transform:scale(1)}10%{transform:scale(.9)}30%{transform:scale(1)}50%{transform:translateY(calc(var(--bounce-height) / -6))}to{transform:translateY(var(--bounce-height))}}@keyframes slideDown{0%{transform:translateY(var(--bounce-height))}to{transform:translateY(0)}}