.pavo-content-panel-trigger {
position: relative;
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-trigger__hamburger {
position: relative;
display: inline-flex;
flex: none;
width: 1.8em;
height: 0.81em;
font-size: 1.1em;
}
.pavo-content-panel-trigger__hamburger-line {
position: absolute;
left: 0;
width: 100%; height: 11.111%;
background: currentColor;
transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}
.pavo-content-panel-trigger__hamburger-line--1 {
top: 0;
}
.pavo-content-panel-trigger__hamburger-line--2 { top: 44.444%;
}
.pavo-content-panel-trigger__hamburger-line--3 { top: 88.889%;
}
.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--1 {
top: 44.444%;
transform: rotate(30deg);
}
.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--2 {
opacity: 0;
}
.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--3 {
top: 44.444%;
transform: rotate(-30deg);
} .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__dialog { --pavo-cp-cx: 0%;
--pavo-cp-cy: 0%;
--pavo-cp-tx: 0px;
--pavo-cp-ty: 0px;
position: absolute;
z-index: var(--pavo-cp-z-index);
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;
transform: translate(calc(var(--pavo-cp-cx) + var(--pavo-cp-tx)), calc(var(--pavo-cp-cy) + var(--pavo-cp-ty)));
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: translate(var(--pavo-cp-cx), var(--pavo-cp-cy));
}
.pavo-content-panel__content {
overflow: auto;
} .pavo-content-panel--pos-top-start .pavo-content-panel__dialog {
bottom: calc(100% + var(--pavo-cp-offset-y));
inset-inline-start: var(--pavo-cp-offset-x);
}
.pavo-content-panel--pos-top-center .pavo-content-panel__dialog {
bottom: calc(100% + var(--pavo-cp-offset-y));
inset-inline-start: 50%;
--pavo-cp-cx: -50%;
}
.pavo-content-panel--pos-top-end .pavo-content-panel__dialog {
bottom: calc(100% + var(--pavo-cp-offset-y));
inset-inline-end: var(--pavo-cp-offset-x);
}
.pavo-content-panel--pos-center-start .pavo-content-panel__dialog {
top: 50%;
inset-inline-end: calc(100% + var(--pavo-cp-offset-x));
--pavo-cp-cy: -50%;
}
.pavo-content-panel--pos-center .pavo-content-panel__dialog {
position: fixed;
top: 50%;
left: 50%;
--pavo-cp-cx: -50%;
--pavo-cp-cy: -50%;
}
.pavo-content-panel--pos-center-end .pavo-content-panel__dialog {
top: 50%;
inset-inline-start: calc(100% + var(--pavo-cp-offset-x));
--pavo-cp-cy: -50%;
}
.pavo-content-panel--pos-bottom-start .pavo-content-panel__dialog {
top: calc(100% + var(--pavo-cp-offset-y));
inset-inline-start: var(--pavo-cp-offset-x);
}
.pavo-content-panel--pos-bottom-center .pavo-content-panel__dialog {
top: calc(100% + var(--pavo-cp-offset-y));
inset-inline-start: 50%;
--pavo-cp-cx: -50%;
}
.pavo-content-panel--pos-bottom-end .pavo-content-panel__dialog {
top: calc(100% + var(--pavo-cp-offset-y));
inset-inline-end: var(--pavo-cp-offset-x);
} .pavo-content-panel--anim-slide-up .pavo-content-panel__dialog {
--pavo-cp-ty: 24px;
}
.pavo-content-panel--anim-slide-down .pavo-content-panel__dialog {
--pavo-cp-ty: -24px;
}
.pavo-content-panel--anim-slide-left .pavo-content-panel__dialog {
--pavo-cp-tx: 24px;
}
.pavo-content-panel--anim-slide-right .pavo-content-panel__dialog {
--pavo-cp-tx: -24px;
}
.pavo-content-panel--anim-none .pavo-content-panel__dialog {
transition: none;
} .pavo-content-panel__close {
position: absolute;
top: 12px; inset-inline-end: 12px; z-index: 999;
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;
}