.delete-ruler {
    li {
        white-space: nowrap;
    }
}

.widgets-design-option {
    width: 100%;
    height: 100%;
    z-index: 4;
    position: absolute;
    user-select: none;
    overflow: hidden;
    pointer-events: none;
    left: 0;
    top: 0;

    i {
        margin: 0 5px;
        &:before {
            font-family: 'iconfont' !important;
            font-size: 32px;
            line-height: 36px;
            font-style: normal;
        }
    }

    li {
        cursor: pointer;
    }

    > div {
        height: 36px;
        background: #262729;
        position: absolute;
        transform: translate(-100%, -50%) translateX(-15px);
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        padding-left: 10px;
        pointer-events: auto;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.4);
        &:after {
            position: absolute;
            right: -15px;
            top: 0;
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 18px 0 18px 15px;
            border-color: transparent transparent transparent #262729;
        }
    }

    &.right > div {
        transform: translate(15px, -50%);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        padding: 0 10px 0 0;
        &:after {
            right: auto;
            left: -15px;
            border-width: 18px 15px 18px 0;
            border-color: transparent #262729 transparent transparent;
        }
    }
    .delete-ruler li {
        line-height: 36px;
        padding: 0 10px;
        word-break: keep-all;
        list-style: none;
        color: #fff;
    }
}



[xui_tags] {
    position: absolute;
    width: 100%;
    height: 100%;
}