@use '../variables.scss' as var;

@mixin SnAvatar {
    .#{var.$classPrefix}Avatar {
        width: 32px;
        height: 32px;
        border-radius: 100%;
        overflow: hidden;
        object-fit: cover;

        &-img,
        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        &-text {
            display: flex;
            justify-content: center;
            align-items: center;

            width: 100%;
            height: 100%;
            background: var(--sn-color-1);
            color: var(--sn-color-1-i);
            text-transform: uppercase;
        }
    }
}