@gravity-ui/uikit/build/esm/components/AvatarStack/AvatarStack.css

Gravity UI base styling and components

.g-avatar-stack {
  --_--more-button-size: 32px;
  --_--more-button-border-width: 1px;
  display: inline-flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  margin: 0;
  padding: 0;
}
.g-avatar-stack_overlap-size_s {
  --_--overlap: var(--g-spacing-1);
}
.g-avatar-stack_overlap-size_m {
  --_--overlap: var(--g-spacing-2);
}
.g-avatar-stack_overlap-size_l {
  --_--overlap: var(--g-spacing-3);
}
.g-avatar-stack__item {
  display: flex;
  z-index: 0;
  border-radius: 100%;
}
.g-avatar-stack__item:not(:first-child) {
  margin-inline-end: calc(-1 * var(--_--overlap));
}
.g-avatar-stack__more-button, .g-avatar-stack__more {
  border-radius: 100%;
  width: var(--_--more-button-size);
  height: var(--_--more-button-size);
}
.g-avatar-stack__more-button_size_3xs, .g-avatar-stack__more_size_3xs {
  --_--more-button-size: 16px;
}
.g-avatar-stack__more-button_size_2xs, .g-avatar-stack__more_size_2xs {
  --_--more-button-size: 20px;
}
.g-avatar-stack__more-button_size_xs, .g-avatar-stack__more_size_xs {
  --_--more-button-size: 24px;
}
.g-avatar-stack__more-button_size_s, .g-avatar-stack__more_size_s {
  --_--more-button-size: 28px;
}
.g-avatar-stack__more-button_size_m, .g-avatar-stack__more_size_m {
  --_--more-button-size: 32px;
}
.g-avatar-stack__more-button_size_l, .g-avatar-stack__more_size_l {
  --_--more-button-size: 42px;
}
.g-avatar-stack__more-button_size_xl, .g-avatar-stack__more_size_xl {
  --_--more-button-size: 50px;
}
.g-avatar-stack__more-button {
  padding: 0;
  font-family: var(--g-text-body-font-family);
  font-size: inherit;
  font-weight: var(--g-text-body-font-weight);
  color: inherit;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
.g-avatar-stack__more-button:focus-visible {
  outline: var(--g-color-line-focus) solid 2px;
  outline-offset: 0;
}
.g-avatar-stack__more {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--g-color-base-generic);
}
.g-avatar-stack__more_has-border {
  border-width: var(--_--more-button-border-width);
  border-style: solid;
}
.g-avatar-stack__more_size_2xs {
  font-size: var(--g-text-caption-1-font-size);
}
.g-avatar-stack__more_size_xs {
  font-size: var(--g-text-caption-1-font-size);
}
.g-avatar-stack__more_size_s {
  font-size: var(--g-text-caption-2-font-size);
}
.g-avatar-stack__more_size_m {
  font-size: var(--g-text-body-1-font-size);
}
.g-avatar-stack__more_size_l {
  font-size: var(--g-text-body-1-font-size);
}
.g-avatar-stack__more_size_xl {
  font-size: var(--g-text-body-2-font-size);
}