.pavo-offcanvas {
position: fixed;
inset: 0; z-index: 999999;
display: flex;
justify-content: var( --pavo-offcanvas-justify-content, flex-start );
align-items: var( --pavo-offcanvas-align-items, flex-start );
visibility: hidden;
pointer-events: none;
}
.pavo-offcanvas--open {
visibility: visible;
pointer-events: auto;
}
.pavo-offcanvas__overlay {
position: absolute;
inset: 0;
opacity: var( --pavo-offcanvas-overlay-opacity, 1 );
transition: opacity var( --pavo-offcanvas-animation-duration, 0.4s ) ease;
pointer-events: none;
}
.pavo-offcanvas--open .pavo-offcanvas__overlay {
pointer-events: auto;
}
.pavo-offcanvas__panel {
position: relative;
width: var( --pavo-offcanvas-width, 360px );
max-width: 100%;
height: var( --pavo-offcanvas-height, 100vh );
max-height: 100%;
}
.pavo-offcanvas__panel.animated {
animation-duration: var( --pavo-offcanvas-animation-duration, 0.4s );
}
.pavo-offcanvas__content {
width: 100%;
height: 100%;
overflow: var( --pavo-offcanvas-content-overflow, auto );
}
body.pavo-offcanvas-lock-scroll {
overflow: hidden;
}