[data-avatar-gender="male"] .avatar-role-portrait {
  background-image: url("/assets/avatars/bms-role-portraits-male-v3.webp");
}

[data-avatar-gender="female"] .avatar-role-portrait {
  background-image: url("/assets/avatars/bms-role-portraits-female-v3.webp");
}

.user-role-avatar {
  display: inline-flex;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--bms-border);
  border-radius: 50%;
  background: var(--bms-surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bms-frame-950) 16%, transparent);
  vertical-align: middle;
}

.user-role-avatar .avatar-role-portrait {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: no-preference) {
  .user-role-avatar {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }

  tr:hover .user-role-avatar {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--bms-frame-950) 22%, transparent);
  }
}