/* Stable avatar geometry for every navigation surface. */
.nav-avatar-wrapper {
    --navigation-avatar-size: 30px;
    aspect-ratio: 1 / 1 !important;
    block-size: var(--navigation-avatar-size) !important;
    inline-size: var(--navigation-avatar-size) !important;
    min-block-size: var(--navigation-avatar-size) !important;
    min-inline-size: var(--navigation-avatar-size) !important;
    max-block-size: var(--navigation-avatar-size) !important;
    max-inline-size: var(--navigation-avatar-size) !important;
    flex: 0 0 var(--navigation-avatar-size) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.sidebar-menu .nav-avatar-wrapper {
    --navigation-avatar-size: 32px;
}

.mobile-profile-btn .nav-avatar-wrapper {
    --navigation-avatar-size: 34px;
}

.nav-avatar-wrapper > span,
.nav-avatar-wrapper img,
.nav-avatar-wrapper .avatar-img,
.nav-avatar-wrapper .avatar-fallback {
    aspect-ratio: 1 / 1 !important;
    block-size: 100% !important;
    inline-size: 100% !important;
    min-block-size: 100% !important;
    min-inline-size: 100% !important;
    max-block-size: 100% !important;
    max-inline-size: 100% !important;
    border-radius: inherit !important;
}

.nav-avatar-wrapper > span,
.nav-avatar-wrapper .avatar-fallback {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.nav-avatar-wrapper img,
.nav-avatar-wrapper .avatar-img {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}