.dark-context-menu {
    color: $color-control-dark-foreground;
    position: absolute;
    display: inline-block;
    z-index: 100;
    background-color: #000000CC;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
    border-radius: 0 0 $border-radius-control $border-radius-control;
    min-width: 100px;

    & > .item {
        padding: 0.35em 1em;
        transition: background 0.05s linear;
        position: relative;
        
        &.--disabled {
            color: $color-control-dark-hover;
        }

        &:not(.--header):not(.--active):not(.--disabled) {
            &:hover {
                background: $color-primary;
            }
        }

        &.--active {
            background: $color-primary;
        }

    }

    &.--nested {
        left: 100%;
        top: 0;
    }

    &.--flipped-x.--nested {
        left: unset;
        right: 100%;
    }

    &.--flipped-y.--nested {
        top: unset;
        bottom: 0;
    }

    & > .divider {
        margin: 0.35em 0;
        height: 1px;
        background-color: $color-control-dark-hover;
    }

}