.user-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	margin: -0.4rem;
	padding: 0.4rem;
	line-height: 1;
	&--narrow {
		position: absolute;
		bottom: 0.8rem;
		left: 0.8rem;
		width: 2.4rem;
	}
	&--narrow-wide {
		width: 11.2rem;
	}
	&:hover {
		border-radius: 0.2rem;
		cursor: pointer;
		background: rgba($color: #000000, $alpha: 0.24);
	}
}
.user-info-avatar {
	z-index: 2;
	flex-grow: 0;
}
.user-info-text {
	z-index: 2;
	color: #ffffff;
	margin-left: 0.4rem;
	line-height: 0.8rem;
	width: 100%;
	&__name {
		font-weight: 600;
		font-size: 0.7rem;
	}
	&__status {
		font-weight: 600;
		font-size: 0.6rem;
		opacity: 0.65;
	}
}
.user-info-toggle {
	z-index: 2;
	color: #ffffff;
	flex-grow: 0;
	align-self: center;
}
.user-menu {
	flex: none;
	position: absolute;
	background: darken(#2659ab, 20);
	width: 11.2rem;
	box-sizing: border-box;
	bottom: 0.4rem;
	left: 0.4rem;
	color: #ffffff;
	border-radius: 0.2rem;
	padding: 0.8rem;
	padding-bottom: 3.2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
	&__section {
		padding: 0.2rem 0.4rem;
		font-size: 0.5rem;
		font-weight: 600;
		text-transform: uppercase;
		opacity: 0.46;
	}
	&__item {
		margin: 0.1rem 0;
		padding: 0.2rem 0.4rem;
		line-height: 1.2rem;
		font-size: 0.68rem;
		border-radius: 0.2rem;
		color: inherit;
		display: block;
		&:hover {
			color: inherit;
			cursor: pointer;
			background: rgba(255, 255, 255, 0.14);
		}
	}
}
@media (max-width: $size-md) {
	.user-info {
		flex-basis: 48px;
		&--narrow {
			position: relative;
			top: 0;
			left: 0;
		}
		&--narrow-wide {
			width: auto;
		}
	}
	.user-info-text,
	.user-info-toggle {
		display: none;
	}
	.user-menus {
		display: block;
	}
	.user-menu {
		bottom: auto;
		top: 2.4rem;
		left: 0;
		width: 100%;
		border-radius: 0 0 0.2rem 0.2rem;
		padding-bottom: 0.8rem;
	}
}