:host {
  display: inline-block;
}

div {
  --color-background-container: var(--pine-color-blue-100);
  --color-background-badge: var(--pine-color-white);
  --color-border-badge: var(--pine-color-white);
  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
  --border-radius-round: var(--pine-border-radius-round);
  --border-radius-none: var(--pine-border-radius-0);
  --spacing-none: var(--pine-spacing-0);
  align-items: center;
  background-color: var(--color-background-container);
  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
  display: inline-flex;
  justify-content: center;
  position: relative;
}
:host(.pds-avatar--admin) div {
  --border-radius-admin-round: var(--pine-spacing-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 {
  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
  --border-radius-round: var(--pine-border-radius-round);
  align-items: center;
  appearance: none;
  background: transparent;
  border: var(--border-radius-none);
  border-radius: var(--border-radius-round);
  cursor: pointer;
  display: flex;
  padding: var(--spacing-none);
}
.pds-avatar__button:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

.pds-avatar__badge {
  background-color: var(--color-background-badge);
  border: var(--border-default);
  border-color: var(--color-border-badge);
  border-radius: var(--border-radius-round);
  bottom: var(--spacing-none);
  position: absolute;
  right: var(--spacing-none);
}

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