import { CSSObject } from 'styled-components';
import { AvatarSize, AvatarShape } from '../Avatar/types';
import { BreakpointType } from '../../breakpoints/breakPoints';
/**
 * AvatarGroup Tokens following the design system pattern
 *
 * Structure:
 * - gap: Spacing between avatars in the group
 * - container: Group container properties
 * - avatar: Individual avatar styling within the group
 * - overflowCounter: Overflow counter styling
 */
export type AvatarGroupTokensType = {
    gap: CSSObject['gap'];
    container: {
        marginLeft: {
            [key in AvatarSize]: CSSObject['margin'];
        };
    };
    avatar: {
        selected: {
            ringColor: CSSObject['borderColor'];
            ringWidth: CSSObject['borderWidth'];
            ringOffset: CSSObject['outlineOffset'];
            outlineColor: CSSObject['outlineColor'];
        };
        border: {
            width: CSSObject['borderWidth'];
            color: CSSObject['borderColor'];
        };
    };
    overflowCounter: {
        background: {
            default: CSSObject['backgroundColor'];
            hover: CSSObject['backgroundColor'];
            active: CSSObject['backgroundColor'];
        };
        text: {
            color: CSSObject['color'];
        };
        border: {
            width: CSSObject['borderWidth'];
            color: CSSObject['borderColor'];
        };
        size: {
            [key in AvatarSize]: {
                width: CSSObject['width'];
                height: CSSObject['height'];
                fontSize: CSSObject['fontSize'];
            };
        };
        borderRadius: {
            [key in AvatarShape]: CSSObject['borderRadius'];
        };
    };
    menu: {
        marginTop: CSSObject['margin'];
    };
};
export type ResponsiveAvatarGroupTokens = {
    [key in keyof BreakpointType]: AvatarGroupTokensType;
};