/* ============================================================
   БУМАЖНЫЙ СЛОН
   Sticky navigation
   Desktop only
   ============================================================ */


/* ============================================================
   NAV
   ============================================================ */

body#desktop_device_type #layout > nav {

    position: sticky;

    top: 0;

    z-index: 20000;

    overflow: visible !important;
}


/*
 * Визуальное отделение панели появляется
 * только после ее закрепления.
 */

body#desktop_device_type
#layout > nav.bs-nav-stuck {

    box-shadow:

        inset 0 -1px 0 #22384a,

        0 3px 7px
            rgba(0, 0, 0, 0.28),

        0 1px 0
            rgba(255, 255, 255, 0.10)

        !important;
}


/* Dropdown не должен обрезаться родителями */

body#desktop_device_type #widget_pos_header,

body#desktop_device_type
#widget_pos_header .widget_user_avatar {

    overflow: visible !important;
}



/* ============================================================
   COMPACT PROFILE
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact {

    position: fixed !important;

    top: 0 !important;

    left:
        var(--bs-profile-left)
        !important;

    right:
        auto !important;

    width:
        56px !important;

    height:
        var(--bs-nav-height, 50px)
        !important;

    margin:
        0 !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    overflow:
        visible !important;

    z-index:
        30000 !important;
}


/* Имя скрывается */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info
> .name {

    display:
        none !important;
}


/* Кнопка аватара */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        3px !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 5px !important;

    box-sizing:
        border-box !important;

    background-color:
        #34495e !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    line-height:
        normal !important;

    cursor:
        pointer !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info:hover {

    background-color:
        #2b4054 !important;
}



/* ============================================================
   AVATAR
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info
> .avatar {

    display:
        flex !important;

    align-items:
        center !important;

    float:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info
> .avatar img {

    display:
        block !important;

    width:
        32px !important;

    height:
        32px !important;

    max-width:
        32px !important;

    max-height:
        32px !important;

    object-fit:
        cover !important;
}



/* ============================================================
   ARROW
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> .user_info::after {

    content:
        "▾" !important;

    position:
        static !important;

    display:
        inline-block !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 0 0 2px !important;

    padding:
        0 !important;

    background:
        none !important;

    border:
        0 !important;

    color:
        #fff !important;

    font-size:
        10px !important;

    line-height:
        1 !important;

    transform:
        none !important;
}



/* ============================================================
   DROPDOWN
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu {

    /*
     * Одинаковая ширина
     * в обоих состояниях.
     */

    width:
        198px !important;

    min-width:
        198px !important;

    max-width:
        198px !important;

    box-sizing:
        border-box !important;


    background-color:
        #f7f9fa !important;


    border:
        1px solid #34495e !important;


    border-radius:
        8px !important;


    box-shadow:

        0 12px 30px
            rgba(15, 29, 42, 0.38),

        0 4px 10px
            rgba(15, 29, 42, 0.20)

        !important;


    overflow:
        visible !important;

    z-index:
        30002 !important;
}



/*
 * Позицию меняем только после закрепления.
 * В обычной шапке используется родное
 * позиционирование сайта.
 */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar.bs-nav-compact
> ul.menu {

    position:
        absolute !important;

    top:
        100% !important;

    right:
        0 !important;

    bottom:
        auto !important;

    left:
        auto !important;

    margin:
        0 !important;
}



/* ============================================================
   ROWS
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li {

    position:
        relative !important;

    margin:
        0 !important;

    background-color:
        #f7f9fa !important;


    /*
     * Затемненная колонка иконок.
     */

    box-shadow:

        inset 34px 0 0 #edf2f5

        !important;


    border:
        0 !important;


    border-bottom:

        1px solid
        rgba(52, 73, 94, 0.14)

        !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li:last-child {

    border-bottom:
        0 !important;
}



/* ============================================================
   LINKS / TEXT
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li
> a.item {

    background-color:
        transparent !important;

    color:
        #465158 !important;

    font-weight:
        400 !important;

    border:
        0 !important;

    text-shadow:
        none !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li
> a.item
.wrap {

    display:
        inline-block !important;

    /*
     * Небольшой отступ после
     * колонки иконок.
     */

    padding-left:
        5px !important;

    box-sizing:
        border-box !important;

    background-color:
        transparent !important;

    color:
        inherit !important;

    font-weight:
        400 !important;
}



/* ============================================================
   HOVER
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li
> a.item:hover {

    background-color:

        rgba(214, 228, 237, 0.72)

        !important;

    color:
        #263746 !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li
> a.item:hover
.wrap {

    background-color:
        transparent !important;

    color:
        inherit !important;
}



/* ============================================================
   BORDER RADIUS
   ============================================================ */

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li:first-child,

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li:first-child
> a.item {

    border-radius:
        7px 7px 0 0 !important;
}


body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li:last-child,

body#desktop_device_type
#widget_pos_header
.widget_user_avatar
> ul.menu
> li:last-child
> a.item {

    border-radius:
        0 0 7px 7px !important;
}