.languages-nav-container {
	position: relative;
	z-index: 10;

	.current-language {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 0;
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-sm);
		line-height: 1.2;
		text-transform: uppercase;
		color: inherit;
		background: none;
		border: none;
		border-radius: 0;

		&::before,
		&::after {
			font: var(--fa-font-solid);
		}

		&::before {
			content: '\f57d';
		}

		&::after {
			content: '\f107';
			transition: rotate var(--transition-appendix);
		}
	}

	.language-selector {
		position: absolute;
		inset: calc(100% + var(--space-2)) auto auto 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: 200px;
		padding: var(--space-4);
		margin: 0;
		list-style: none;
		background: var(--white);
		border: 1px solid var(--black);
		border-radius: 8px;
		box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);
	}

	&:not(.active) .language-selector,
	&:not(.active) .language-selector * {
		pointer-events: none;
	}

	.language-link {
		display: block;
		text-decoration-color: transparent;
	}

	/*----- open nav -----*/
	
	&.active {
		.current-language::after {
			rotate: x 180deg;
		}

		.language-selector {
			opacity: 1;
			visibility: visible;
		}
	}
	
	/*----- media queries -----*/

	@media (hover: hover) {
		.language-link:hover {
			text-decoration-color: var(--brown);
		}
	}

	@media (min-width: 64em) {
		.language-selector {
			right: 0;
			left: auto;
		}
	}
}