form[data-op3-element-options-type="formsection"] {

    // children property
    .op3-element-options-property[data-op3-element-options-property-name="children"] {
        .op3-element-options-property-children-list {
            &:empty::after {
                content: "Empty Children List";
                display: block;
                font-size: 12px;
                color: #8e8e8e;
            }
        }

        .op3-element-options-property-children-list-item[data-op3-element-child-type="headline"],
        .op3-element-options-property-children-list-item-clone,
        .op3-element-options-property-children-list-item-remove {
            display: none;
        }

        .op3-element-options-property-children-list-item-visible {
            display: flex;
        }
    }
}

// disable margins on form element for input/select
// (using field-gap properties to set this)
form[data-op3-element-options-path*="/formsection/"] {
    &[data-op3-element-options-type="input"],
    &[data-op3-element-options-type="select"] {
        .op3-boxmodel[data-boxmodel-id="input-boxModel"],
        .op3-boxmodel[data-boxmodel-id="select-boxModel"] {
            .op3-boxmodel-margin-top,
            .op3-boxmodel-margin-bottom,
            .op3-boxmodel-margin-left,
            .op3-boxmodel-margin-right {
                pointer-events: none;
                opacity: 0.5;

                & + .op3-boxmodel-handler {
                    display: none;
                }
            }
        }
    }
}

// replace width property with widthCalcColumns property
form[data-op3-element-options-path*="/formsection/"] {
    .op3-element-options-property[data-op3-element-options-property-id="widthCalcColumns"] {
        display: flex;
    }
    .op3-element-options-property[data-op3-element-options-property-id="width"] {
        display: none;
    }
}