.sb-avatar:not([role="group"]) {
  align-items: center;
  border: var(--hair-line) solid var(--border-color);
  border-radius: var(--round-border-radius);
  display: inline-flex;
  font-size: 0.875em;
  font-weight: 700;
  height: 2.25em;
  justify-content: center;
  line-height: 2.25em;
  position: relative;
  vertical-align: middle;
  width: 2.25em;
}
.sb-avatar > img:first-child {
  border-radius: var(--round-border-radius);
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
}
.sb-avatar[role="group"] {
  display: inline-block;
  perspective: 1000em;
  transform-style: preserve-3d;
}
.sb-avatar[role="group"][aria-expanded="true"] .sb-avatar + .sb-avatar {
  margin-left: 0.25em;
}
.sb-avatar[role="group"]:not([aria-expanded="true"]) .sb-avatar + .sb-avatar {
  margin-left: -0.5em;
  transform: translateZ(-0.1em);
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar:nth-child(3) {
  transform: translateZ(-0.2em);
}
.sb-avatar[role="group"]:not([aria-expanded="true"]) {
  counter-reset: items;
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar:nth-child(3):not(:last-child),
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar
  + .sb-avatar
  + .sb-avatar {
  counter-increment: items;
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar
  + .sb-avatar:not(:last-child) {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar
  + .sb-avatar
  + .sb-avatar:last-child {
  overflow: hidden;
  text-indent: -10em;
  transform: translateZ(-0.2em);
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar
  + .sb-avatar
  + .sb-avatar:last-child:before {
  background: var(--border-color);
  border: inherit;
  border-radius: var(--round-border-radius);
  content: "+" counter(items);
  font-weight: 400;
  font-size: 0.85em;
  position: absolute;
  text-align: center;
  text-indent: 0;
  width: inherit;
}
.sb-avatar[role="group"]:not([aria-expanded="true"])
  .sb-avatar
  + .sb-avatar:nth-child(101)
  ~ .sb-avatar:last-child:before {
  font-size: 0.6em;
  text-indent: 0.2em;
}
.sb-avatar[role="group"]:not([aria-expanded="true"])[data-plus]
  .sb-avatar
  + .sb-avatar
  + .sb-avatar
  + .sb-avatar:last-child:before {
  content: "\80"
}
.sb-avatar[role="group"]:not([aria-expanded="true"])[data-plus]:after {
  content: attr(data-plus);
  font-weight: 400;
  font-size: 0.7em;
  margin-left: -2.5em;
  margin-top: 0.3em;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-indent: 0;
  width: 2.25em;
}
.sb-avatar[data-random="1"] {
  background: var(--random-color1);
}
.sb-avatar[data-random="2"] {
  background: var(--random-color2);
}
.sb-avatar[data-random="3"] {
  background: var(--random-color3);
}
.sb-avatar[data-random="4"] {
  background: var(--random-color4);
}
.sb-avatar[data-random="5"] {
  background: var(--random-color5);
}
.sb-avatar[data-random="6"] {
  background: var(--random-color6);
}
.sb-avatar[data-random="7"] {
  background: var(--random-color7);
}
.sb-avatar[data-random="8"] {
  background: var(--random-color8);
}
.sb-avatar > .sb-badge {
  background: #d00;
  border-radius: 50%;
  border-color: #fff;
  border: 0.075em solid;
  bottom: 0;
  height: 0.5em;
  right: 0;
  position: absolute;
  width: 0.5em;
}
.sb-avatar[role="group"] .sb-avatar:nth-child(3):not(:last-child) .sb-badge {
  display: none;
}
