.bs-profile-img, bs-profile-img,
.bs-profile-img:where([data-img-size^="sm"]) {
  --profile-size: 2rem;
  --profile-text: var(--bs-text-sm);
  aspect-ratio: 1/1;
  border-radius: 50%;
  height: var(--profile-size);
  overflow: hidden;
  position: relative;
  width: var(--profile-size);
}

.bs-profile-img :where(img), bs-profile-img :where(img) {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bs-profile-img:where([data-no-img]) img, bs-profile-img:where([data-no-img]) img {
  display: none;
}

.bs-profile-img::before, bs-profile-img::before,
.bs-profile-img::after,
bs-profile-img::after {
  border-radius: 50%;
  border-collapse: collapse;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* Shadow */
.bs-profile-img::before, bs-profile-img::before {
  box-shadow: var(--bs-shadow-profilePhoto);
  content: "";
}

.bs-profile-img:where([data-no-img])::before, bs-profile-img:where([data-no-img])::before {
  display: none;
}

/* Initials */
.bs-profile-img:where([data-no-img])::after, bs-profile-img:where([data-no-img])::after {
  border: 1px solid currentColor;
  color: var(--bs-blue-500);
  content: attr(data-initials);
  font-size: var(--profile-text);
  text-transform: uppercase;
  display: grid;
  place-items: center;
}

/* Profile Sizes */
.bs-profile-img:where([data-img-size^="xs"]), bs-profile-img:where([data-img-size^="xs"]) {
  --profile-size: 1.5rem;
  --profile-text: var(--bs-text-xs);
}

.bs-profile-img:where([data-img-size^="md"]), bs-profile-img:where([data-img-size^="md"]) {
  --profile-size: 3rem;
  --profile-text: var(--bs-text-md);
}

.bs-profile-img:where([data-img-size^="lg"]), bs-profile-img:where([data-img-size^="lg"]) {
  --profile-size: 4rem;
  --profile-text: var(--bs-text-lg);
}

.bs-profile-img:where([data-img-size^="xl"]), bs-profile-img:where([data-img-size^="xl"]) {
  --profile-size: 5.75rem;
  --profile-text: var(--bs-text-xl);
}