.grid-stack-layout-builder-box {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;

    > .left {
        width: 300px;
        flex-shrink: 0;
        position: relative;
        padding: 10px;

        &::after {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 1px;
            content: "";
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
            background-color: var(--main-color);
        }

        .material-box {
            height: 100%;
            width: 100%;
            overflow-y: auto;
            scrollbar-width: none;

            .material-item {
                margin-bottom: 12px;
                background: #fff;
                color: var(--main-color);
                border: 1px solid var(--main-color);
                border-radius: 4px;
                cursor: move;
                user-select: none;

                .grid-stack-item-content {
                    padding: 12px;
                    text-align: center;
                }

                &.no-drag {
                    border: 1px solid #dcdfe6;
                    cursor: default;
                    color: #d3d3d3;
                }
            }
        }
    }

    > .content {
        flex: 1;
        margin: 15px;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        > .grid-layout-wrapper {
            flex: 1;
            overflow-y: auto;
        }

        > .footer-btn-box {
            flex-shrink: 0;
            padding-top: 0.8rem;
            padding-bottom: 0.8rem;
            margin-top: 3px;
            display: flex;
            justify-content: center;
            gap: 1rem;
            box-shadow: 0 -2px 4px #0000001a;

            > button {
                cursor: pointer;
            }
        }
    }
}