.ContextualMenu{
    display: grid;
    position: absolute;
    z-index: 1000;
    background: rgba( 255, 255, 255, 0.75 );
    box-shadow: 2px 1px 2px 0 rgb(31 38 135 / 37%);
    backdrop-filter: blur( 10px );
    border-radius: 0px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    padding: 10px;
    padding: 5px;
    border: 1px dotted dimgray;
    min-width: 300px;
    font-family: var(--font-family);
    font-size: var(--font-size);
}

.ContextualMenu:hover{
    border: 1px solid dimgray;
}

.ContextualMenu > [name=line]{
    padding: 2px 5px;
    gap: 10px;
    text-transform: capitalize;
}

.ContextualMenu hr{
    width: -webkit-fill-available;
    border-color: rgb(105 105 105 / 25%);
}

.ContextualMenu [name=line] [name=icon][icon-mask=mask]{
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    content: " ";
    background-color: dimgray;
}

.ContextualMenu > [name=line]:hover{
    background-color: royalblue;
    color: white;
    box-shadow:  1px 1px 1px #3759bf, -1px -1px 1px #4b79ff;
}

.ContextualMenu > [name=line]:active{
    background: linear-gradient(145deg, #3b5fcb, #4670f1);
    box-shadow: inset 1px 1px 1px #3759bf,
                inset -1px -1px 1px #4b79ff;
}

.ContextualMenu > [name=line]:hover [name=icon][icon-mask=mask]{
    background-color: white;
}