.leaderboard {
    position: relative;
    width: auto;


    .avatar-body {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .avatar {
        width: 2.5rem !important;
        height: 2.5rem !important;
        //background-color: var(--#{$variable-prefix}body-bg);
        //border: 4px solid var(--#{$variable-prefix}body-bg);
        //box-shadow: 0 0 0 3px var(--theme-color);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;


        .avatar-badge {
            position: absolute;
            right: -3px;
            bottom: -3px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 500;
            font-size: .575rem;
            width: 1.25rem;
            height: 1.25rem;
        }

        &:before {
            position: absolute;
            right: -3px;
            bottom: -3px;
            width: 1.25rem;
            height: 1.25rem;
            content: "";
            background-color: var(--theme-color);
            -webkit-mask-image: escape-svg($badge-bg);
            mask-image: escape-svg($badge-bg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    }


}

@include media-breakpoint-down(md) {
    .leaderboard {
        position: relative;
        width: auto;
        margin: 2rem auto;
        display: flex;
        align-items: center;
        justify-content: center;

        &>.user {
            padding: 0 .5rem;

            .avatar {
                width: 5rem !important;
                height: 5rem !important;

                .avatar-badge {
                    width: 2rem !important;
                    ;
                    height: 2rem !important;
                    ;
                }

                &:before {
                    width: 2rem !important;
                    ;
                    height: 2rem !important;
                    ;
                }
            }
        }
    }
}