.avatar-component {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: var(--bg-tertiary, #f5f5f5);
    flex-shrink: 0;
    border-radius: 4px;
    /* Default radius */

    &.circle {
        border-radius: 50%;
    }

    &.rounded {
        border-radius: 6px;
    }

    /* Image styling */
    img.avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        border-radius: inherit;

        &.loaded {
            opacity: 1;
        }

        &.instant {
            transition: none !important;
            opacity: 1 !important;
        }
    }

    /* Placeholder/Letter styling */
    .avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        color: var(--text-secondary, #666);
        background-color: var(--bg-tertiary, #e0e0e0);
        font-size: 1.2em;
        text-transform: uppercase;
        user-select: none;
        border-radius: inherit;
    }

    .avatar-loading {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary, #999);
        background-color: var(--bg-tertiary, #e0e0e0);
        border-radius: inherit;

        .avatar-loading-icon {
            animation: avatar-spin 0.9s linear infinite;
        }
    }

    /* Loading Skeleton */
    .avatar-skeleton {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
                var(--bg-tertiary, #f0f0f0) 25%,
                var(--bg-secondary, #e0e0e0) 50%,
                var(--bg-tertiary, #f0f0f0) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        z-index: 1;
        border-radius: inherit;
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    @keyframes avatar-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}