@primer/view-components/app/components/primer/beta/avatar_stack.css

ViewComponents for the Primer Design System

.AvatarStack{position:relative;min-width:26px;height:20px}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{display:flex;background:var(--bgColor-default);border-radius:100px}.AvatarStack-body .avatar{position:relative;z-index:2;display:flex;width:20px;height:20px;box-sizing:initial;margin-right:-11px;background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);transition:margin .1s ease-in-out}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}.AvatarStack-body span:nth-child(n+4) .avatar,:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar{margin-right:var(--base-size-4)}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n+4),:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n+4) .avatar{display:flex;opacity:1}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more{display:none!important}.AvatarStack-body[data-disable-expand]{position:relative}.avatar.avatar-more{z-index:1;margin-right:0;background:var(--bgColor-muted)}.avatar.avatar-more:after,.avatar.avatar-more:before{position:absolute;display:block;height:20px;content:"";border-radius:2px;outline:var(--borderWidth-thin) solid var(--bgColor-default)}.avatar.avatar-more:before{width:17px;background:var(--avatarStack-fade-bgColor-muted)}.avatar.avatar-more:after{width:14px;background:var(--avatarStack-fade-bgColor-default)}.AvatarStack--right .AvatarStack-body{right:0;flex-direction:row-reverse}:is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar{margin-right:0;margin-left:var(--base-size-4)}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{width:2px;background:var(--bgColor-muted)}.AvatarStack--right .avatar{margin-right:0;margin-left:-11px}