/* ============================================================================
   AVATARS
   Consolidated from theme.css (vendor) plus the single .avatar-sm override in
   theme-override.css (app).
   Values are the resolved cascade result as of the consolidation — no
   intended visual change. Sizes are driven by custom properties set on the
   size class and consumed by shared rules.

   Not in scope, deliberately left where they are:
   - .topbar-avatar / .topbar-avatar-masquerade / @keyframes
     masquerade-dot-pulse in theme-override.css, and their light
     counterparts — those belong to the topbar/layout owner.
   - theme.css's `.sidebar_minimize ... [class^="avatar-"]` rules — sidebar
     owner.

   Cascade note: the app's only .avatar-sm element is the topbar chip
   (`class="avatar-sm topbar-avatar"`), and .topbar-avatar's own 34px
   width/height currently wins because it is declared later in theme-override.
   This file loads after theme-override, so an unscoped .avatar-sm size rule
   here would start beating it. The :not(.topbar-avatar) guard below keeps the
   topbar chip resolving exactly as it does today while leaving the generic
   size available to any future plain .avatar-sm.
   ============================================================================ */

.avatar {
    --avatar-size: 3rem;
    --avatar-border-width: 3px;
    --avatar-radius: 6px;
    --avatar-font-size: 18px;
    position: relative;
    display: inline-block;
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.avatar-sm {
    --avatar-border-width: 3px;
    --avatar-radius: 4px;
    --avatar-font-size: 15px;
}

/* Resolved value: theme.css set 2.5rem, theme-override.css later set
   `width: auto`. Height keeps the vendor 2.5rem. Guarded so the topbar chip's
   own 34px still wins — see the cascade note in the file header. */
.avatar-sm:not(.topbar-avatar) {
    width: auto;
    height: 2.5rem;
}

.avatar-xl {
    --avatar-size: 5rem;
    --avatar-border-width: 4px;
    --avatar-radius: 8px;
    --avatar-font-size: 28px;
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.avatar-title {
    width: 100%;
    height: 100%;
    background-color: var(--color-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* !important retained on both: Bootstrap's .border and .rounded utilities
   declare `border: 1px solid #dee2e6 !important` / `border-radius: .25rem
   !important`, which a plain declaration here cannot beat. */
.avatar .border,
.avatar-sm .border,
.avatar-xl .border {
    border-width: var(--avatar-border-width) !important;
}

.avatar .rounded,
.avatar-sm .rounded,
.avatar-xl .rounded {
    border-radius: var(--avatar-radius) !important;
}

.avatar .avatar-title,
.avatar-sm .avatar-title,
.avatar-xl .avatar-title {
    font-size: var(--avatar-font-size);
}