.menu {
    --menu-vertical-gap: 4px;
    --menu-item-padding: var(--space-xxs) var(--space-xs);
    list-style: none;
    -webkit-tbank-select: none;
    tbank-select: none;
    position: fixed;
    z-index: var(--z-index-popover, 5);
    width: 350px;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    padding: var(--space-xxs) 0;
    border-radius: var(--radius-md);
    margin-top: var(--menu-vertical-gap);
    margin-bottom: var(--menu-vertical-gap);
    overflow: auto;
    font-size: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.menu--is-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.menu--overlay {
    z-index: var(--z-index-overlay, 15)
}

.menu__content {
    display: flex;
    align-items: center;
    padding: var(--menu-item-padding);
    text-decoration: none;
    color: var(--color-contrast-high);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s
}

.menu__content:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}

.menu__content:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15)
}

.menu__label {
    padding: var(--menu-item-padding);
    font-size: .8125rem;
    color: var(--color-contrast-medium)
}

.menu__separator {
    height: 1px;
    background-color: var(--color-contrast-lower);
    margin: var(--menu-item-padding)
}

.menu__icon {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.5);
    margin-right: var(--space-xxs)
}

.tbank-menu-control {
    --profile-figure-size: 40px;
    cursor: pointer;
    align-items: center;
    text-align: left
}

.tbank-menu-control:hover .tbank-menu-control__img-wrapper {
    opacity: .8
}

.tbank-menu-control:hover .tbank-menu__meta-title {
    color: var(--color-primary)
}

.tbank-menu-control:focus,
.tbank-menu-control.menu-control--active {
    outline: none
}

.tbank-menu-control:focus .tbank-menu-control__img-wrapper::after,
.tbank-menu-control.menu-control--active .tbank-menu-control__img-wrapper::after {
    opacity: 1;
    transform: scale(1)
}

.tbank-menu-control__img-wrapper {
    width: var(--profile-figure-size);
    height: var(--profile-figure-size);
    position: relative;
    transition: opacity .2s
}

.tbank-menu-control__img-wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -4px;
    top: -4px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    width: calc(var(--profile-figure-size) + 8px);
    height: calc(var(--profile-figure-size) + 8px);
    border: 2px solid var(--color-primary);
    pointer-events: none;
    opacity: 0;
    transform: scale(.8);
    transition: all .2s
}

.tbank-menu-control__img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.tbank-menu__meta {
    max-width: 100px
}

.tbank-menu__meta-title {
    transition: color .2s
}