{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAAA,gBAAgB;;AAEhB;sCACsC;;AAEtC;EACE,kBAAkB;EAClB,eAAe;EACf,YAAY;AAad;;AAXE;IACE,kBAAkB;EACpB;;AAEA;IACE,eAAe;EACjB;;AAEA;IACE,eAAe;EACjB;;AAGF;EACE,aAAa;EACb,uCAAuC;EACvC,oBAAoB;AAkDtB;;AAhDE;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,WAAW;IACX,YAAY;IACZ,uBAAuB;IACvB,mBAAmB;IACnB,6CAA6C;IAC7C,mFAAmF;IACnF,oDAAoD;IACpD,gBAAgB;IAChB,mCAAmC;EAoBrC;;AAlBE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,eAAe;IACjB;;AAEA;MACE,oDAAoD;IACtD;;AAEA,2BAA2B;;AAC3B;MACE,aAAa;MACb,UAAU;IACZ;;AAIA;MACE,iBAAiB;IACnB;;AAEA;MACE,aAAa;MACb,UAAU;IACZ;;AAEA;MACE,wBAAwB;IAC1B;;AAIJ;EACE,UAAU;EACV,eAAe;EACf,sCAAsC;AAqBxC;;AAnBE;;IAEE,kBAAkB;IAClB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,kBAAkB;IAClB,8EAA8E;EAChF;;AAEA;IACE,WAAW;IACX,+CAA+C;EACjD;;AAEA;IACE,WAAW;IACX,0CAA0C;EAC5C;;AAGF,4BAA4B;;AAG1B;IACE,QAAQ;IACR,2BAA2B;EAU7B;;AARE;MACE,eAAe;MACf,gBAAgB;IAClB;;AAEA;MACE,cAAc;IAChB;;AAGF;IACE,0CAA0C;EAU5C;;AARE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,sCAAsC;IACxC;;AAGF;IACE,eAAe;IACf,kBAAkB;IAClB,eAAe;IACf,kFAAkF;EACpF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--color-canvas-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--color-canvas-default);\n    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n    border-radius: var(--yattho-borderRadius-small, 4px);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--yattho-borderRadius-small, 4px);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--color-canvas-subtle);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--color-avatar-stack-fade-more);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--color-avatar-stack-fade);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--color-avatar-stack-fade);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--color-canvas-subtle);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n}"]}