/* src/avatar/src/Avatar.css */
.o-ui-avatar {
  display: inline-flex;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: var(--hop-shape-circle);
  overflow: hidden;
}
.o-ui-avatar-xs {
  width: 1rem;
}
.o-ui-avatar-sm {
  width: 1.5rem;
}
.o-ui-avatar-md {
  width: 2rem;
}
.o-ui-avatar-lg {
  width: 3rem;
}
.o-ui-avatar-xl {
  width: 4rem;
}
.o-ui-avatar-2xl {
  width: 6rem;
}
.o-ui-avatar-image {
  width: 100%;
  object-fit: cover;
}
.o-ui-avatar-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--o-ui-black) / 0.75);
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
}
.o-ui-avatar .o-ui-avatar-icon {
  height: 100%;
  width: 100%;
}
.o-ui-avatar-group {
  display: inline-flex;
  align-items: center;
}
.o-ui-avatar-group .o-ui-avatar:not(.o-ui-avatar-group-remainings) {
  border: 1px solid var(--hop-neutral-surface);
}
.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child):not(.o-ui-avatar-group-remainings),
.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child):not(.o-ui-avatar-group-remainings) {
  margin-left: calc(-1 * var(--hop-space-inline-xs));
}
.o-ui-avatar-group .o-ui-avatar-md:not(:first-child):not(.o-ui-avatar-group-remainings),
.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child):not(.o-ui-avatar-group-remainings),
.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child):not(.o-ui-avatar-group-remainings) {
  margin-left: calc(-1 * var(--hop-space-inline-sm));
}
.o-ui-avatar-group-remainings {
  background-color: transparent;
  margin-left: var(--hop-space-inline-sm);
  width: auto;
}
.o-ui-avatar-group-remainings .o-ui-avatar-text {
  color: var(--hop-neutral-text-weak);
  font-weight: var(--hop-body-sm-semibold-font-weight);
}
.o-ui-avatar-group-remainings-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.o-ui-avatar-group-remainings-list-item {
  display: flex;
  align-items: center;
}
.o-ui-avatar-group-remainings-list-item:not(:last-child) {
  margin-bottom: var(--hop-space-stack-sm);
}
.o-ui-avatar-group-remainings-list-item-avatar {
  margin-right: var(--hop-space-stack-sm);
}

/* src/avatar/src/index.css */