@mixin os-base-context-menu-container {
    @keyframes os-context-menu-showing {
        from {
            opacity: 0;
            transform: scaleY(0.5) translateY(-35%);
        }

        to {
            opacity: 1;
            transform: scaleY(1) translateY(0);
        }
    }

    @keyframes os-context-menu-content-showing {
        from {
            opacity: 0;
            transform: translateY(-75%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes os-context-menu-hiding {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    min-width: 25px;
    min-height: 10px;
    padding: 3px 0px;
    border: solid 1px #d7d7d7;
    background: #f5f5f5;
    color: #000000;
    font-family: var(--segoe-ui);
    position: absolute;
    z-index: 9999;
    user-select: none;
    box-shadow: 0px 4px 20px -8px rgba(0, 0, 0, .5);
    overflow: hidden;

    &.os-opening {
        animation: os-context-menu-showing .25s ease forwards;

        > * {
            animation: os-context-menu-content-showing .35s ease forwards;
        }
    }

    &.os-hiding {
        animation: os-context-menu-hiding .1s linear forwards;
        pointer-events: none;
    }
}
