@primer/react/lib-esm/AvatarStack/AvatarStack-6c237051.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css"],"names":[],"mappings":"AAEA,mCACE,yBAA0B,CAC1B,wDAA2D,CAC3D,0DAA6D,CAG7D,YAAa,CAEb,+BAAgC,CADhC,kCAAmC,CAFnC,iBAwGF,CAlGI,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,oGAEE,gGACF,CAGF,kEAME,2HAGF,CAEA,kEAME,sJAOF,CAEA,mEAME,0JAOF,CAEA,6DACE,wBAmCF,CAjCE,+FACE,uBAeF,CAbE,gHACE,cACF,CAEA,mHAEE,qCACF,CAEA,mHAEE,uCACF,CAGF,oGACE,0BAaF,CATI,kUAEE,uBAAyB,CADzB,gDAMF,CAHE,mVACE,wBACF,CAOV,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAElB,8BA0CF,CArCE,0CAEE,8FACF,CAEA,8CAEE,aAAc,CADd,UAEF,CAEA,iDAGE,oCAAqC,CAFrC,SAGF,CAEA,iDAGE,sCAAuC,CACvC,WAAa,CAHb,SAIF,CAEA,iDAEE,UAAY,CADZ,SAEF,CAEA,iDAEE,WAAa,CADb,SAEF,CAEA,iDAEE,SAAU,CADV,iBAEF,CAGF,uJAEE,UAgBF,CAdE,8LACE,qCAA+B,CAE/B,SAAU,CACV,+GAI6B,CAN7B,kBAWF,CAHE,+MACE,aACF","file":"AvatarStack-6c237051.css","sourcesContent":["/* stylelint-disable max-nesting-depth */\n/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n  --avatar-border-width: 1px;\n  --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55);\n  --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85);\n\n  position: relative;\n  display: flex;\n  min-width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n\n  &:where([data-responsive]) {\n    @media screen and (--viewportRange-narrow) {\n      --avatar-stack-size: var(--stackSize-narrow);\n    }\n\n    @media screen and (--viewportRange-regular) {\n      --avatar-stack-size: var(--stackSize-regular);\n    }\n\n    @media screen and (--viewportRange-wide) {\n      --avatar-stack-size: var(--stackSize-wide);\n    }\n  }\n\n  &:where([data-avatar-count='1']) {\n    .AvatarItem {\n      /* stylelint-disable-next-line primer/box-shadow */\n      box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n    }\n  }\n\n  &:where([data-avatar-count='2']) {\n    /* this calc explained: */\n\n    /* 1. avatar size + the non-overlapping part of the second avatar */\n\n    /* 2. + the border widths of the first two avatars */\n    min-width: calc(\n      var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width)\n    );\n  }\n\n  &:where([data-avatar-count='3']) {\n    /* this calc explained: */\n\n    /* 1. avatar size + the non-overlapping part of the second avatar */\n\n    /* 2. + the non-overlapping part of the third avatar */\n    min-width: calc(\n      var(--avatar-stack-size) +\n        calc(\n          calc(var(--avatar-stack-size) + var(--avatar-two-margin)) +\n            calc(var(--avatar-stack-size) + var(--avatar-three-margin))\n        )\n    );\n  }\n\n  &:where([data-avatar-count='3+']) {\n    /* this calc explained: */\n\n    /* 1. avatar size + the non-overlapping part of the second avatar */\n\n    /* 2. + the non-overlapping part of the third and fourth avatar */\n    min-width: calc(\n      var(--avatar-stack-size) +\n        calc(\n          calc(var(--avatar-stack-size) + var(--avatar-two-margin)) +\n            calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2\n        )\n    );\n  }\n\n  &:where([data-align-right]) {\n    justify-content: flex-end;\n\n    .AvatarItem {\n      margin-left: 0 !important;\n\n      &:first-child {\n        margin-right: 0;\n      }\n\n      &:nth-child(n + 2) {\n        /* stylelint-disable-next-line primer/spacing */\n        margin-right: var(--avatar-two-margin);\n      }\n\n      &:nth-child(n + 3) {\n        /* stylelint-disable-next-line primer/spacing */\n        margin-right: var(--avatar-three-margin);\n      }\n    }\n\n    .AvatarStackBody {\n      flex-direction: row-reverse;\n\n      &:not([data-disable-expand]):hover,\n      &:not([data-disable-expand]):focus-within {\n        .AvatarItem {\n          margin-right: var(--base-size-4) !important;\n          margin-left: 0 !important;\n\n          &:first-child {\n            margin-right: 0 !important;\n          }\n        }\n      }\n    }\n  }\n}\n\n.AvatarStackBody {\n  position: absolute;\n  display: flex;\n\n  &:where([data-disable-expand]) {\n    position: relative;\n  }\n}\n\n.AvatarItem {\n  --avatarSize-regular: var(--avatar-stack-size);\n\n  position: relative;\n  display: flex;\n  width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n  overflow: hidden;\n  flex-shrink: 0;\n\n  &:is(img) {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default);\n  }\n\n  &:first-child {\n    z-index: 10;\n    margin-left: 0;\n  }\n\n  &:nth-child(n + 2) {\n    z-index: 9;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--avatar-two-margin);\n  }\n\n  &:nth-child(n + 3) {\n    z-index: 8;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--avatar-three-margin);\n    opacity: 0.55;\n  }\n\n  &:nth-child(n + 4) {\n    z-index: 7;\n    opacity: 0.4;\n  }\n\n  &:nth-child(n + 5) {\n    z-index: 6;\n    opacity: 0.25;\n  }\n\n  &:nth-child(n + 6) {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n  width: auto;\n\n  .AvatarItem {\n    margin-left: var(--base-size-4);\n    visibility: visible;\n    opacity: 1;\n    transition:\n      margin 0.2s ease-in-out,\n      opacity 0.2s ease-in-out,\n      visibility 0.2s ease-in-out,\n      box-shadow 0.1s ease-in-out;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n}\n"]}