@st-namespace 'AvatarGroup-st-css';
@st-import [ --wix-color-1, --wix-color-5, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import Avatar from '../Avatar/Avatar.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-system-disabled-color-rgb, --wst-primary-background-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The Avatar Border color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-avatar-group-avatar-border-color);

/*
 * Button Text Font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.44em'}
 */
@property st-global(--wix-ui-tpa-avatar-group-text-button-font);

/*
 * Button Text Color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-avatar-group-text-button-color);

.root {
    -st-states: size(enum(xLarge, large, medium, small, xSmall, xxSmall));
    display: inline-flex;
    flex-direction: row;
}

.root:size(large) .avatars,
.root:size(xLarge) .avatars {
    padding-left: 14px;
}

.root:size(medium) .avatars {
    padding-left: 12px;
}

.root:size(small) .avatars {
    padding-left: 10px;
}

.root:size(xSmall) .avatars {
    padding-left: 6px;
}

.root:size(xxSmall) .avatars {
    padding-left: 4px;
}

.root:size(large) .avatarContainer,
.root:size(xLarge) .avatarContainer {
    margin-left: -14px;
}

.root:size(medium) .avatarContainer {
    margin-left: -12px;
}

.root:size(small) .avatarContainer {
    margin-left: -10px;
}

.root:size(xSmall) .avatarContainer {
    margin-left: -6px;
}

.root:size(xxSmall) .avatarContainer {
    margin-left: -4px;
}

.avatar {
    -st-extends: Avatar;
}

.root .avatar {
    border: solid 1px;
    border-color: createColor(--wix-ui-tpa-avatar-group-avatar-border-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:size(small) .avatar,
.root:size(medium) .avatar,
.root:size(large) .avatar,
.root:size(xLarge) .avatar {
    border-width: 2px;
}

/* Optional text link */

.textButtonContainer {
    display: flex;
    align-items: center;
}

:size(xLarge) .textButtonContainer::before,
:size(large) .textButtonContainer::before,
:size(medium) .textButtonContainer::before,
:size(small) .textButtonContainer::before {
    content: '\00a0';
    width: 12px;
}

:size(xSmall) .textButtonContainer::before {
    content: '\00a0';
    width: 10px;
}

:size(xxSmall) .textButtonContainer::before {
    content: '\00a0';
    width: 8px;
}

.root:size(large) .textButton,
.root:size(medium) .textButton,
.root:size(small) .textButton {
    -st-mixin:
        setColor(--wix-ui-tpa-text-button-main-text-color, --wix-ui-tpa-avatar-group-text-button-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
        setFont(--wix-ui-tpa-text-button-main-text-font, (--wix-ui-tpa-avatar-group-text-button-font, --wst-paragraph-2-font));
}

.root:size(xSmall) .textButton,
.root:size(xxSmall) .textButton {
    -st-mixin: setColor(--wix-ui-tpa-text-button-main-text-color, --wix-ui-tpa-avatar-group-text-button-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
    createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.44em", "size": "14px" }'),
    setFont(--wix-ui-tpa-text-button-main-text-font, (--wix-ui-tpa-avatar-group-text-button-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.root .textButton:disabled {
    color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

/* st-namespace-reference="../../../../src/components/AvatarGroup/AvatarGroup.st.css" */