.input {
  @apply bg-fill-quaternary text-primary box-border w-full rounded px-[14px];

  /* default size */
  @apply font-14-regular h-10 py-[9.5px];

  &-lg {
    @apply font-16-regular h-12 py-3;
  }

  &-md {
    @apply font-14-regular h-10 py-[9.5px];
  }

  &-sm {
    @apply font-12-regular h-8 py-[7px];
  }

  &:focus,
  &:active,
  &:not(:placeholder-shown) {
    @apply border-fill-primary bg-fill-inverse border;
  }

  &-error {
    @apply border-red-primary border !important;
  }

  &-success {
    @apply border-blue-primary border !important;
  }

  &:disabled,
  &-disabled {
    @apply bg-fill-tertiary text-tertiary pointer-events-none cursor-not-allowed border-none;
  }

  /* input-label */
  &-label {
    @apply font-12-regular text-primary inline-block;
  }

  /* input-hint */
  &-hint {
    @apply font-12-regular text-secondary inline-block;

    &-error {
      @apply text-red-primary;
    }

    &-success {
      @apply text-blue-primary;
    }
  }
}
