/* Error Highlight Animations
   ==========================
   These animations are meant to provide visual feedback when a form is
   submitted using Turbo but is redisplayed unchanged because of a persistent error.
   The operation is so fast that User may feel the submit did not work, so we
   highlight the fields each time to respond to the submit action, telling the user
   the form was processed, but still has the same errors.
*/

@-webkit-keyframes container-highlight-fade {
   0% {background: var(--message-error-background-color); }
   100% {background: unset; }
}

@keyframes container-highlight-fade {
   0% {background: var(--message-error-background-color); }
   100% {background: unset; }
}

@-webkit-keyframes error-msg-highlight-fade {
   0% { color: var(--message-error-background-color); }
   100% { color: unset; }
}

@keyframes error-msg-highlight-fade {
   0% { color: var(--message-error-background-color); }
   100% { color: unset; }
}

.highlight-errors {
  -webkit-animation: container-highlight-fade 300ms ease-in 1;
  animation: container-highlight-fade 300ms ease-in 1;

  /* label.with-error,
  .field-error-message {
    -webkit-animation: error-msg-highlight-fade 250ms ease-in 1;
    animation: error-msg-highlight-fade 250ms ease-in 1;
  } */
}
/* END - Error Highlight Animations */