.pavo-content-panel-trigger {
display: inline-flex;
}
.pavo-content-panel-trigger__button {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0.6em 1em;
background: none;
border: 0;
cursor: pointer;
color: inherit;
font: inherit;
line-height: 1;
transition: color 0.2s ease, background-color 0.2s ease;
} .pavo-content-panel-trigger__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1em;
height: 1em;
font-size: 1.1em;
line-height: 1;
} .pavo-content-panel-trigger__button--has-close-icon .pavo-content-panel-trigger__icon--close {
display: none;
}
.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--default {
display: none;
}
.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--close {
display: inline-flex;
} .pavo-content-panel {
--pavo-cp-offset-x: 24px;
--pavo-cp-offset-y: 24px;
--pavo-cp-duration: 300ms;
--pavo-cp-z-index: 9999;
}
.pavo-content-panel__overlay {
position: fixed;
inset: 0; z-index: var(--pavo-cp-z-index);
background: rgba(17, 17, 17, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity var(--pavo-cp-duration) ease, visibility var(--pavo-cp-duration);
}
.pavo-content-panel.is-open .pavo-content-panel__overlay {
opacity: 1;
visibility: visible;
}
.pavo-content-panel__dialog {
position: fixed; z-index: calc(var(--pavo-cp-z-index) + 1);
display: flex;
flex-direction: column;
width: 450px;
max-width: calc(100vw - 30px);
max-height: calc(100vh - 30px);
background: #fff;
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transition: opacity var(--pavo-cp-duration) ease, visibility var(--pavo-cp-duration), transform var(--pavo-cp-duration) ease;
}
.pavo-content-panel.is-open .pavo-content-panel__dialog {
opacity: 1;
visibility: visible;
transform: none;
}
.pavo-content-panel__content {
overflow: auto;
}  .pavo-content-panel--anim-slide-up .pavo-content-panel__dialog {
transform: translateY(24px);
}
.pavo-content-panel--anim-slide-down .pavo-content-panel__dialog {
transform: translateY(-24px);
}
.pavo-content-panel--anim-slide-left .pavo-content-panel__dialog {
transform: translateX(24px);
}
.pavo-content-panel--anim-slide-right .pavo-content-panel__dialog {
transform: translateX(-24px);
}
.pavo-content-panel--anim-none .pavo-content-panel__dialog,
.pavo-content-panel--anim-none .pavo-content-panel__overlay {
transition: none;
} .pavo-content-panel__close {
position: absolute;
top: 12px; inset-inline-end: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #1a1a1a;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pavo-content-panel__close-icon {
display: inline-flex;
font-size: 1em;
line-height: 1;
}
.pavo-content-panel__close-icon--default {
position: relative;
width: 0.7em;
height: 0.7em;
}
.pavo-content-panel__close-icon--default::before,
.pavo-content-panel__close-icon--default::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
}
.pavo-content-panel__close-icon--default::before {
transform: rotate(45deg);
}
.pavo-content-panel__close-icon--default::after {
transform: rotate(-45deg);
}
.pavo-content-panel__placeholder {
padding: 24px;
color: #6b7280;
font-size: 0.9em;
text-align: center;
} html.pavo-content-panel-scroll-lock {
overflow: hidden;
}