.ui-form-field {
  @apply relative block;

  .ui-input {
    @apply bg-transparent pt-5 pr-2 pb-1
      text-black text-lg font-bold
      outline-none border-t-0 border-l-0 border-r-0 border-b-2 border-solid border-control-border w-full;
  }

  ui-select {
    @apply pb-2 border-t-0 border-l-0 border-r-0 border-b-2 border-solid border-control-border;
  }

  .ui-input.ng-invalid:not(.ng-untouched) {
    @apply border-brand;
  }

  .ui-input:focus + ui-label,
  .ui-input:not(:placeholder-shown) + ui-label {
    @apply top-0 left-0  text-p3;
  }

  .ui-input::placeholder {
    @apply invisible;
  }

  .ui-input:required + ui-label::after {
    display: inline;
    content: "*";
  }

  .ui-input + ui-label {
    @apply absolute top-5 left-0 text-lg transition-all duration-200 ease-in-out text-inactive-customer cursor-text pointer-events-none;
  }
}
