/* Animation names act as "signals" that JS can listen for */
@keyframes onAutoFillStart {
}
@keyframes onAutoFillEnd {
}

/* Generic inputs */
input:autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}
/* Firefox */
input:-moz-autofill,
textarea:-moz-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}
/* Detect leaving autofill (Chromium/WebKit) */
input:not(:-webkit-autofill) {
  animation-name: onAutoFillEnd;
  animation-duration: 0.001s;
}

/* Angular Material inputs (the real native control inside mat-form-field) */
input.mat-input-element:autofill,
input.mat-input-element:-webkit-autofill,
textarea.mat-input-element:-webkit-autofill,
select.mat-input-element:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}
input.mat-input-element:-moz-autofill,
textarea.mat-input-element:-moz-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}
input.mat-input-element:not(:-webkit-autofill) {
  animation-name: onAutoFillEnd;
  animation-duration: 0.001s;
}