:host {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  flex-direction: column;
}

  :host * {
    box-sizing: border-box;
  }

.avatar {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: var(--swirl-avatar-border-width, 0) solid
    var(--swirl-avatar-border-color, transparent);
}

.avatar--has-icon {
  color: var(--s-icon-default);
  background-color: var(--swirl-avatar-background-color);
}

.avatar--has-initials {
  padding-right: 0;
  padding-left: 0;
  color: #fff;
}

.avatar--interactive {
  cursor: pointer;
}

.avatar--interactive:focus:not(:focus-visible) {
    outline: none;
  }

.avatar--interactive:focus-visible {
    outline-color: var(--s-focus-default);
  }

.avatar--size-3xs {
  width: 1.25rem;
  height: 1.25rem;
}

.avatar--size-3xs .avatar__initials {
    font-size: 0.625rem;
  }

.avatar--size-3xs.avatar--has-icon {
    padding-right: 0.125rem;
    padding-left: 0.125rem;
  }

.avatar--size-3xs.avatar--variant-square,
  .avatar--size-3xs.avatar--variant-square .avatar__image,
  .avatar--size-3xs.avatar--variant-square .avatar__initials {
    border-radius: 0.25rem;
  }

.avatar--size-2xs {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar--size-2xs .avatar__initials {
    font-size: 0.625rem;
  }

.avatar--size-2xs.avatar--has-icon {
    padding-right: 0.125rem;
    padding-left: 0.125rem;
  }

.avatar--size-2xs.avatar--variant-square,
  .avatar--size-2xs.avatar--variant-square .avatar__image,
  .avatar--size-2xs.avatar--variant-square .avatar__initials {
    border-radius: 0.25rem;
  }

.avatar--size-xs {
  width: 1.75rem;
  height: 1.75rem;
}

.avatar--size-xs .avatar__initials {
    font-size: 0.75rem;
  }

.avatar--size-xs.avatar--has-icon {
    padding-right: 0.4375rem;
    padding-left: 0.4375rem;
  }

.avatar--size-xs.avatar--variant-square,
  .avatar--size-xs.avatar--variant-square .avatar__image,
  .avatar--size-xs.avatar--variant-square .avatar__initials {
    border-radius: 0.5rem;
  }

.avatar--size-s {
  width: 2rem;
  height: 2rem;
}

.avatar--size-s .avatar__initials {
    font-size: 0.75rem;
  }

.avatar--size-s.avatar--has-icon {
    padding-right: var(--s-space-8);
    padding-left: var(--s-space-8);
  }

.avatar--size-s.avatar--variant-square,
  .avatar--size-s.avatar--variant-square .avatar__image,
  .avatar--size-s.avatar--variant-square .avatar__initials {
    border-radius: 0.5rem;
  }

.avatar--size-m {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar--size-m .avatar__initials {
    font-size: var(--s-font-size-base);
  }

.avatar--size-m.avatar--has-icon {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }

.avatar--size-m.avatar--variant-square,
  .avatar--size-m.avatar--variant-square .avatar__image,
  .avatar--size-m.avatar--variant-square .avatar__initials {
    border-radius: 0.625rem;
  }

.avatar--size-l {
  width: 3rem;
  height: 3rem;
}

.avatar--size-l .avatar__initials {
    font-size: var(--s-font-size-lg);
  }

.avatar--size-l.avatar--has-icon {
    padding-right: var(--s-space-12);
    padding-left: var(--s-space-12);
  }

.avatar--size-l.avatar--variant-square,
  .avatar--size-l.avatar--variant-square .avatar__image,
  .avatar--size-l.avatar--variant-square .avatar__initials {
    border-radius: 0.75rem;
  }

.avatar--size-xl {
  width: 4rem;
  height: 4rem;
}

.avatar--size-xl .avatar__initials {
    font-size: var(--s-font-size-xl);
  }

.avatar--size-xl.avatar--has-icon {
    padding-right: var(--s-space-16);
    padding-left: var(--s-space-16);
  }

.avatar--size-xl.avatar--variant-square,
  .avatar--size-xl.avatar--variant-square .avatar__image,
  .avatar--size-xl.avatar--variant-square .avatar__initials {
    border-radius: 1rem;
  }

.avatar--size-2xl {
  width: 9rem;
  height: 9rem;
}

.avatar--size-2xl .avatar__initials {
    font-size: 3.375rem;
  }

.avatar--size-2xl.avatar--has-icon {
    padding-right: var(--s-space-32);
    padding-left: var(--s-space-32);
  }

.avatar--size-2xl.avatar--variant-square,
  .avatar--size-2xl.avatar--variant-square .avatar__image,
  .avatar--size-2xl.avatar--variant-square .avatar__initials {
    border-radius: 1.25rem;
  }

.avatar--size-2xl .avatar__tool {
    transform: translate3d(-25%, -25%, 0px);
  }

.avatar--size-2xl .avatar__tool--position-top {
    transform: translate3d(-25%, 25%, 0px);
  }

.avatar--color-banana .avatar__initials {
    color: var(--s-decorative-banana-text);
    background-color: var(--s-decorative-banana-surface-subdued);
  }

.avatar--color-blueberry .avatar__initials {
    color: var(--s-decorative-blueberry-text);
    background-color: var(--s-decorative-blueberry-surface-subdued);
  }

.avatar--color-chilli .avatar__initials {
    color: var(--s-decorative-chilli-text);
    background-color: var(--s-decorative-chilli-surface-subdued);
  }

.avatar--color-grape .avatar__initials {
    color: var(--s-decorative-grape-text);
    background-color: var(--s-decorative-grape-surface-subdued);
  }

.avatar--color-kiwi .avatar__initials {
    color: var(--s-decorative-kiwi-text);
    background-color: var(--s-decorative-kiwi-surface-subdued);
  }

.avatar--color-pumpkin .avatar__initials {
    color: var(--s-decorative-pumpkin-text);
    background-color: var(--s-decorative-pumpkin-surface-subdued);
  }

.avatar--color-radish .avatar__initials {
    color: var(--s-decorative-radish-text);
    background-color: var(--s-decorative-radish-surface-subdued);
  }

.avatar--color-neutral .avatar__initials {
    color: var(--s-text-subdued);
    background-color: var(--s-surface-neutral-subdued);
  }

.avatar__image {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar__image > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

.avatar__icon {
  display: inline-flex;
}

.avatar__icon > * {
    width: 100%;
    height: 100%;
  }

.avatar__icon > *::part(icon) {
    width: 100%;
    height: 100%;
  }

.avatar__initials {
  position: absolute;
  display: inline-flex;
  min-width: 0;
  padding-right: 0.0625rem;
  padding-left: 0.0625rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: var(--s-font-weight-medium);
  inset: 0;
}

.avatar__initials > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.avatar__badge {
  position: absolute;
  bottom: 0;
  left: 55%;
  display: inline-flex;
  min-width: 1.5rem;
  height: 1.5rem;
  transform: translate3d(0, 25%, 0);
}

.avatar__badge--position-top {
  top: 0;
  bottom: auto;
  transform: translate3d(0, -25%, 0);
}

.avatar__label {
  margin-top: var(--s-space-4);
  color: var(--s-icon-default);
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-sm);
  text-align: center;
}

.avatar__tool {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  transform: translate3d(25%, 25%, 0);
}

.avatar__tool--position-top {
  top: 0;
  bottom: auto;
  transform: translate3d(25%, -25%, 0);
}