.nts-input-root {
  @apply flex relative  border-solid border-b border-transparent hover:border-blue transition-colors duration-200 bg-derive;
}

.nts-input-variant-standard {
  @apply gap-[8px];
}

.nts-input-with-adornment {
  @apply gap-0;
}

.nts-input-root::after {
  @apply content-[""] absolute border-b-[2px] z-10 transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)];
}

.nts-input-root.error {
  @apply border-red hover:border-red;
}

.nts-input-root.nts-input-variant-focused::after {
  @apply border-blue;
}

.nts-input-base {
  @apply px-2 py-3 w-full border-none outline-none bg-transparent rounded-[inherit] text-gray-16 text-[14px] font-bold;
}

.nts-input-variant-standard .nts-input-base {
  @apply px-0 py-1;
}

.nts-input-variant-outlined {
  @apply rounded-[4px] border;
}

.nts-input-adornment {
  @apply flex items-center;
  font-size: 12px;
  flex-shrink: 0;
}

.nts-input-startAdornment-border {
  /* @apply ; */
}

.nts-input-endAdornment-border {
}

.nts-input-square {
  @apply rounded-none;
}

.nts-input-variant-standard {
  /* @apply relative border-b-[2px]; */
}

.nts-input-variant-standard::after {
  @apply left-0 right-0 bottom-[-2px] border-b-[2px] scale-x-0 transition-all;
}

.nts-input-variant-standard.nts-input-variant-focused::after {
  @apply scale-x-100 translate-x-0;
}

.nts-input-variant-standard.nts-input-status-error::after {
  @apply border-red scale-x-100 translate-x-0;
}

.nts-input-variant-outlined.nts-input-variant-focused::after {
}