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

// will be removed
@veui-form-field-spacing-after-horizontal: @veui-padding-unit * 2;

.@{veui-prefix}-field {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: @veui-height-m;

    &-label {
        position: relative;
        flex: none;
        margin-right: @veui-form-label-spacing-after-horizontal;
        color: @veui-form-label-font-color;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
    }

    &-required > &-label::before {
        content: "*";
        color: @veui-form-label-required-color;
        display: inline-block;
        width: @veui-form-font-size-s;
        text-align: center;
        line-height: @veui-line-height-m;
    }

    .@{veui-prefix}-field-tip {
        color: @veui-form-label-icon-color;
        margin-left: @veui-field-label-tip-spacing;
        display: inline-block;
    }

    .@{veui-prefix}-field-content {
        display: flex;
        align-items: center;
        flex: 1 0 auto;
        position: relative;
    }

    &-error {
        position: absolute;
        left: 0;
        top: 100%;
        color: @veui-form-field-error-font-color;
        line-height: @veui-line-height-m;
        font-size: @veui-form-font-size-s;
    }

    &[ui~="m"] {
        &.@{veui-prefix}-field-required .@{veui-prefix}-field-label::before {
            width: @veui-form-font-size-m;
        }
    }

    &[ui~="left"] {
        .@{veui-prefix}-field-label {
            justify-content: flex-start;
        }
    }

    &[ui~="special"] {
        .@{veui-prefix}-field-label {
            .padding(_, _, _, @veui-field-label-padding-s);
        }
        &[ui~="left"] {
            .@{veui-prefix}-field-label {
                .padding(_, @veui-field-label-left-special-padding-x);
            }
        }
    }

    &[ui~="few"] {
        .@{veui-prefix}-field-label {
            width: @veui-field-label-width-right-m;
        }
        &.@{veui-prefix}-field-no-label {
            margin-left: veui-sum(@veui-field-label-width-right-m, @veui-form-label-spacing-after-horizontal);
        }
        &[ui~="left"] {
            .@{veui-prefix}-field-label {
                .padding(_, _, _, @veui-field-label-left-few-padding-left);
                width: @veui-field-label-width-left-m;
            }
            &.@{veui-prefix}-field-no-label {
                margin-left: veui-sum(@veui-field-label-width-left-m, @veui-form-label-spacing-after-horizontal);
            }
        }
    }

    &[ui~="long"] {
        .@{veui-prefix}-field-label {
            width: @veui-field-label-width-l;
        }
        &.@{veui-prefix}-field-no-label {
            margin-left: veui-sum(@veui-field-label-width-l, @veui-form-label-spacing-after-horizontal);
        }
        &[ui~="left"] {
            .@{veui-prefix}-field-label {
                .padding(_, _, _, @veui-field-label-left-long-padding-x);
            }
        }
    }

    &[ui~="multi"] {
        .@{veui-prefix}-field-label {
            align-items: flex-start;
            .padding(@veui-field-label-multi-top, _, _, _);
        }
    }
}