@layer components {
    .ui-avatar {
        border-radius: 1000px;
        height: var(--height-base);
        aspect-ratio: 1;
        object-fit: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size:13px;

        &.placeholder {
            background-color: var(--ui-200);
            color: var(--ui-700);
            user-select: none;
        }
        &.ui-white {
            background-color: var(--bg-color);
            border: 1px solid var(--border-color);
        }

        &.size-xs {
            font-size: 11px;
        }

        &.size-md {
            font-size: 11px;
        }

        &.size-5xl {
            height: 100px;
            font-size: 32px;
            letter-spacing: 1px;
            color: var(--ui-400);
            font-family: var(--font-serif), sans-serif;
        }
    }

    img.ui-avatar {
        &.ui-white {
            border: none;
        }
    }

    .ui-avatar-group {
        display: flex;
        align-items: center;
        padding-left: 10px;
        > * {
            transition: margin 0.3s ease;
            margin-left: -10px;
        }

        .ui-avatar {
            border: 2px solid var(--ui-0);
        }

        &:hover {
            > * {
                margin-left: -2px;
            }
        }
    }

}