#context-menu:popover-open {

    display: flex;
    flex-direction: column;
    padding: 0.4em;
    min-width: 8em;

    margin: 0;
    inset: auto;

    background-color: hsl(0 0 0);
    color: hsl(0 0 100);
    cursor: pointer;
    text-align: left;

    border: 2px solid hsl(0 0 30);
    border-radius: 0.4em;
    overflow: hidden;

    & > .context-menu-content {
        display: none;
        flex-direction: column;

        &.active { display: flex; }
        
        & > .context-menu-option {
            padding: 0.2em 0.6em;
            border-radius: 0.2em;
            
            &:hover {
                background-color: hsl(0 0 100 / 0.15);
            }
            
            &:active {
                opacity: 0.6;
            }
        }
        
        & > hr {
            color: hsl(0 0 15);
            margin: 0.4em 0em;
        }
    }

    &:has([data-target="file-tree-item"].active) {
        position-area: center right;
        position-try-fallbacks: flip-block;
        align-self: end;
    }

    &:has([data-target="tab"].active) {
        position-area: bottom span-all;
        justify-self: anchor-center;
        position-try-fallbacks: flip-block;
        margin-top: 2px;
    }
    
}