.contextmenu {
    position: absolute;
    z-index: 10;
    min-width: 150px;

    display: none;
    // flex-direction: column;

    border: 3px solid var(--main-color);
    border-radius: var(--border-radius);

    background: var(--panel-color);
    box-shadow: 0px 0px 5px #727272;
    overflow: hidden;

    &:first-child {
        border-top: 0px;
    }

    .item {
        width: 100%;
        height: 24px;


        border-top: 1px solid var(--main-hover-color);
        cursor: pointer;
        transition-duration: .2s;

        position: relative;

        &:hover {
            background: var(--main-hover-color);

            img {
                filter: grayscale(1);
            }

        }

        &.disabled {
            opacity: .7;
            pointer-events: none;

            img {
                filter: grayscale(0);
            }

            cursor: not-allowed;
        }


        .content {
            position: absolute;
            inset: 0px;

            display: flex;
            justify-content: flex-start;
            align-items: center;

            padding: 0px 5px;
            box-sizing: border-box;


            pointer-events: none;

            img {
                width: 14px;
                height: 14px;


                transition-duration: .2s;
                filter: grayscale(0);
            }

            .title {
                margin-left: 5px;
                font-size: 9px;
                white-space: nowrap;
            }
        }

        .shortcut {
            position: absolute;
            inset: 0;


            pointer-events: none;

            display: flex;
            align-items: center;
            justify-content: flex-end;

            font-size: 8px;
            font-weight: 400;
            box-sizing: border-box;
            padding-right: 5px;
            color: #adadad;
        }
    }

    .seperator {
        width: 100%;
        height: 1px;
        background: var(--main-color);
    }
}