@use  '../../assets/styles/effects' as *;

.root {
    :global(.avatars) {
        padding-right: 12px;

        &>* {
            border-radius: 50%;
            border: 1px solid white;
        }

        :global(.-clickable) {
            &:focus-visible {
                @include focus-visible-effect(2px, 50%);
            }

            &:focus-visible, &:hover {
                position: relative;
                z-index: 1;

            }
        }
    }

    :global(.avatarsCount) {
        color: var(--uui-text-primary);
        margin-left: 3px;
        line-height: 1;
        font-family: var(--uui-avatar-stack-font);
        font-weight: var(--uui-avatar-stack-font-weight, normal);
        font-size: 14px;
    }
}
