<div class="twnd-form-field-wrapper mr-12">
  <div
    class="twnd-form-field-flex mb-12"
    #connectionContainer
    (click)="_control.onContainerClick && _control.onContainerClick($event)">
    <!-- Outline used for outline appearance. -->
    <ng-container *ngIf="appearance == 'outline'">
      <div class="twnd-form-field-outline justify-start">
        <div class="twnd-form-field-outline-start"></div>
        <!-- <div class="mr-4"></div> -->
        <div class="twnd-form-field-outline-end"></div>
      </div>
      <div
        class="twnd-form-field-outline twnd-form-field-outline-thick justify-start">
        <div class="twnd-form-field-outline-start"></div>
        <!-- <div class="mr-4"></div> -->
        <div class="twnd-form-field-outline-end"></div>
      </div>
    </ng-container>

    <div
      class="twnd-form-field-prefix"
      *ngIf="_prefixChildren.length"
      (cdkObserveContent)="0"
      [cdkObserveContentDisabled]="appearance != 'outline'">
      <ng-content select="[twndPrefix]"></ng-content>
    </div>

    <div class="twnd-form-field-infix" #inputContainer>
      <ng-content></ng-content>

      <span class="twnd-form-field-label-wrapper">
        <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
             read if it comes before the control in the DOM. -->
        <label
          class="twnd-form-field-label"
          (cdkObserveContent)="0"
          [cdkObserveContentDisabled]="appearance != 'outline'"
          [id]="_labelId"
          [attr.for]="_control.id"
          [attr.aria-owns]="_control.id"
          [class.twnd-empty]="_control.empty && !_shouldAlwaysFloat()"
          [class.twnd-form-field-empty]="_control.empty && !_shouldAlwaysFloat()"
          [class.twnd-accent]="color == 'accent'"
          [class.twnd-warn]="color == 'warn'"
          #label
          *ngIf="_hasFloatingLabel()"
          [ngSwitch]="_hasLabel()">
          <!-- @breaking-change 8.0.0 remove in favor of twnd-label element an placeholder attr. -->
          <ng-container *ngSwitchCase="false">
            <ng-content select="twnd-placeholder"></ng-content>
            <span>{{_control.placeholder}}</span>
          </ng-container>

          <ng-content select="twnd-label" *ngSwitchCase="true"></ng-content>

          <!-- @breaking-change 8.0.0 remove `twnd-placeholder-required` class -->
          <span
            class="twnd-placeholder-required twnd-form-field-required-marker"
            aria-hidden="true"
            *ngIf="!hideRequiredMarker && _control.required && !_control.disabled"
            >&#32;*</span
          >
        </label>
      </span>
    </div>

    <div class="twnd-form-field-suffix" *ngIf="_suffixChildren.length">
      <ng-content select="[twndSuffix]"></ng-content>
    </div>
  </div>

  <!-- Underline used for legacy, standard, and box appearances. -->
  <div class="twnd-form-field-underline" *ngIf="appearance != 'outline'">
    <span
      class="twnd-form-field-ripple"
      [class.twnd-accent]="color == 'accent'"
      [class.twnd-warn]="color == 'warn'"></span>
  </div>

  <div
    class="twnd-form-field-subscript-wrapper"
    [ngSwitch]="_getDisplayedMessages()">
    <div
      *ngSwitchCase="'error'"
      [@transitionMessages]="_subscriptanimationState">
      <ng-content select="twnd-error"></ng-content>
    </div>

    <div
      class="twnd-form-field-hint-wrapper"
      *ngSwitchCase="'hint'"
      [@transitionMessages]="_subscriptanimationState">
      <!-- TODO(mmalerba): use an actual <twnd-hint> once all selectors are switched to twnd-* -->
      <div *ngIf="hintLabel" [id]="_hintLabelId" class="twnd-hint">
        {{hintLabel}}
      </div>
      <ng-content select="twnd-hint:not([align='end'])"></ng-content>
      <div class="twnd-form-field-hint-spacer"></div>
      <ng-content select="twnd-hint[align='end']"></ng-content>
    </div>
  </div>
</div>