:host-context(.pref-contrast-more) .avatar--icon,
:host-context(.pref-contrast-more) .avatar--fallback,
:host-context(.pref-contrast-more) .avatar--initials {
  box-shadow: theme('boxShadow.outline-50') inset;
}

@media (prefers-contrast: more) {
  :host-context(.pref-contrast-system) .avatar--icon,
  :host-context(.pref-contrast-system) .avatar--fallback,
  :host-context(.pref-contrast-system) .avatar--initials {
    box-shadow: theme('boxShadow.outline-50'), theme('boxShadow.lg');
  }
}