[popover] {
    display: none;
    border: none;
    border-radius: .5rem;
    box-shadow: .125rem .125rem .25rem .25rem hsl(0 0 0 / .125);
    opacity: 0;
    transition: opacity .25s ease-in, display .25s allow-discrete, overlay .25s allow-discrete;
}

[popover] {
    &.anchor {
        margin: 0;
    }

    &.anchor--bottom {
        top: calc(anchor(bottom) + .5rem);
        justify-self: anchor-center;
    }

    &.anchor--top {
        bottom: calc(anchor(top) + .5rem);
        justify-self: anchor-center;
    }

    &.anchor--end {
        left: calc(anchor(right) + .5rem);
        position-area: center end;
        justify-self: anchor-center;
    }

    &.anchor--start {
        right: calc(anchor(left) + .5rem);
        position-area: center start;
        justify-self: anchor-center;
    }

    &:popover-open {
        display: block;
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }
}

/*
 * Firefox & Safari do not yet support anchors, instead the popup is placed in the center.
 * See https://caniuse.com/css-anchor-positioning
 */
@supports not (anchor-name: --anchor) {
    [popover] {
        &.anchor {
            margin: auto;
        }
    }
}