.avatar_container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    .avatar__image {
        position: relative;
        padding: 0.2rem;
        background-color: var(--bg-secondary-color);
        border-radius: $radius;
        cursor: pointer;
        img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.25rem;
            object-fit: cover;
            object-position: top;
        }
        .avatar__status {
            content: "";
            position: absolute;
            width: 0.8rem;
            height: 0.8rem;
            background-color: $success;
            border-radius: $radius * 100;
            bottom: 0rem;
            chrome_css_end: 0rem;
        }
        .avatar__crown {
            content: "";
            position: absolute;
            transform: rotate(45deg);
            top: -6px;
            chrome_css_end: -6px;
        }
    }

    .avatar__name {
        color: var(--secondary-color);
        font-size: 0.7rem;
        font-weight: 500;
        text-align: center;
    }
}
