.ibz-design-container {
    height: 100%;
    --container-border-color: #d9d9d9;
    --item-border-color: var(--container-border-color);
    --container-border-hover-color: orange;
    --item-border-hover-color: #409eff;

    .design-actions {
        position: absolute;
        top: 2px;
        right: 300px;
        z-index: 3;
        display: flex;
    }

    .design-action-item {
        padding: 3px 5px;
    }

    .ibz-design-content {
        height: 100%;
        width: 100%;
    }

    .draggable-warp.draggable-warp-hidden {
        display: none !important;
    }

    .draggable-warp.transition-group {
        margin: 5px;
        border: 1px var(--container-border-color) dashed;

        .flip-list-move {
            transition: transform 0.2s;
        }

        .sortable-ghost.layout-item-container,
        .sortable-ghost {
            overflow: hidden !important;
            background: rgba(242, 156, 177) !important;

            >.layout-item-container {
                border: unset !important;
                outline: unset !important;

                >.drag-handle {
                    background: unset !important;
                }

                >.drag-item-actions {
                    background: unset !important;
                }
            }

            .svg-wrapper {
                display: none !important;
            }
        }

        .layout-item-container {
            overflow: visible;
            position: relative;

            >.drag-item-container {

                >.content {

                    >.draggable-container {

                        >.transition-group.draggable-warp {
                            margin: 0px;
                            border: 0px;
                        }
                    }

                }
            }
        }
    }

    // 拖拽行布局模式公共样式
    .row-layout-sortable-ghost {
        width: 5px !important;
        height: 44px !important;
        margin-left: -5px !important;
        z-index: 10000 !important;
        border-radius: 3px !important;
    }

    .transition-group.draggable-warp {

        >.sortable-ghost:nth-child(1) {
            margin-right: -5px !important;
            margin-left: 0px !important;
        }

        >.sortable-ghost {
            .row-layout-sortable-ghost;
        }
    }

    .transition-group.draggable-warp.flex-layout,
    .transition-group.draggable-warp.flex-layout.flex-column {
        >.sortable-ghost {
            height: 5px !important;
            min-height: 5px !important;
        }
    }

    .transition-group.draggable-warp.flex-layout.flex-row {

        >.sortable-ghost:nth-child(1) {
            margin-right: -5px !important;
            margin-left: 0px !important;
        }

        >.sortable-ghost {
            .row-layout-sortable-ghost;
        }
    }

    .draggable-warp:hover {
        border-color: var(--container-border-hover-color);
    }

    .drag-handle {
        height: 28px;
        width: 28px;
        cursor: pointer;
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
        padding: 0px 3px;
        border-radius: 0 0 5px 0;
        background: var(--container-border-hover-color);
        color: white;
        z-index: 10;
    }

    .drag-item-actions {
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 14px;
        background: rgb(102,102,102);
        color: white;
        z-index: 10;

        ul,
        li {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        >ul {

            >li {
                height: 28px;
                width: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                float: left;
                &:hover {
                    background: var(--container-border-hover-color);
                }
            }
        }
    }

    .drag-item-container {
        position: relative;
        height: calc(100% - 4px);
        min-height: 40px;
        margin: 2px;
        border-top: 1px dashed;
        border-left: 1px dashed;
        border-right: 1px dashed;
        border-bottom: 1px dashed;
        border-color: var(--container-border-color);
    }

    .drag-item-container.active {
        outline: 2px solid var(--container-border-hover-color);
        border: 1px solid var(--container-border-hover-color);
    }

    .layout-item-container:hover {
        border-color: var(--container-border-hover-color);

        >.drag-handle {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .tab-panel-item-wrap,
    .design-page-item-wrap {
        position: relative;
        margin: 2px;
        border-top: 1px dashed;
        border-left: 1px dashed;
        border-right: 1px dashed;
        border-bottom: 1px dashed;
        border-color: var(--container-border-color);
    }

    .tab-panel-item-wrap.active,
    .design-page-item-wrap.active {
        outline: 2px solid var(--container-border-hover-color);
        border: 1px solid var(--container-border-hover-color);
    }

    .layout-item-container.ibz-design-other-container,
    .layout-item-container.ibz-design-item-container {
        --container-border-hover-color: var(--item-border-hover-color);
    }

    .layout-item-container.hidden {
        display: none;
    }
}

.ibz-design-container.mobile{
    padding:50px 0px;
    background-color: #596669;
    display: flex;
    justify-content: center;
    >.layout-item-container {
        >.ibz-panel-content {
            >.draggable-container {
                overflow-y: auto;
            }
        }
    }
    .layout-item-container{
        width:100% !important;
    }
    .ibz-design-content{
        position:relative;
        overflow: visible !important;
        min-width: 300px;
        max-width: 700px;
        width: 30%;
        margin: auto !important;
        z-index: 2;
        &::before{
            content:'';
            display: block;
            width:calc(100% + 60px);
            height:calc(100% + 60px);
            background-color: #000;
            border-radius:40px;
            transform: translateX(-30px)translateY(-30px);
            position:absolute;
            z-index: -1;
            left:0px;
            top:0px;
        }
    }
    .draggable-container {
        background-color: #fff;
    }
    .ibz-design-page{
        width:100%;
        background-color: #fff;
    }
}

.ibz-design-page-content,
.ibz-design-tab-panel-content {

    >.draggable-container {
        height: 100% !important;

        >.draggable-warp {
            margin: 0;
            min-height: 30px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}