/* The icon has its own legacy color. Keep its configuration state independent
   of the teal selection underline, hover and keyboard focus. */
.staff-contact-modal .staff-contact-picker.is-configured .staff-contact-method-icon {
  color: #111 !important;
}
.staff-contact-modal .staff-contact-picker.is-pending .staff-contact-method-icon {
  color: rgba(17, 17, 17, .28) !important;
}
.staff-contact-modal .staff-contact-picker .staff-contact-method-icon svg {
  color: inherit !important;
}
.staff-contact-whatsapp-card .staff-contact-group-image,
.staff-contact-whatsapp-card .staff-contact-group-image img {
  background: #fff !important;
  filter: none !important;
}

@layer console-night {
  html[data-console-theme="dark"] .staff-contact-modal .staff-contact-picker.is-configured .staff-contact-method-icon {
    color: var(--night-heading, #e6e6e6) !important;
  }
  html[data-console-theme="dark"] .staff-contact-modal .staff-contact-picker.is-pending .staff-contact-method-icon {
    color: #676767 !important;
  }
  html[data-console-theme="dark"] .staff-contact-modal .staff-contact-picker .staff-contact-method-icon svg {
    color: inherit !important;
  }
}