.menu-item {
    display: flex;
}

.menu-item__icon {
    flex: 0 1 28px;

    width: 28px;
    height: 28px;
    margin: 4px 0;

    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: cover;
}

.menu-item__user .menu-item__icon {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.menu-item:first-child .menu-item__icon {
    margin-top: 8px;
}

.menu-item__user:hover .menu-item__icon {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}

.menu-item__content {
    overflow: hidden;

    max-width: 240px;
    margin: 4px;
    padding-left: 8px;

    line-height: 28px;
    text-overflow: ellipsis;

    color: rgba(0, 0, 0, .5);
}

.menu-item__user .menu-item__content {
    color: #000;
}

.menu-item:first-child .menu-item__content {
    margin-top: 8px;
}

.menu-item:hover .menu-item__content {
    color: #000;
}

.menu-item__user .menu-item__content::first-letter {
    color: #ff004c;
}

.menu-item__user:hover .menu-item__content {
    color: #d00;
}
