.v2__site-header__user-panel {
    position: relative;

    display: flex;

    align-items: center;
}

.v2__site-header__user-panel__name {
    line-height: 1;
}

.v2__site-header__user-panel__name .user__name {
    display: inline-block;
    overflow: hidden;

    max-width: 8em;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-weight: bold;
    line-height: 1;
}

.v2__site-header__user-panel__avatar .user__avatar{
    display: inline-block;

    width: 3em;
    height: 3em;
    margin: .5em .1em;

    border: 2px #fff solid;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.v2__site-header__user-panel__login {
    display: inline-block;
}

.v2__site-header__user-panel__logout {
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
}

.v2__site-header__user-panel__login a:focus,
.v2__site-header__user-panel__logint a:hover,
.v2__site-header__user-panel__logout a:focus,
.v2__site-header__user-panel__logout a:hover {
    outline: none;
}

.v2__site-header__user-panel__nav-open {
    cursor: pointer;
}

.v2__site-header__user-panel__nav-open:after {
    display: inline-block;

    width: 1.5em;
    height: 4.4em;

    content: '\25BC';
    text-align: center;

    font-size: 1em;
    line-height: 4.4em;
}

.v2__site-header__user-panel .v2__user__nav__container {
    position: absolute;
    z-index: 100;
    top: 100%;
    right: -1em;

    overflow: hidden;

    width: 14.001em;
    max-height: 0;
    margin: 0;
    padding: 0;

    list-style: none;

    transition: all .6s ease-out;

    background: #35b6de;

    flex-grow: 1;
}

.v2__site-header__user-panel .v2__user__nav__container.active {
    max-height: none;
}

.v2__site-header__user-panel .v2__user__nav__item-link {
    display: flex;

    padding: .5em 1.75em;

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;

    align-items: center;
}

.v2__site-header__user-panel__nav .v2__user__nav__container > *:first-child > .v2__user__nav__item-link {
    padding-top: 1em;
}

.v2__site-header__user-panel__nav .v2__user__nav__container > *:last-child > .v2__user__nav__item-link {
    padding-bottom: 1em;
}

.v2__site-header__user-panel .v2__user__nav__item-link:focus,
.v2__site-header__user-panel .v2__user__nav__item-link:hover {
    background: rgba(0, 0, 0, .05);
}