.zf-avatar {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zf-avatar--small { width: 30px; height: 30px; font-size: 11px; }
.zf-avatar--medium { width: 40px; height: 40px; font-size: 14px; }
.zf-avatar--large { width: 150px; height: 150px; font-size: 48px; border: 4px solid #fff; box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.25); }

.zf-avatar__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.zf-avatar__initials {
    background: linear-gradient(135deg, #07C3D6, #1870D1);
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.zf-avatar__status {
    width: 25%;
    height: 25%;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 5%;
    border: 2px solid #FFFFFF;
}

.zf-avatar__status--online { background: #1AC489; }
.zf-avatar__status--offline { background: #9CA3AF; }
.zf-avatar__status--away { background: #FFC905; }

/* Dark mode */
html[data-theme="dark"] .zf-avatar--large {
    border-color: #161B22;
}

html[data-theme="dark"] .zf-avatar__status {
    border-color: #161B22;
}