/**
 * @file plugins/themes/lumina/styles/components/avatar.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @class .lm-avatar
 *
 * @brief Reusable component avatar primitive for user profiles, editorial boards, and author details.
 */

.lm-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lm-radius-full);
    overflow: hidden;
    background-color: var(--lm-surface-muted);
    border: 2px solid var(--lm-border);
    box-shadow: var(--lm-shadow-sm);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color var(--lm-motion-fast), box-shadow var(--lm-motion-fast);
}

/* Sizing Modifiers */
.lm-avatar--sm {
    width: var(--space-xl);
    height: var(--space-xl);
    font-size: var(--lm-font-size-sm);
}

.lm-avatar--md {
    width: var(--space-2xl);
    height: var(--space-2xl);
    font-size: var(--lm-font-size-lg);
}

.lm-avatar--lg {
    width: var(--space-3xl);
    height: var(--space-3xl);
    font-size: var(--lm-font-size-2xl);
}

/* Internal Elements */
.lm-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lm-avatar__placeholder {
    width: 60%;
    height: 60%;
    fill: var(--lm-text-secondary);
    display: block;
}

.lm-avatar__initial {
    font-weight: var(--lm-weight-semibold);
    color: var(--lm-text-secondary);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
}

/* Hover/Focus States */
.lm-avatar:hover {
    border-color: var(--lm-border-hover);
    box-shadow: var(--lm-shadow-md);
}