.supt-navigation {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	z-index: $z-index-nav;

	&__inner {
		display: flex;
		justify-content: space-between;

		padding: $spacing-3-5 $spacing-4;
		border-bottom: 1px solid $color-grey-2;
		background: $color-grey-background;

		position: relative;
		z-index: 3;

		@media (min-width: $breakpoint-lg) {
			padding: $spacing-4 $spacing-8;
		}
	}

	&__content {
		display: flex;
		align-items: center;
		gap: $spacing-5;

		@media (min-width: $breakpoint-lg) {
			gap: $spacing-6;
		}
	}

	/* Logo */
	&__logo {
		outline: 0;
		transition: opacity $transition-fast;

		svg {
			display: block;
			width: auto;
			height: 40px;

			@media (min-width: $breakpoint-lg) {
				height: 48px;
			}
		}

		&:hover,
		&:focus-visible {
			opacity: 0.8;
		}
	}

	/* Desktop Menu */
	&__menu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
		gap: $spacing-6;

		@media (min-width: $breakpoint-lg) {
			display: flex;
		}

		&__item {
			position: relative;
			display: flex;

			&::after {
				content: '';
				position: absolute;
				bottom: 11px;
				left: 0;
				width: 100%;
				height: 1px;
				background: $color-main;
				transform-origin: right;
				transform: scaleX(0);
				transition: transform $transition-fast ease-in-out;
			}

			&:last-child {
				.supt-navigation__submenu {
					left: auto;
					right: calc(0 - ($spacing-6 + 16px + $spacing-8));
					&__inner {
						border-right: 0;
					}
				}
			}

			&.-is-active,
			&:hover,
			&:focus-within {
				&::after {
					transform-origin: left;
					transform: scaleX(1);
				}
			}

			&:hover,
			&:focus-within {
				.supt-navigation__submenu {
					opacity: 1;
					pointer-events: auto;
					transform: translateY(0);
				}

				.supt-navigation__menu__link {
					svg {
						color: $color-black;
						transform: rotate(-180deg);
					}
				}
			}
		}

		&__link {
			@extend %t-body-sm, %reset-button;
			font-weight: 500;
			text-decoration: none;
			color: $color-black;

			display: flex;
			align-items: center;
			gap: $spacing-1-5;

			svg {
				width: 10px;
				margin-top: 2px;
				height: auto;
				color: $color-grey-5;
			}
		}
	}

	/* Submenu */
	&__submenu {
		position: absolute;
		top: 100%;
		left: -8px;
		width: 215px;
		padding-top: $spacing-4;
		z-index: 1;

		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);

		&__inner {
			background: $color-grey-background;
			border: 1px solid $color-grey-2;
			transition: border-color $transition-fast;
		}
		&__link {
			@extend %t-body-s;
			color: $color-grey-5;

			outline: 0;
			display: block;
			padding: $spacing-3 $spacing-4;
			transition: color $transition-fast;

			&:not(:last-child) {
				border-bottom: 1px solid $color-grey-2;
			}

			&.-is-active,
			&:hover,
			&:focus-visible {
				color: $color-black-background;
			}
		}
	}

	&__country-btn {
		@extend %reset-button;

		color: $color-black;

		svg {
			display: block;
			width: 20px;
			height: 20px;

			@media (min-width: $breakpoint-lg) {
				width: 16px;
				height: 16px;
			}
		}

		&:hover,
		&:focus-visible {
			color: $color-main;
		}
	}

	/* Mobile Toggle */
	&__mobile-toggle {
		@extend %reset-button;

		color: $color-black;

		@media (min-width: $breakpoint-lg) {
			display: none;
		}

		svg {
			display: block;
			overflow: visible;
		}

		path {
			transition:
				transform $transition-fast ease-in-out,
				opacity $transition-fast;
		}
	}

	/* Mobile Menu */
	&__mobile-menu {
		position: fixed;
		inset: 0;

		padding-top: 69px;
		background: $color-grey-background;

		overflow-y: auto;
		z-index: 2;

		transform: translateY(-20px);
		opacity: 0;
		pointer-events: none;

		@media (min-width: $breakpoint-lg) {
			display: none;
		}

		&__list {
			list-style: none;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid $color-grey-1;
		}
		&__item {
			padding: $spacing-5 $spacing-4;
			border-bottom: 1px solid $color-grey-2;

			&.-is-open {
				.supt-navigation__mobile-menu__link svg {
					transform: rotate(-180deg);
					color: $color-main;
				}
			}

			&.-is-active {
				.supt-navigation__mobile-menu__link {
					text-decoration: underline;
					text-decoration-thickness: 1px;
					text-underline-offset: 4px;
					text-decoration-color: $color-main;
					text-decoration-skip-ink: none;
				}
			}
		}
		&__link {
			@extend %t-h3, %reset-button;
			color: $color-black;

			display: flex;
			align-items: center;
			justify-content: space-between;

			width: 100%;

			svg {
				pointer-events: none;

				margin: 0 4px;
				width: 12px;
				color: $color-grey-5;
			}
		}

		&__submenu {
			max-height: 0;
			overflow: hidden;
			transition: max-height $transition-fast ease-in-out;

			&__list {
				list-style: none;
				padding: $spacing-6 $spacing-4 $spacing-3;

				display: flex;
				flex-direction: column;
				gap: $spacing-3-5;
			}

			&__link {
				@extend %t-body-sm;
				color: $color-grey-5;

				&.-is-active {
					color: $color-black-background;
				}
			}
		}
	}

	/* Dark variant */
	&.-dark:not(.-is-scrolled) {
		.supt-navigation {
			&__inner {
				background: none;
				border-bottom-color: rgba(255, 255, 255, 0.16);
			}

			&__logo {
				svg {
					fill: $color-white;
				}
			}

			&__menu {
				&__item {
					svg {
						color: $color-grey-2;
					}

					&::after {
						background: $color-white;
					}

					&:hover,
					&:focus-within {
						svg {
							color: $color-white;
						}
					}
				}
				&__link {
					color: $color-white;
				}
			}

			&__submenu__inner {
				border: none;
			}

			&__country-btn,
			&__mobile-toggle {
				color: $color-white;
			}
		}

		&.-is-open {
			.supt-navigation__logo {
				svg {
					fill: $color-main;
				}
			}

			.supt-navigation__country-btn,
			.supt-navigation__mobile-toggle {
				color: $color-black;
			}
		}
	}

	/* Mobile open state */
	&.-is-open {
		.supt-navigation__mobile-toggle {
			path {
				&:nth-child(1) {
					transform: scale(1.38) translate(11px, -11px) rotate(45deg);
				}
				&:nth-child(2) {
					opacity: 0;
				}
				&:nth-child(3) {
					transform: scale(1.38) translate(-3px, 12px) rotate(-45deg);
				}
			}
		}
		.supt-navigation__mobile-menu {
			transform: translateY(0);
			opacity: 1;
			pointer-events: auto;
		}
	}

	/**
	 * Add transition only when DOM is fully loaded
	 * (to avoid hiding animation when the page is loading)
	 */
	body.-is-loaded & {
		&__logo {
			svg {
				transition: fill $transition-fast;
			}
		}

		&__inner {
			transition:
				background $transition-fast,
				border-color $transition-fast;
		}

		&__menu {
			&__link {
				transition: color $transition-fast;

				svg {
					transition: transform $transition-fast;
				}
			}
		}

		&__submenu {
			transition:
				opacity $transition-fast ease-in-out,
				transform $transition-fast ease-in-out;
		}

		&__country-btn {
			transition: color $transition-fast;
		}

		&__mobile-toggle {
			transition: color $transition-fast;
		}

		&__mobile-menu {
			transition:
				opacity $transition-fast,
				transform $transition-fast ease-in-out;

			&__link {
				transition: color $transition-fast;

				svg {
					transition:
						transform $transition-fast ease-in-out,
						color $transition-fast;
				}
			}
		}
	}
}