.ups-offcanvas-overlay{background-color:var(--ups-color-surface-backdrop);inset:var(--ups-size-0);width:100vw;height:100vh;z-index:999}.ups-offcanvas,.ups-offcanvas-overlay{display:flex;flex-direction:column;position:fixed}.ups-offcanvas{background-color:var(--ups-color-surface-base);box-shadow:var(--ups-size-0) var(--ups-size-1) var(--ups-size-4) var(--ups-size-0) rgba(0,0,0,.12);z-index:1000}.ups-offcanvas[data-state=open]{animation:var(--animation-open)}.ups-offcanvas[data-state=closed]{animation:var(--animation-close)}.ups-offcanvas__head{display:flex;flex-direction:column;gap:var(--ups-size-4);padding:var(--ups-size-7) var(--ups-size-5);border-bottom:1px solid var(--ups-color-border-light)}.ups-offcanvas__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ups-size-4)}.ups-offcanvas__body{flex:1 1 0;min-height:0;overflow-y:auto;padding:var(--ups-size-5);scrollbar-width:thin;scroll-behavior:smooth}.ups-offcanvas__body::-webkit-scrollbar{width:8px}.ups-offcanvas__body::-webkit-scrollbar-track{background:var(--ups-color-neutral-100)}.ups-offcanvas__body::-webkit-scrollbar-thumb{background:var(--ups-color-surface-scroll);border-radius:4px}.ups-offcanvas__body::-webkit-scrollbar-thumb:hover{background:var(--ups-color-neutral-500)}.ups-offcanvas__footer{padding:var(--ups-size-5);border-top:1px solid var(--ups-color-border-light);display:flex;justify-content:flex-end;gap:var(--ups-size-3)}.ups-offcanvas__close-button{display:inline-flex;align-items:center;justify-content:center;width:var(--ups-size-8);height:var(--ups-size-8);border-radius:50%;border:none;background-color:rgba(0,0,0,0);color:var(--ups-color-icon-body);cursor:pointer;transition:all .2s ease}.ups-offcanvas__close-button:hover{background-color:var(--ups-color-surface-base-hover)}.ups-offcanvas__close-button:active{background-color:var(--ups-color-surface-base-active)}.ups-offcanvas__close-button:focus-visible{outline:2px solid var(--ups-color-border-focus);outline-offset:2px}.ups-offcanvas--end,.ups-offcanvas--start{top:var(--ups-size-0);width:var(--offcanvas-width,25rem);height:100vh;display:flex;flex-direction:column}@media(max-width:750px){.ups-offcanvas--end,.ups-offcanvas--start{--offcanvas-width:100vw}}.ups-offcanvas--start{left:var(--ups-size-0);--animation-open:fadeInLeft 0.5s ease-in-out forwards;--animation-close:fadeOutLeft 0.4s ease-in-out forwards}.ups-offcanvas--end{right:var(--ups-size-0);--animation-open:fadeInRight 0.5s ease-in-out forwards;--animation-close:fadeOutRight 0.4s ease-in-out forwards}.ups-offcanvas--bottom,.ups-offcanvas--top{left:var(--ups-size-0);width:100%;height:75vh}@media(max-width:750px){.ups-offcanvas--bottom,.ups-offcanvas--top{height:100vh}}.ups-offcanvas--top{top:var(--ups-size-0);--animation-open:fadeInTop 0.5s ease-in-out forwards;--animation-close:fadeOutTop 0.4s ease-in-out forwards}.ups-offcanvas--bottom{bottom:var(--ups-size-0);--animation-open:fadeInBottom 0.5s ease-in-out forwards;--animation-close:fadeOutBottom 0.4s ease-in-out forwards}.ups-offcanvas--sm{--offcanvas-width:25rem}.ups-offcanvas--md{--offcanvas-width:45rem}.ups-offcanvas--lg{--offcanvas-width:75%}.ups-offcanvas--xl{--offcanvas-width:100%}@media(max-width:400px){.ups-offcanvas{--offcanvas-width:100vw}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes fadeInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes fadeInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.ups-border-none{border-bottom:none}.ups-border-bottom{border-bottom:1px solid var(--ups-color-border-light)}