{"version":3,"file":"AvatarGroup.module.cjs","names":[],"sources":["../../../src/components/AvatarGroup/AvatarGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: center;\n}\n\n/**\n * Each slot pulls the next avatar over the previous one. The overlap is a\n * fraction of the avatar size so every size keeps the same proportion.\n */\n.slot {\n    display: inline-flex;\n    border-radius: var(--tempest-radius-full);\n    box-shadow: 0 0 0 2px var(--tempest-bg);\n}\n\n.slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.xs .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -8px);\n}\n\n.sm .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.md .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -12px);\n}\n\n.lg .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -16px);\n}\n\n.xl .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -22px);\n}\n\n.overflow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    font-variant-numeric: tabular-nums;\n}\n\n.xs .overflow {\n    width: 24px;\n    height: 24px;\n    font-size: var(--tempest-text-2xs);\n}\n\n.sm .overflow {\n    width: 32px;\n    height: 32px;\n}\n\n.lg .overflow {\n    width: 56px;\n    height: 56px;\n    font-size: var(--tempest-text-sm);\n}\n\n.xl .overflow {\n    width: 80px;\n    height: 80px;\n    font-size: var(--tempest-text-base);\n}\n\n.overflowButton {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.overflowButton:hover {\n    background-color: var(--tempest-border-strong);\n    color: var(--tempest-text);\n}\n\n.overflowButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overflowButton {\n        transition: none;\n    }\n}\n"],"mappings":";"}