context-menu {
    position: fixed;
    z-index: 100001;
    opacity: 0;
    visibility: hidden;
    background: var(--context-menu-background);
    border-radius: 2px;
    min-width: 285px;
    max-width: 600px;
    padding: 10px 0;
    box-shadow:
        0 8px 10px 1px rgb(0 0 0 / 14%),
        0 3px 14px 2px rgb(0 0 0 / 12%),
        0 5px 5px -3px rgb(0 0 0 / 20%);
    transition: visibility 0.2s, opacity 0.2s linear;

    &.visible {
        opacity: 1;
        visibility: visible;
        display: block;
    }

    .menu {
        .item {
            cursor: default;
            padding: 2px 5px;

            &:hover {
                background: var(--context-menu-item-hover-background);
            }

            .item-container {
                padding: 0 7px;
            }

            .icon {
                width: 25px;
            }

            .text {
                display: flex;
                align-items: center;
            }

            .shortcut {
                text-align: right;
            }

            &.divider {
                &:hover {
                    background-color: unset;
                }
            }
        }

        hr {
            margin: 3px 0;
            background-color: white;
        }
    }
}
