.container {
  @apply relative w-full bg-white border border-gray-200 shadow-sm rounded-primary md:max-w-[325px] flex px-[12px] focus-within:ring focus-within:ring-primary-50 focus-within:border-primary-200;
}

.input {
  @apply flex-grow border-0 outline-none rounded-none ring-0 text-[16px] !bg-transparent disabled:cursor-not-allowed placeholder:text-xs;
}

.helperText {
  @apply text-sm text-gray-500 line-clamp-[20px];
}

.invalid {
  @apply !border-red-500 focus-visible:!ring-error-100;
}

.label {
  @apply text-sm max-h-[18px] order-first flex items-center text-gray-500 !text-[12px];
}

.title {
  @apply text-sm text-gray-800 font-medium mb-[6px]
}

.disabled {
  @apply !bg-gray-100 cursor-not-allowed;
}

.input_hasLabel {
  @apply h-[20px] max-h-[20px] flex-grow-0 py-0 text-[14px] duration-100 placeholder-shown:h-[0px] placeholder-shown:max-h-[0px] placeholder-shown:flex-grow-0 focus:h-[20px] focus:max-h-[20px] focus:flex-grow-0 placeholder:text-transparent;
}

.icon {
  @apply flex h-full items-center text-gray-500 w-[20px];
}