.popover {
    background: var(--surface);
    border: solid 1px var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: var(--space-inline);
    max-width: 100%;
    flex-direction: column;
    inset: auto;
    margin: var(--space-inline);
    max-height: min(60vh, 24rem);
    overflow-y: auto;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline;
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top left;
    transition: opacity var(--transition-speed) ease-in-out,
    transform var(--transition-speed) ease-in-out,
    overlay var(--transition-speed) ease-in-out allow-discrete,
    display var(--transition-speed) ease-in-out allow-discrete;
}

.popover:not(.fixed-width) {
    width: 250px;
}

.popover:popover-open {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.popover.pad {
    padding: var(--space);
}

.popover > .btn {
    width: 100%;
    font-weight: 400;
}

.popover > hr {
    margin-block: var(--space-inline) !important;
}

.popover > .btn i {
    font-size: var(--text-sm);
}

@starting-style {
    .popover:popover-open {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Item buttons */

.btn.popover-item {
    color: var(--text);
    border: none;
    justify-content: flex-start;
    text-align: left;
}

.btn.popover-item:hover,
.btn.popover-item.active {
    background: var(--surface-sunken);
}

/* Placement */

/* below, left-aligned */
.popover.bottom-start {
    position-area: bottom span-right;
}

/* below, right-aligned */
.popover.bottom-end {
    position-area: bottom span-left;
}

/* above, left-aligned */
.popover.top-start {
    position-area: top span-right;
}

/* above, right-aligned */
.popover.top-end {
    position-area: top span-left;
}

/* right, top-aligned */
.popover.right-start {
    position-area: right span-bottom;
}

/* right, bottom-aligned */
.popover.right-end {
    position-area: right span-top;
}

/* left, top-aligned */
.popover.left-start {
    position-area: left span-bottom;
}

/* left, bottom-aligned */
.popover.left-end {
    position-area: left span-top;
}

/* Transform origins */
.popover.bottom-end,
.popover.left-start {
    transform-origin: top right;
}

.popover.top-start,
.popover.right-end {
    transform-origin: bottom left;
}

.popover.top-end,
.popover.left-end {
    transform-origin: bottom right;
}

/* Small screens */

/* The same backdrop a dialog gets, for the same reason: from here down a menu stops being something
   beside the button that opened it and covers the page instead, and the page under it should read as
   out of reach. It is painted rather than hit tested, so a press on it still light dismisses. */
@media (max-width: 900px) {
    .popover::backdrop {
        background: rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: opacity var(--transition-speed) ease-in-out,
        overlay var(--transition-speed) ease-in-out allow-discrete,
        display var(--transition-speed) ease-in-out allow-discrete;
    }

    .popover:popover-open::backdrop {
        opacity: 1;
    }

    @starting-style {
        .popover:popover-open::backdrop {
            opacity: 0;
        }
    }
}

@media (max-width: 720px) {
    .popover {
        position-area: none !important;
        inset: auto 0 0 0;
        width: 100% !important;
        max-width: none !important;
        max-height: 80%;
        margin: 0;

        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
}