.popover__container{
    container: popover / inline-size;
    position: relative;
    z-index: 2;
    display: flex;
}

.popover{
    position: relative;
    touch-action: manipulation;
    user-select: none;
    cursor: pointer;

    > .popover__trigger{
        white-space: nowrap;

        &:is(:focus-within, [data-focus]){
            > .popover__trigger__menu{
                transition-duration: .3s;
                opacity: 1;
                transform: translateY(0) translateZ(0);
                pointer-events: auto;
            }
        }

        > .popover__trigger__menu{
            position: absolute;
            min-inline-size: max-content;
            inset-block-start: calc(100% + 1ch);
            inset-inline-start: 0;
            opacity: 0;
            pointer-events: none;
            list-style-type: none;
            padding-inline: 24px;
            padding-block: 16px;
            border-radius: 8px;
            box-shadow: var(--_shadow-black);
            background: var(--_color-white);
            color: var(--_color-black);
            z-index: 9999;
            transform: translateY(5px) translateZ(0);
            transition: opacity .3s ease, transform .3s ease;
        }
    }
}