.avatar-element__holder {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-element__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  user-select: none;
  object-fit: cover;
}

.avatar-element__edit {
  position: absolute;
  bottom: 10px;
  left: 0;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  cursor: pointer;
  z-index: 2;
}

.avatar-element__edit-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--fw-white-000);
  color: var(--fw-black-300);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.avatar-element__edit-icon:hover {
  color: #000000;
  background-color: var(--fw-white-200);
  cursor: pointer;
}

.avatar-element__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-weight: bold;
}

.UI-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--fw-white-200);
  color: var(--fw-black-300);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.UI-edit:hover {
  color: #000000;
  background-color: var(--fw-white-000);
}

/* Shine wrapper base styles */
.shine-effect,
.avatar-element__holder > div:first-child {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Avatar group container */
.avatar-group-container {
  display: flex;
  align-items: center;
}

/* Link wrapper in avatar groups */
.avatar-group-container a {
  text-decoration: none;
  cursor: pointer;
}

/* Online indicator base styles */
.online-indicator {
  position: absolute;
  bottom: 0px;
  background-color: #2adc50;
  border-radius: 50%;
}