@import "../lib.less";

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

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

  &-label {
    position: relative;
    flex: none;
    width: @dls-form-label-width;
    margin-right: @dls-form-label-spacing-after-horizontal;
    color: @dls-form-label-font-color;
    text-align: right;

    .@{veui-prefix}-label {
      line-height: @dls-height-m;
    }
  }

  &-required > &-label::before {
    content: "*";
    margin-right: @dls-form-label-content-spacing;
    color: @dls-form-label-required-color;
  }

  .@{veui-prefix}-field-tip {
    .absolute(@dls-height-m / 2, _, _, dls-sum(100%, @dls-form-label-content-spacing));
    color: @dls-form-label-icon-color;
    transform: translateY(-50%);

    .@{veui-prefix}-icon {
      display: block;
    }
  }

  &-no-label {
    margin-left: dls-sum(@dls-form-label-width, @dls-form-label-spacing-after-horizontal);
  }

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

  &-error {
    position: absolute;
    left: 0;
    top: dls-sum(100%, @dls-form-field-error-spacing-before-vertical);
    color: @dls-form-field-error-font-color;
  }

  .make-ui(@font-size, @min-height) {
    font-size: @font-size;
    min-height: @min-height;

    .@{veui-prefix}-form-label {
      line-height: @min-height;
    }
    .@{veui-prefix}-form-tip {
      top: ~"calc(@{min-height} / 2)";
    }
  }
  &[ui~="l"] {
    .make-ui(@dls-font-size-2, @dls-height-l);
  }

  &[ui~="m"] {
    .make-ui(@dls-font-size-1, @dls-height-m);
  }

  &[ui~="s"] {
    .make-ui(@dls-font-size-0, @dls-height-s);
  }

  &[ui~="xs"] {
    .make-ui(@dls-font-size-0, @dls-height-xs);
  }
}