// ============================================================================
// :: NAV
// ============================================================================
.m-nav {
	position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-nav__list {
	display: inline-flex;
	justify-content: space-between;
}

.m-nav__item {
	position: relative;

	display: flex;
	align-items: center;
	margin-top: 0 !important; /* stylelint-disable-line */
	padding: 2.5rem 3rem !important; /* stylelint-disable-line */

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-small;
	line-height: $line-height;

	border-radius: 2rem;

	transition: background-color 0.3s ease-in-out;

	cursor: pointer;

	&:not(:first-of-type) {
		margin-left: 0.4rem;
	}

	&:hover {
		background: $background-color-white-3x-light;

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

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

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

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

		.m-nav__dropdown {
			z-index: $z-index-high;

			pointer-events: auto;

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

		.m-nav__dropdown-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;
				}
			}

			.m-list__item {
				opacity: 1;

				transform: translateY(0);

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

	&:focus-within {
		background: $background-color-white-3x-light;

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

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

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

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

		.m-nav__dropdown {
			z-index: $z-index-high;

			pointer-events: auto;

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

		.m-nav__dropdown-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;
				}
			}

			.m-list__item {
				opacity: 1;

				transform: translateY(0);

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

.m-nav__dropdown-list {
	width: 17rem;
	min-width: 17rem;

	&:not(:last-child) {
		margin-right: 3rem;
	}

	.m-list__item {
		opacity: 0;

		transform: translateY(1rem);

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

.m-nav__dropdown-link {
	font-family: $font-family-roboto;
	font-weight: $font-weight-thin;
	font-size: $font-size;
	white-space: normal;
	text-align: left;

	border: none;
	background: transparent;
}

.m-nav__dropdown-mainlink {
	font-family: $font-family-roboto;
	font-weight: $font-weight-bold;
	font-size: $font-size;
	white-space: normal;
}

.m-nav__item__link {
	@extend %__icon-arrow-down-s;
	padding-right: 2.5rem;

	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;

	border-radius: 2rem;
	border: none;

	color: $text-color;
	background: transparent;

	transition: color 0.2s ease-out;

	cursor: pointer;

	&::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();

		color: $text-color;

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

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

		& + .m-nav__dropdown {
			z-index: $z-index-high;

			pointer-events: auto;

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

			.m-nav__dropdown-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;
					}
				}

				.m-list__item {
					opacity: 1;

					transform: translateY(0);

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

.m-nav__dropdown {
	position: absolute !important; /* stylelint-disable-line */
	left: 0;
	bottom: 0;
	z-index: $z-index-lowest;

	display: flex;

	min-width: 20rem;
	margin-left: 0;
	padding: 3rem !important; /* stylelint-disable-line */

	transform: translateY(100%);

	pointer-events: none;

	&::after {
		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-list {
		z-index: $z-index-high;

		display: block;

		transform: scaleY(1);
	}
}