@media screen and (max-device-width: 500px) {
    .context-menu {
        font-size: 1.5em;
    }
}

.context-menu {
    display: none;
    z-index: 999999999;
    position: absolute;
    overflow: hidden;
    background: var(--color-container);
    color: var(--color-text);
    white-space: nowrap;
    font-family: sans-serif;
    border-radius: 0.15em;
    padding: 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    outline: none !important;
    margin: 0;
}

.context-menu li {
    padding: 0.25em 0.75em;
    cursor: pointer;
    list-style-type: none;
    transition: all .1s ease;
    user-select: none;
}

    .context-menu li .material-icons {
        margin-left: -0.25em;
        margin-right: 0.25em;
        font-size: 1.25em;
    }

    .context-menu li.separate:not(:first-child) {
        border-top: 1px solid var(--color-stripe-border);
    }

    .context-menu li:hover {
        background-color: var(--color-accent);
        color: var(--color-accent-text);
    }

    .context-menu li a {
        text-decoration: none;
        color: inherit;
    }