.g-form {
    > * {
        margin-bottom: 8px;
    }

    .g-form-item {
        vertical-align: top;
        display: flex;

        .g-form-item-label {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            vertical-align: top;
            font-weight: 600;
            display: inline-block;
            text-align: right;
            width: 100px;

            > label {
                vertical-align: middle;
            }

            > label::after {
                content: ":";
                position: relative;
                margin: 0 8px 0 2px;
            }

            &.required > label::before {
                margin-right: 4px;
                color: #f5222d;
                font-size: 14px;
                font-family: SimSun, sans-serif;
                content: "*";
            }
        }

        .g-form-item-children {
            display: inline-block;
            width: 100%;
            max-width: 400px;
            flex: 1;
            height: 100%;

            .message {
                font-size: 12px;
                margin: 5px 0;
                line-height: 15px;
                text-align: left;

                &.error {
                    color: #f5222d;
                }
            }

            .pure-text {
                line-height: 1.8;
            }

            .ant-input,
            .ant-select,
            .ant-input-password,
            .ant-input-affix-wrapper,
            .ant-cascader-picker,
            .ant-picker,
            .g-number-input,
            textarea {
                width: 100%;
            }

            .ant-space-compact {
                width: 100%;

                .ant-input,
                .ant-select,
                .ant-input-password,
                .ant-input-affix-wrapper,
                .ant-cascader-picker,
                .ant-picker,
                .g-number-input,
                textarea {
                    width: auto;
                }
            }

            .g-number-input.stepper-always input {
                width: auto;
            }

            .ant-input-group {
                > * {
                    width: auto;
                }
            }

            &.has-error {
                textarea,
                input,
                .ant-select-content,
                .ant-descriptions-view,
                .ant-input-affix-wrapper,
                .ant-upload {
                    border-color: #f5222d !important;
                }
            }

            &.width-fill {
                max-width: initial;
            }

            &.width-shrink {
                max-width: initial;
                width: auto;

                .ant-input,
                .ant-select,
                .ant-input-password,
                .ant-input-affix-wrapper,
                .ant-cascader-picker,
                .ant-picker,
                .g-number-input,
                textarea {
                    width: auto;
                }
            }
        }
    }

    .g-form-submit-form-item {
        .g-form-submit-button {
            .ant-spin {
                color: #fff;
                line-height: 100%;
            }
        }
    }

    &.g-form-inline {
        padding: 0;

        .g-form-item {
            display: inline-block;
            margin-right: 12px;
            white-space: nowrap;

            .g-form-item-label {
                display: inline-block;
                width: initial;
                line-height: 2;
            }

            .g-form-item-children {
                width: auto;
                max-width: unset;

                .pure-text {
                    line-height: 2.4;
                }

                .ant-select {
                    width: 130px;
                }

                .ant-select-multiple {
                    width: 100%;
                    min-width: 130px;
                }

                // Tune margin top, to make them visually aligned with label
                .g-amount,
                .ant-switch,
                .ant-radio-wrapper,
                .ant-checkbox-wrapper {
                    margin-top: 5px;
                }
            }
        }
    }

    &.g-form-vertical {
        .g-form-item {
            flex-direction: column;

            .g-form-item-label {
                display: block;
                text-align: left;
                width: initial;
                margin-bottom: 3px;
            }
        }
    }
}