@spaced-out/ui-design-system/lib/components/AvatarGroup/AvatarGroup.module.css

Sense UI components library

@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
@value (borderWidthTertiary) from '../../styles/variables/_border.css';
@value ( size34, size42, size60, size100) from '../../styles/variables/_size.css';

.avatarGroupContainer {
  display: flex;
  flex-direction: row;
}

.avatarGroupContainer.extraLargeSize {
  height: size100;
  width: size100;
}

.avatarGroupContainer.largeSize {
  height: size60;
}

.avatarGroupContainer.mediumSize {
  height: size42;
}

.avatarGroupContainer.smallSize {
  height: size34;
}

.avatarInGroup {
  display: flex;
  border: borderWidthTertiary solid colorBackgroundTertiary;
  position: relative;
}

.nameList {
  display: flex;
  flex-direction: column;
}

.plusAvatar {
  display: flex;
  cursor: pointer;
}