:host {
  display: inline-block;
}

div {
  --color-background-container: var(--pine-color-background-container-hover);
  align-items: center;
  background-color: var(--color-background-container);
  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));
  display: inline-flex;
  justify-content: center;
  position: relative;
}
:host(.pds-avatar--admin) div {
  --border-radius-admin-round: var(--pine-dimension-150);
  border-radius: var(--border-radius-admin-round);
}
:host(.pds-avatar--has-image) div {
  background: transparent;
}
@supports selector(:has) {
  div:has(img) {
    background-color: transparent;
  }
}

.pds-avatar__button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: var(--pine-dimension-none);
  border-radius: var(--pine-border-radius-full);
  cursor: pointer;
  display: flex;
  padding: var(--pine-dimension-none);
}
.pds-avatar__button:focus-visible {
  outline: var(--pine-outline-focus);
}

.pds-avatar__badge {
  background-color: transparent;
  border: var(--pine-dimension-none);
  border-color: transparent;
  border-radius: var(--pine-border-radius-round);
  inset-block-end: var(--pine-dimension-none);
  inset-inline-end: var(--pine-dimension-none);
  position: absolute;
}

img {
  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pds-avatar__initials {
  color: var(--pine-color-brand);
  fill: var(--pine-color-brand);
  font-size: var(--pine-font-size-085);
  font-weight: var(--pine-font-weight-semi-bold);
  height: 100%;
  text-align: center;
  width: 100%;
}
.pds-avatar__initials text {
  text-anchor: middle;
}