.c-language {
	position: relative;
}

.c-language__current {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 5px 30px;

	color: white;
	@include font-size(s);
	text-align: left;
	border: 1px solid transparent;
	@include border-radius;
	background-color: palette(neutral, 900);
	appearance: none;
	transition: background-color 0.15s, box-shadow 0.15s;

	&:focus, &:hover {
		outline: none;
		background-color: lighten(palette(neutral, 900), 5%);
	}

	.c-language:hover &{
		box-shadow: 0 0 12px 1px rgba(black, 0.15);
	}
}

.c-language__dropdown
{
	position: absolute;
	left: 0;
	bottom: calc(100% - 5px);
	border-radius: 4px 4px 0 0;
	background-color: darken(palette(neutral, 900), 5%);
	list-style: none;
	width: 100%;
	padding: 0 0 5px;
	margin: 0;
	box-shadow: 0 0 12px 1px rgba(black, 0.15);
	opacity: 0;
	transform: translate3d(0, 5px, 0);
	transition: opacity 0.3s, transform 0.3s;

	.c-language:hover &{
		opacity: 1;
		transform: translate3d(0,0,0);
	}

}

.c-language__item{
	&:nth-child(even){
		background-color: darken(palette(neutral, 900), 3%);
	}
}

.c-language__link{
	display: block;
	padding: 5px 15px 5px 30px;
	text-decoration: none;
	color: rgba(white, 0.7);
	background-color: transparent;
	transition: background-color 0.3s;

	&:first-child{
		border-radius: 4px 4px 0 0;
	}

	&:hover{
		color: white;
		background-color: lighten(palette(neutral, 900), 5%);
	}
}

.c-language__arrow {
	position: absolute;
	z-index: 3;
	right: 12px;
	top: 16px;
	color: white;
	pointer-events: none;
}