.ads-Avatar {
  @apply rounded-full
    overflow-hidden;

  height: 1em;
  width: 1em;
}

.ads-Avatar--square {
  @apply rounded;
}

.ads-Avatar--bordered.ads-Avatar--small,
.ads-Avatar--bordered.ads-Avatar--medium {
  box-shadow: 0 0 0 1px #fff, theme("boxShadow.DEFAULT");
}

.ads-Avatar--bordered.ads-Avatar--large,
.ads-Avatar--bordered.ads-Avatar--xlarge {
  box-shadow: 0 0 0 2px #fff, theme("boxShadow.md");
}

.ads-Avatar--small {
  font-size: 16px;
}

.ads-Avatar--medium {
  font-size: 24px;
}

.ads-Avatar--large {
  font-size: 32px;
}

.ads-Avatar--xlarge {
  font-size: 48px;
}

.ads-Avatar-icon--anonymous {
  @apply text-gray-900;
}

.ads-Avatar-icon--system {
  @apply flex
    items-center
    justify-center
    bg-gray-900
    text-gold-400;
}

/* Double class selector to increase specificity and
override built-in Image component classes */
.ads-Avatar-img.ads-Avatar-img {
  @apply w-full
    h-full
    object-cover;
}

.ads-Avatar-initials-wrapper {
  @apply bg-black
    w-full
    h-full
    items-center;
}

.ads-Avatar-initials {
  @apply text-white
    w-full
    text-center
    uppercase;

  font-size: 0.45em;
}

.ads-AvatarGroup {
  @apply flex-row-reverse
    justify-end
    items-center;
}

.ads-AvatarGroup--overlap > *:not(:first-child) {
  margin-right: -0.25em;
}