.avatar {
  @apply ring-primary-100 grid size-[--avatar-size] place-content-center items-center rounded-full bg-[var(--avatar-bg-color)] text-center font-medium uppercase text-white [--avatar-bg-color:oklch(var(--btu-theme-purple-600))] hover:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_0.8)_c_h)] @avatar-xs/avatar:text-xs @avatar-xs:font-bold @avatar-sm/avatar:text-sm @avatar-md/avatar:text-md @avatar-lg/avatar:text-md @avatar-xl/avatar:text-lg @avatar-xxl/avatar:text-xl;

  img {
    @apply aspect-square size-full rounded-full object-cover;
  }

  /* Stack all the children. If an avatar isn't provided the user's initials will show through. */
  > *,
  &::before {
    grid-area: 1 / 1;
  }
}

.ToolUserAvatar-container {
  /*
    Avatar size:
    Defined in the tailwind.config.
    To change the size in some other context you can do it like:
    --avatar-size: theme('avatar.size.xs')
  */
  @apply relative size-[--avatar-size] flex-nowrap @container/avatar [--avatar-size:theme('avatar.size.sm')] md:[--avatar-size:theme('avatar.size.md')];
}

.ToolUserAvatar-name {
  @apply hidden truncate;
}

.ToolUserAvatar {
  @apply avatar shrink-0;
}
