/* Family-member avatar: initial on a colour picked by Person::avatarColor() (data-c 0-5). */

.rh-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  background: var(--rh-avatar-0);
}

.rh-avatar[data-c="1"] { background: var(--rh-avatar-1); }
.rh-avatar[data-c="2"] { background: var(--rh-avatar-2); }
.rh-avatar[data-c="3"] { background: var(--rh-avatar-3); }
.rh-avatar[data-c="4"] { background: var(--rh-avatar-4); }
.rh-avatar[data-c="5"] { background: var(--rh-avatar-5); }

.rh-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.rh-avatar--xl {
  width: 60px;
  height: 60px;
  font-size: 24px;
}