:root {
    --popover-bg: white;
    --popover-color: black;
    --popover-border: rgba(0, 0, 0, .2);
    --popover-radius: .5rem;
    --popover-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    --popover-padding: 15px;
    --popover-fs: 14px;
    --popover-z: 2147483647;
    --popover-gap: 8px;
}

.popover {
    position: fixed;
    width: max-content;
    max-width: 414px;
    background: var(--popover-bg);
    color: var(--popover-color);
    border: 1px solid var(--popover-border);
    /* border-radius: var(--popover-radius); */
    box-shadow: var(--popover-shadow);
    padding: var(--popover-padding);
    font-family: var(--font-alt);
    font-size: var(--popover-fs);
    z-index: var(--popover-z);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.popover.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 414px) {
    .popover {
        max-width: 100vw;
    }
}