.editAvatarBadge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 34px;
  color: var(--button-label-primary-default);
  background-color: var(--button-background-primary-default);
  /* We want the border color of the edit avatar badge to always 
  match the panel background color */
  border: 2px solid var(--panel-background-primary-default);
  border-radius: 50%;
  cursor: pointer;
  transition-duration: 200ms;
}

.editAvatarBadge:hover {
  background-color: var(--button-background-primary-hover);
  color: var(--button-label-primary-hover);
}

input[type='file'] {
  display: none;
}