.avatar {
    display: inline-flex;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    position: relative;

    
    .avatar-content {
        width: 32px;
        height: 32px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .875rem;
        svg, i {
            color: #fff;
            font-size: 1rem;
            height: 1rem;
        }
        i:before {
            vertical-align: top;
        }
    }

    img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    .avatar-status {
        width: .7rem;
        height: .7rem;
        position: absolute;
        border-radius: 50%;
        border: 1px solid #fff;
        bottom: 0;
        right: 0;
    }

    &.avatar-sm {
        .avatar-content, img {
            width: 24px;
            height: 24px;
            font-size: .8rem;
        }
    }
    &.avatar-md {
        .avatar-content, img {
            width: 32px;
            height: 32px;
            font-size: .8rem;
        }
    }
    &.avatar-md2 {
        .avatar-content, img {
            width: 40px;
            height: 40px;
            font-size: .8rem;
        }
    }
    &.avatar-lg {
        .avatar-content, img {
            width: 48px;
            height: 48px;
            font-size: 1.2rem;
        }
    }
    &.avatar-xl {
        .avatar-content, img {
            width: 60px;
            height: 60px;
            font-size: 1.4rem;
        }
    }
    &.avatar-2xl {
        .avatar-content, img {
            width: 120px;
            height: 120px;
            font-size: 1.6rem;
        }
    }
    &.avatar-3xl {
        .avatar-content, img {
            width: 180px;
            height: 180px;
            font-size: 1.8rem;
        }
    }
}

html[data-bs-theme="dark"] {
    .avatar {
        background-color: #232323;
        color: #e0e0e0;

        .avatar-content {
            color: #e0e0e0;
            background-color: #232323;
            svg, i {
                color: #e0e0e0;
            }
        }

        img {
            background-color: #232323;
        }

        .avatar-status {
            border-color: #232323;
            background-color: #444;
        }
    }
}