.lang-forms {
	margin-top: 2rem;
	margin-bottom: 1rem;
	display: inline-block;
	position: relative;
	width: 100%;

	&:before {
		display: block;
		width: 1px;
		height: 100%;
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		background: $color--seashell;
	}
}

.lang-forms__switcher {
	margin: 1rem 0;
	display: inline-block;
	width: 20rem;
	height: 4.3rem;
	position: relative;
	z-index: 9998;
	cursor: pointer;
	border: 0.1rem solid $color--seashell;
	border-radius: 2px;

	&:hover {
		border-color: $color--mint;
	}

	&:before {
		position: absolute;
		top: calc(50% - 0.25rem);
		right: 0.8rem;
		z-index: 999;
		display: block;
		width: 0.8rem;
		height: 0.5rem;
		content: '';
		border-left: 0.4rem solid transparent;
		border-right: 0.4rem solid transparent;
		border-top: 0.5rem solid $color--seashell;
	}
}

.lang-forms__switcher__options {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	border-radius: 2px;
	.open & {
		border: 0.1rem solid $color--seashell;
	}
}

.lang-forms__switcher__option {
	@extend .form__item__field;
	border: none;
	display: block;
	width: 100%;
	height: 3.8rem;
	background-size: 4rem;
	background-position: 0.5rem center;
	background-repeat: no-repeat;
	font-size: 2rem;
	padding-left: 5.5rem;
	margin-top: -1px;
	font-weight: 500;
	display: none;
	line-height: 3.7rem;
	.open & {
		display: block;
		border-top: 0.1rem solid $color--seashell;
	}

	&.active {
		position: absolute;
		top: -3.8rem;
		display: block;
		pointer-events: none;
		border-top:none;
	}

	&:hover {
		background-color: lighten($color--seashell, 15%);
	}
}
.lang-forms__left-side {
}
.lang-forms__storage { display: none; }

.lang-forms__switcher__nothing {
	font-weight: 300;
	font-size: 1.4rem;
	padding: 1rem 1rem 0 1rem;
}