// 编辑画布
.epic-edit-canvas {
    flex: 1;
    overflow: hidden;
    background-image: linear-gradient(var(--epic-designer-color) 14px, transparent 0),
        linear-gradient(90deg, transparent 14px, var(--epic-designer-dot-color) 0);
    background-size: 15px 15px;
    .epic-edit-range {
        overflow-y: auto;
        cursor: pointer;
        background-color: var(--epic-edit-range-color);
        box-shadow: rgb(0 0 0 / 10%) 0 20px 25px -5px, rgb(0 0 0 / 4%) 0 10px 10px -5px;
        .epic-draggable-range {
            width: 100%;
            height: 100%;
            min-height: 60px;
            border: 1px var(--epic-border-color) dashed;
        }
        > div > .epic-draggable-range {
            border: transparent;

            // 屏蔽antd element-plus label点击事件
            .ant-form-item-label > label,
            .el-form-item > .el-form-item__label {
                pointer-events: none;
            }
        }
        .root-node > .form-main > form > .epic-draggable-range {
            border: transparent;
        }
    }
    .epic-hover-widget {
        box-sizing: border-box;
        border: 1px var(--epic-primary-color) dashed;
    }
    .epic-checked-widget {
        background: var(--epic-widget-shade-color);
        border: 1px var(--epic-primary-color) dashed;
        &::before {
            position: absolute;
            left: 0;
            width: 100%;
            height: 5px;
            content: "";
            background: var(--epic-primary-color);
        }
        &.top,
        &.center {
            &::before {
                top: -5px;
            }
        }
        &.bottom {
            &::before {
                bottom: -5px;
            }
        }
        .epic-widget-action-box {
            position: absolute;
            z-index: 999;
            display: flex;
            height: 30px;
            padding: 0 4px;
            background: var(--epic-primary-color);
            border-radius: 4px 4px 0 0;
            .epic-widget-action-item {
                height: 30px;
                padding: 0 4px;
                line-height: 25px;
                color: white;
                cursor: pointer;
            }
        }
        .form-main {
            padding: 6px;
            border: 1px solid #f0f0f0;
        }
    }

    // 隐藏设计区域滚动条
    .epic-edit-screen-container {
        &::-webkit-scrollbar {
            // display: none;
            width: 6px;
            height: 6px;
        }
    }
    .epic-edit-toolbar {
        box-sizing: border-box;
        height: 40px;
        background: var(--epic-view-color);
        border-bottom: 1px solid var(--epic-border-color);
        .epic-action-item.disabled {
            color: var(--epic-text-disabled);
            cursor: no-drop;
        }
        .epic-device-item.checked {
            color: var(--epic-primary-color);
        }
        .epic-device-item:hover,
        .epic-action-item:hover {
            background: var(--epic-action-hover-color);
        }
    }
    .widget-box {
        cursor: move;
    }
}
