@import '../scss/variable';

$field-prefix: #{$prefix}-easy-form-field;
@mixin ne-easy-form-field {
  .#{$field-prefix} {
    display: flex;
    margin-bottom: 24px;
    &-error {
      .#{$field-prefix}-helper-text {
        color: $error-color;
      }
    }
    &-col {
      display: inline-flex;
      align-items: center;
      text-align: right;
    }
    &-label-container > label {
      flex: 1 1 auto;
      &::after {
        content: ':';
      }
    }
    &-content-container {
      display: inline-flex;
      position: relative;
      & > :first-child {
        width: 100%;
      }
    }
    &-helper-text {
      position: absolute;
      top: 100%;
      left: 0;
      padding: 4px 8px 0 8px;
      line-height: 1;
    }
    &-status {
      display: inline-flex;
      flex-basis: 40px;
      align-items: center;
      margin-left: $form-gutter-width;
      color: $icon-color;
    }
    &-inline {
      display: inline-flex;
      min-width: 320px;
      padding-right: $form-gutter-width + 10;
    }
  }
  @each $name, $value in $sizes-map {
    .#{$field-prefix}-#{$name} {
      .#{$field-prefix}-label-container label {
        align-self: flex-start;
        line-height: $value;
      }
    }
  }
}