$c-language-bp1: 560;
$c-language-item-gap: space(6);

.c-language-menu {

}


.c-language-menu__title {
	@include mq($max:800) {
		font-size: calc(20px + 1vw);
	}
	@include font-size(xl);
	@include font-weight(extraBold);
	color: palette(primary, 500);
	margin-bottom: space(4);
}


.c-language-menu__list {
	margin-left: 0;
	list-style: none;
	break-inside: avoid;

	@include mq($c-language-bp1) {
		columns: 2;
		column-fill: auto;
		column-gap: $c-language-item-gap;
	}
}


.c-language-menu__item {
	display: inline-block;
	width: 100%;
	color: palette(neutral, 700);
	border-bottom: 1px solid palette(neutral, 300);

	&:last-child {
		border-bottom: none;
		color: palette(secondary, 500);
	}

	/**
	 * knowing we have 10 items in our list
	 * we manually select the last of each column
	 * to remove the border
	 */

	@include mq($c-language-bp1) {
		&:nth-child(3n) {
			border-bottom: none;
		}
	}
}


.c-language-menu__link {
	@include font-weight(semiBold);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: space(2) 0;
	color: currentColor;
	text-decoration: none;

	&::before {
		opacity: 0;
	    content: '';
	    position: absolute;
	    z-index: 0;
	    top: space(1);
	    bottom: space(1);
	    right: space(-1);
	    left: space(-1);
		background-color: rgba(palette(primary, 100), 0.5);
		transition: opacity 200ms linear;
		@include border-radius(xs);
	}

	&:hover {
		color: palette(primary, 500);

		&::before {
			opacity: 1;
		}
	}
}


.c-language-menu__label {
	position: relative;
}


.c-language-menu__arrow {
	position: relative;
	color: palette(primary, 500);
	transform: translateX(space(-1));
	transition: transform 200ms ease;

	.c-language-menu__link:hover & {
		transform: translateX(space(-0.5));
	}
}