input.input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-error) 18%, transparent);
  outline: none;
}

.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error);
  line-height: 1.4;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

input.input-error {
  animation: shake 0.35s ease;
}