@import "../lib.less";
@import "../variables/components/field.less";
@import "../variables/components/form.less";

.@{veui-prefix}-form {
    font-size: @veui-form-font-size-s;

    .@{veui-prefix}-field {
        margin-bottom: @veui-form-field-spacing-vertical-normal;
        min-height: @veui-form-font-size-s * @veui-line-height-m;
        &:last-child {
            margin-bottom: 0;
        }
        .@{veui-prefix}-label {
            display: inline-block;
            line-height: @veui-line-height-m;
            word-break: break-all;
        }
    }

    .@{veui-prefix}-field,
    .@{veui-prefix}-fieldset {
        .@{veui-prefix}-field-no-label {
            margin-left: 0 !important;
        }
    }

    &-actions {
        margin-top: @veui-form-actions-spacing-before;
        // padding-left: veui-sum(@veui-form-label-width, @veui-form-label-spacing-after-horizontal);

        .@{veui-prefix}-button + .@{veui-prefix}-button {
            margin-left: @veui-form-actions-content-spacing;
        }
    }

    &[ui~="m"] {
        font-size: @veui-form-font-size-m;
        .@{veui-prefix}-field {
            min-height: @veui-height-m;
            .@{veui-prefix}-label {
                line-height: @veui-line-height-m + 0.1;
            }
        }
    }

    &[ui~="loose"] {
        .@{veui-prefix}-field {
            margin-bottom: @veui-form-field-spacing-vertical-loose;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    &[ui~="top"] {
        .@{veui-prefix}-field {
            flex-direction: column;
            margin-bottom: @veui-form-field-spacing-vertical-normal;
            &:last-child {
                margin-bottom: 0;
            }
            &-label {
                margin-right: 0;
                justify-content: flex-start;
                .padding(0);
                .@{veui-prefix}-label {
                    .padding(0, 0, @veui-form-top-field-label-padding-bottom, 0);
                }
            }
        }
    }
}