@keyframes openDrawer{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes closeDrawer{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width:768px){@keyframes openDrawer{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes closeDrawer{0%{transform:translateX(0)}to{transform:translateX(100%)}}}.drawer{width:100%;max-width:100%;background-color:white;max-height:100dvh;overflow-y:auto;height:min-content;align-self:end;transform:translateX(0);overscroll-behavior:contain;position:relative;animation:openDrawer .3s ease-in-out forwards;@media (min-width:768px){margin-left:auto;width:50vw;height:100dvh;max-width:34rem}&[inert]{animation:closeDrawer .3s ease-in-out forwards}.header{display:flex;padding-inline:1rem;justify-content:space-between;position:sticky;top:0;align-items:end;z-index:10;background-color:white;.closeButton{align-self:start;margin-left:auto;z-index:100;border-radius:99999px;font-size:1rem;padding:.8rem;cursor:pointer;color:var(--color-primary);@media (hover:hover){&:hover{color:var(--color-main)}}&:active{color:var(--color-primary)}}}}