/**
 * Avatar Generator Styles
 */

/* Generated avatars */
.generated-avatar {
    border-radius: 50%;
    object-fit: cover;
}

/* Ensure proper display */
.avatar.generated-avatar {
    display: inline-block;
    vertical-align: middle;
}

/* Animation for newly generated avatars */
.generated-avatar.fade-in {
    animation: avatarFadeIn 0.3s ease-out;
}

@keyframes avatarFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hover effect */
.generated-avatar:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Size variants */
.generated-avatar-xs {
    width: 24px;
    height: 24px;
}

.generated-avatar-sm {
    width: 32px;
    height: 32px;
}

.generated-avatar-md {
    width: 48px;
    height: 48px;
}

.generated-avatar-lg {
    width: 100px;
    height: 100px;
}

.generated-avatar-xl {
    width: 150px;
    height: 150px;
}