:host {
  display: inline-block;
}

.gux-change-photo {
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 0px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
}
.gux-change-photo .gux-change-photo-icon {
  display: none;
}
.gux-change-photo:hover, .gux-change-photo:focus-visible {
  cursor: pointer;
}
.gux-change-photo:hover .gux-change-photo-icon, .gux-change-photo:focus-visible .gux-change-photo-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: var(--gse-semantic-zIndex-showFocus);
  display: inline-block;
  color: var(--gse-ui-avatar-hoverModal-foregroundColor);
  transform: translate(-50%, -50%);
}
.gux-change-photo:hover::after, .gux-change-photo:focus-visible::after {
  position: absolute;
  inset-block-start: var(--gse-ui-avatar-large-presenceRing-width);
  inset-inline-start: var(--gse-ui-avatar-large-presenceRing-width);
  inline-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
  block-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
  content: "";
  background-color: var(--gse-ui-avatar-hoverModal-shroudColor);
  border: var(--gse-ui-avatar-content-large-border-width) var(--gse-ui-avatar-content-default-border-style) var(--gse-ui-avatar-content-default-border-color);
  border-radius: 50%;
  opacity: var(--gse-ui-avatar-hoverModal-opacity);
  transition: background-color 0.5s ease;
}
.gux-change-photo:focus-visible {
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
}