.text-input {
  @apply m-0 border border-solid border-neutral-90 rounded w-full outline-none transition-colors duration-200;
  box-sizing: border-box;
}

.text-input:hover:enabled {
  @apply border-transparent shadow-blue-primary-1px;
}

.text-input:focus:enabled {
  @apply border-transparent shadow-blue-primary-2px;
}

.text-input-md {
  @apply p-2 text-base leading-6;
}

.text-input-sm {
  @apply p-2 text-sm leading-4;
}

.text-input-invalid,
.text-input-native:invalid {
  @apply border-transparent shadow-red-primary-2px;
}

.text-input-invalid:hover:enabled,
.text-input-invalid:focus:enabled,
.text-input-native:invalid:hover:enabled,
.text-input-native:invalid:focus:enabled {
  @apply border-transparent shadow-red-primary-2px;
}

.text-input-valid,
.text-input-native:valid {
  @apply border-transparent shadow-green-primary-2px;
}

.text-input-valid:hover:enabled,
.text-input-valid:focus:enabled,
.text-input-native:valid:hover:enabled,
.text-input-native:valid:focus:enabled {
  @apply border-transparent shadow-green-primary-2px;
}
