.c-user-details {
	align-self: center;
	text-align: right;

	&__content {
		min-width: 250px;
		background: #fff;
		padding: 5px 0;
		right: 0;
	}

	&__content-item {
		font-size: .75rem;
	}

	&__open {
		@include u-focus-outline;
		text-decoration: none;
		vertical-align: baseline;
		background: none;
		border: 0;
	}

	&__link {
		cursor: pointer;
	}

	&__links {
		list-style-type: none;
		margin: 0;
		color: #666;
	}

	&__email {
		margin-bottom: 10px;
		color: #222;
	}

	&__logout {
		display: block;
		font-size: $small-font-size;
	}
}

.js .c-user-details {
	height: 30px;
	font-family: $context--font-family-sans;

	&__open {
		@include arrow(map-get($context--colors, medium-blue), down, 4px);

		margin-left: 10px;
		right: 0;
		color: map-get($context--colors, medium-blue);

		&.open {
			@include arrow(map-get($context--colors, medium-blue), up, 4px);
		}
	}

	&__content {
		position: absolute;
		z-index: $zindex-level-highest;
		height: auto;
		padding: 5px 0;
		text-align: left;
		box-shadow: 1px 2px 1px 1px rgba(0, 0, 0, 0.3);
	}

	&__content-item {
		padding: 0 12px;
	}

	&__link {
		padding: 7px 12px;

		&:hover {
			background-color: map-get($context--colors, universal-blue);
			color: color('white');
		}
	}

	&__links {
		border-top: 1px solid $separator-color;
		padding: 5px 0 0 0;
	}

	&__last-name {
		padding-right: 10px;
	}
}
