.op3-element[data-op3-element-type$="form"] {
    // Formula to be used for flex-basis on field element while using
    // flex-direction:row. Flex basis will override width, so the value
    // should be empty for flex-direction:column, or this formula for
    // flex-direction:row. This formula is stored in css and will be
    // set by js (editor).
    //
    // Info:
    // Not using var(--key) in formula, be cause it will be replaced
    // whith actual variable value while trying to retrieve formula
    // with js. Using --key instead, and js will replace it with
    // var(--key).
    --op3-flex-basis-inline-layout-formula:calc((100% - --op3-flex-gap * (--op3-flex-basis-steps - 1)) / --op3-flex-basis-steps * --op3-flex-basis-span + --op3-flex-gap * (--op3-flex-basis-span - 1));

    // No drop.
    #op3-designer-element > [data-op3-children].op3-element-dragstart & {
        pointer-events: none;
    }

    // Empty form icon.
    [data-op3-children]:empty,
    [data-op3-children="1"] {
        &::before {
            content: $op3-icon-list-1;
            position: relative;
            display: block;
            left: auto;
            top: auto;
            font-family: "op3-icons";
            font-size: 2em;
            line-height: 2;
            text-align: center;
            color: rgba(200,200,200,0.5);
            transform: none;
        }

        .op3-element {
            display: none !important;
        }
    }

    #op3-designer-element > [data-op3-children].op3-element-dragstart & {
        pointer-events: none;
    }
}