.TextInput {
  @apply flex w-full resize-none items-center rounded-lg border border-solid border-gray-300 bg-white px-4 py-2 text-sm leading-4 text-gray-900 outline-none focus:ring-primary-100 placeholder:text-gray-500 hover:bg-gray-100 focus:border-solid focus:border-primary-600 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-400 disabled:placeholder:text-gray-400 more-contrast:placeholder:text-gray-500;
}

textarea,
input:where(
    [type='email'],
    [type='number'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='text'],
    [type='url']
  ) {
  @apply TextInput;
}

btu-input {
  @apply relative;
}

btu-input[type='password'] {
  @apply inline-flex w-full items-center gap-4;

  .ShowPassword-toggle {
    @apply btu-button btu-button-text-hidden before:btu-icon before:btu-icon-eye;

    &.off {
      @apply before:btu-icon-eye-off;
    }
  }

  input[type='password']::-ms-reveal {
    @apply hidden;
  }
}

#frameBody {
  @apply pointer-events-none hidden;
}
