// ============================================================================
// :: LANGUAGE
// ============================================================================
.m-language {
	position: relative;

	padding-right: 3rem;

	border-radius: 2rem;

	&:focus:not(.focus-visible):not(:hover) {
		@include outline();
	}

	&:hover {
		outline: none;
	}

	&:hover,
	&:focus {
		cursor: pointer;

		.m-language__header {
			color: $text-color;

			&::before {
				color: $text-color-primary;

				transform: translateY(-50%) rotate(180deg);
			}
		}

		.m-language__content {
			pointer-events: auto;

			&::before {
				transform: scaleY(1);
			}
		}

		.m-language__list {
			@for $i from 1 through 10 {

				li:nth-child(#{$i}) {
					transition: transform 0.3s ease-in-out $i * 0.04s, opacity 0.3s ease-in-out $i * 0.04s;
				}
			}

			li {
				opacity: 1;

				transform: translateY(0);

				transition: transform 0s ease-in-out, opacity 0s ease-in-out;
			}
		}
	}

	&:focus-within {
		cursor: pointer;

		.m-language__header {
			color: $text-color;

			&::before {
				color: $text-color-primary;

				transform: translateY(-50%) rotate(180deg);
			}
		}

		.m-language__content {
			pointer-events: auto;

			&::before {
				transform: scaleY(1);
			}
		}

		.m-language__list {
			@for $i from 1 through 10 {

				li:nth-child(#{$i}) {
					transition: transform 0.3s ease-in-out $i * 0.04s, opacity 0.3s ease-in-out $i * 0.04s;
				}
			}

			li {
				opacity: 1;

				transform: translateY(0);

				transition: transform 0s ease-in-out, opacity 0s ease-in-out;
			}
		}
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-language__header {
	@extend %__icon-arrow-down-s;
	padding: 2.5rem 1.5rem 2.5rem 0;

	border-radius: 2rem;

	color: $text-color;

	transition: color 0.2s ease-out;

	&::before {
		position: absolute;
		top: 50%;
		right: 3rem;

		font-size: $font-size-2x-small;

		color: $text-color-grey;

		transform: translateY(-50%);

		transition: transform 0.3s ease-in-out;
	}

	&:focus:not(.focus-visible):not(:hover) {
		@include outline();
	}
}

.m-language__header__title {

	&:focus:not(.focus-visible):not(:hover) {
		@include outline();
	}
}

.m-language__content {
	position: absolute;
	left: 0;
	bottom: 0;

	margin-left: 0;
	padding: 2rem !important; /* stylelint-disable-line */

	transform: translateY(100%);

	pointer-events: none;

	&::before {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		display: block;
		width: 100%;
		height: 100%;

		background: $background-color-white;
		box-shadow: $box-shadow;

		transform: scaleY(0);
		transform-origin: top;

		transition: transform 0.3s ease-in-out;
	}
}

.m-language__list {
	display: block;

	transform: scaleY(1);

	.a-link {
		font-family: $font-family-beausans;
		font-weight: $font-weight-normal;

		&.is-active {
			font-family: $font-family-beausans;
			font-weight: $font-weight-bold;

			color: $text-color-primary;
		}
	}

	li {
		opacity: 0;

		transform: translateY(10rem);

		transition: transform 0.06s ease-in-out, opacity 0.06s ease-in-out;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-language--inverted {

	.m-language__header__title {
		color: $text-color-white;
	}

	.m-language__header {

		&::before {
			color: $text-color-white;
		}

		&:hover {

			&::before {
				color: $text-color-white;
			}
		}
	}
}