@use 'sass:map';
@use 'sass:string';
@use '../../base/variables/icons' as *;
@use '../../base/mixins/glass' as glass;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;
@use '../../utilities/list-styles' as *;
@use '../../components/atoms/icons' as *;
@use '../../components/atoms/product-logos' as *;

.brandui-navigation {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 100;

	// Need to figure out if we still want this transparent
	@include glass.bg-glass($dense: true);

	.navigation {
		padding: var(--padding-small) var(--padding-large);
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--padding-large);

		&-logo {
			width: 6rem;
			border-radius: var(--radius-small);

			&.logo-med {
				width: 11rem;
			}

			&.logo-long {
				width: 15rem;
			}
		}

		&-wrapper {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// Mobile open trigger
			&.open {
				@include break.max-tablet {
					display: flex;
					transform: unset;
				}
			}

			&:has(.with-search) {
				justify-content: end;
				gap: var(--padding-small);

				@include break.max-tablet {
					justify-content: start;
					gap: var(--padding-extra-small);
				}
			}

			@include break.max-tablet {
				margin-top: var(--padding-huge);
				padding: var(--padding-small);
				padding-bottom: var(--padding-huge);
				display: none;
				flex-direction: column;
				justify-content: start;
				gap: var(--padding-medium);
				overflow: scroll;
				height: 90vh;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				background-color: var(--default);
			}
		}

		&-menu {
			@extend .list-reset;

			display: flex;
			align-items: center;

			@include break.max-tablet {
				width: 100%;
				flex-direction: column;
				align-items: stretch;
			}
		}

		@include break.max-tablet {
			justify-content: space-between;
		}

		&-item {
			transition: var(--transition-fast);

			&:hover,
			&:focus,
			&:focus-within,
			&:focus-visible,
			&:has(.navigation-submenu.open) {
				.nav-dropdown {
					color: var(--action);
					background-color: with-opacity(var(--action), 10);
				}
			}

			&:hover,
			&:has(.nav-dropdown.open) {
				.nav-login-menu {
					display: block;
				}

				.nav-dropdown::after {
					transform: rotate(180deg);
					transition: var(--transition-fast);
				}
			}

			&:hover,
			&:has(.navigation-submenu.open) {
				.nav-dropdown {
					&::after {
						transform: rotate(180deg);
						transition: var(--transition-fast);
					}

					@include break.max-tablet {
						padding-left: var(--padding-small);
					}
				}

				.navigation-submenu {
					opacity: 1;
					visibility: visible;
					transition: var(--transition-fast);
				}
			}

			.nav-dropdown,
			.nav-link {
				padding: var(--padding-extra-small) var(--padding-small);
				align-items: center;
				border-radius: var(--radius-small);
				border: 1px solid transparent;
				font-family: var(--txt-body-family), sans-serif;
				font-size: var(--txt-body-size);
				font-weight: 700;
				letter-spacing: 0.005em;
				transition: var(--transition-fast);
				color: var(--ui-headline);

				@include break.max-tablet {
					padding: var(--padding-small);
					padding-left: 0;
					justify-content: space-between;

					&:hover {
						padding-left: unset;
					}
				}
			}

			.nav-dropdown {
				display: flex;
				gap: var(--padding-extra-small);
				pointer-events: none;

				&::after {
					content: '\e925'; // icon-keyboard-arrow-down
					font-family: brandui-icons;
					font-weight: 900;
					pointer-events: none;
					color: var(--action);
				}
			}

			.nav-link {
				text-decoration: none;
				display: flex;
				position: relative;

				&:hover,
				&:focus {
					color: var(--action);
					background-color: with-opacity(var(--action), 10);
				}

				@include break.max-tablet {
					display: flex;

					&::after {
						content: '\e91a'; // icon-east
						font-family: brandui-icons;
						font-weight: 400;
						pointer-events: none;
						color: var(--action);
					}
				}

				.new-evo-feature {
					background: linear-gradient(
						140deg,
						var(--color-orange),
						var(--color-pink)
					);
					background-clip: text;
					-webkit-text-fill-color: transparent;

					&-tag {
						background: linear-gradient(
							140deg,
							var(--color-orange),
							var(--color-pink)
						);
						position: absolute;
						top: 0;
						right: -10px;
						font-size: 9px;
						border-radius: var(--radius-extra-small);
						padding: var(--padding-thin);

						@include break.max-tablet {
							right: unset;
							left: 30px;
						}
					}
				}

				&:hover,
				&:focus {
					.new-evo-feature-tag {
						color: var(--ui-subtle);
					}
				}
			}
		}

		&-submenu {
			// width: 100%;
			padding: var(--padding-small) var(--padding-large);
			padding-bottom: var(--padding-extra-large);

			// padding-top: map.get($brandui-padding, 'small');
			position: absolute;
			top: var(--padding-huge);
			left: 0;
			right: 0;
			opacity: 0;

			// transform: translateY(string.unquote('-#{map.get($brandui-padding, 'small')}'));
			box-shadow: var(--shadow-mid);
			visibility: hidden;
			transition: var(--transition-fast);
			background-color: var(--default);

			// Use to fill gap between dropdown and submenu for hover
			&::before {
				content: '';
				padding-top: var(--padding-small);
				position: absolute;
				top: string.unquote('-#{var(--padding-small)}');
				left: 0;
				right: 0;

				@include break.max-tablet {
					padding-top: 0;
					top: 0;
				}
			}

			&.open {
				@include break.max-tablet {
					display: block;
					top: 0;
					visibility: visible;
				}
			}

			.submenu {
				&-columns {
					display: flex;
					justify-content: center;
					gap: var(--padding-extra-large);

					@include break.max-tablet {
						flex-wrap: wrap;
					}
				}

				&-column {
					// max-width: brandui-col-spacing(3);
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: var(--padding-small);

					// &:has(.submenu-column-row:not(:has(.submenu-column-label))) {
					// 	margin-top: string.unquote('-#{map.get($brandui-padding, 'extra-large')}');
					// 	padding-top: 0;
					// }

					&-row {
						& + .submenu-column-row {
							padding-top: var(--padding-small);
							border-top: 1px solid var(--ui-fill);

							&:has(.submenu-column-label) {
								@include break.max-tablet {
									border-top-width: 0;
								}
							}
						}
					}

					&-label {
						position: relative;
						padding-bottom: var(--padding-small);
						white-space: nowrap;

						@include font.get-typography(mini-header-small);

						color: var(--ui-headline);

						&::after {
							content: '';

							@include break.max-tablet {
								width: 100%;
								display: block;
								border-top: 1px solid var(--ui-stroke);
							}
						}

						@include break.max-tablet {
							// display: none;
							padding: 0;
							display: flex;
							align-items: center;
							gap: var(--padding-small);
						}
					}

					@include break.max-tablet {
						padding-top: var(--padding-small);
					}
				}

				&-nav-items {
					@extend .list-reset;
				}

				&-nav-item {
					.submenu-link {
						padding: var(--padding-extra-small);
						display: flex;
						align-items: center;
						gap: var(--padding-small);
						text-decoration: none;
						border-radius: var(--radius-medium);
						transition: var(--transition-fast);

						@include font.get-typography(body-bold);

						color: var(--ui-headline);

						&:hover {
							color: var(--action);
							background-color: with-opacity(var(--action), 5);

							.submenu-link-label,
							.submenu-link-desc {
								transition: var(--transition-fast);
								color: var(--action);
							}
						}

						&.link-external {
							&::after {
								content: '\e92f'; // icon-open-in-new
								margin-left: auto;
								font-family: brandui-icons;
								font-size: var(--txt-subhead-small-size);
								font-weight: 500;
								pointer-events: none;
								color: var(--action);
							}
						}

						.general-icon,
						.product-logo {
							@extend .icon-border;

							padding: var(--padding-extra-small);
							background-color: var(--ui-fill);
						}

						.general-icon {
							font-size: var(--icon-medium-size);
							border-color: var(--ui-fill);
						}

						.product-logo {
							@extend .logo-md;
						}

						&-copy {
							@include break.max-tablet {
								margin-right: auto;
							}
						}

						&-label {
							@include font.get-typography(body-bold);

							color: var(--ui-headline);
						}

						&-desc {
							@include font.get-typography(body-small-medium);

							color: var(--ui-body);

							@include break.max-mobile {
								display: none;
							}
						}

						&.spotlight,
						&.spotlight-secondary {
							margin-bottom: var(--padding-extra-small);

							.general-icon {
								font-size: map.get($brandui-general-icon-size, 'large');

								@include break.max-tablet {
									font-size: map.get($brandui-general-icon-size, 'medium');
								}
							}

							@include break.max-tablet {
								background: none;
								margin-bottom: 0;
							}
						}

						@include break.max-tablet {
							padding: var(--padding-small);
							justify-content: space-between;
						}

						@include break.max-mobile {
							align-items: center;
						}
					}
				}
			}

			@include break.max-tablet {
				padding: var(--padding-small) 0;
				padding-bottom: var(--padding-extra-large);
				position: relative;
				display: none;
				box-shadow: none;
				opacity: 1;
				transform: unset;
			}
		}

		.nav-login {
			display: flex;
			align-content: center;
			position: relative;

			&-label {
				padding: var(--padding-extra-small) var(--padding-small);
				align-items: center;
				border-radius: var(--radius-small);
				border: 1px solid transparent;
				transition: var(--transition-fast);
				display: flex;
				gap: var(--padding-extra-small);
				font-family: var(--txt-body-family), sans-serif;
				font-size: var(--txt-body-size);
				font-weight: 700;
				letter-spacing: 0.005em;
				color: var(--ui-headline);

				@include break.min-mobile {
					height: 100%;
				}

				&::after {
					content: '\e925'; // icon-keyboard-arrow-down
					font-family: brandui-icons;
					font-weight: 900;
					pointer-events: none;
					color: var(--action);
				}

				@include break.max-tablet {
					padding: var(--padding-small);
					justify-content: center;
				}
			}

			&-menu {
				max-width: brandui-col-spacing(6);
				width: brandui-col-spacing(4);
				margin-left: -10rem;
				display: none;
				flex-direction: column;
				position: absolute;
				top: 3rem;
				right: -0.5rem;
				border-radius: var(--radius-medium);
				box-shadow: var(--shadow-mid);
				transition: var(--transition-fast);
				background-color: var(--default);

				&.open {
					display: block;
				}

				// Use to fill gap between dropdown and submenu for hover
				&::before {
					content: '';
					padding-top: var(--padding-small);
					position: absolute;
					top: string.unquote('-#{var(--padding-small)}');
					left: 0;
					right: 0;

					@include break.max-tablet {
						padding-top: 0;
						top: 0;
					}
				}

				@include break.max-tablet {
					width: 100%;
					margin-left: 0;
					position: relative;
					top: 0;
					right: 0;
					box-shadow: none;
				}
			}

			&-accordion {
				padding: var(--padding-small) var(--padding-medium);

				&.open {
					.nav-login-accordion-content {
						display: flex;
						flex-direction: column;
					}

					.nav-login-accordion-label {
						padding-bottom: var(--padding-extra-small);

						&::after {
							transform: rotate(180deg);
							transition: var(--transition-fast);
						}
					}
				}

				&-label {
					display: flex;
					gap: var(--padding-small);
					cursor: pointer;

					@include font.get-typography(mini-header-small);

					color: var(--ui-headline);

					&::after {
						content: '\e925'; // icon-keyboard-arrow-down
						margin-left: auto;
						font-family: brandui-icons;
						font-size: var(--txt-mini-header-size);
						font-weight: 900;
						pointer-events: none;
						color: var(--action);
					}
				}

				& + .nav-login-accordion {
					padding-top: var(--padding-small);
					border-top: 1px solid var(--ui-fill);
				}

				&-content {
					display: none;
					gap: var(--padding-small);
				}

				&-links {
					display: flex;
					flex-direction: column;

					li {
						list-style: none;
					}

					.login-link {
						padding: var(--padding-extra-small);
						display: flex;
						align-items: center;
						gap: var(--padding-small);
						text-decoration: none;
						border-radius: var(--radius-medium);
						transition: var(--transition-fast);

						@include font.get-typography(body-bold);

						color: var(--ui-headline);

						&:hover {
							color: var(--action);
							background-color: with-opacity(var(--action), 5);

							.submenu-link-label,
							.submenu-link-desc {
								transition: var(--transition-fast);
								color: var(--action);
							}
						}

						.general-icon,
						.product-logo {
							@extend .icon-border;

							padding: var(--padding-extra-small);
							background-color: var(--ui-fill);
							border-color: var(--ui-fill);
						}

						.general-icon {
							font-size: map.get($brandui-general-icon-size, 'medium');
						}

						.product-logo {
							@extend .logo-md;
						}

						&-copy {
							@include break.max-tablet {
								margin-right: auto;
							}
						}

						&-label {
							@include font.get-typography(body-bold);

							color: var(--ui-headline);
						}

						&-desc {
							@include font.get-typography(body-small-medium);

							color: var(--ui-body);

							@include break.max-mobile {
								display: none;
							}
						}

						&.link-external {
							&::after {
								content: '\e92f'; // icon-open-in-new
								margin-left: auto;
								font-family: brandui-icons;
								font-size: var(--subhead-small);
								font-weight: 500;
								pointer-events: none;
								color: var(--action);
							}
						}

						@include break.max-tablet {
							padding: var(--padding-small) 0;
							justify-content: space-between;
						}

						@include break.max-mobile {
							align-items: center;
						}
					}
				}

				&-disclaimer {
					padding-bottom: var(--padding-extra-small);

					@include font.get-typography(body-small);
				}

				@include break.max-tablet {
					padding: var(--padding-small) var(--padding-extra-small);
				}
			}

			@include break.max-tablet {
				flex-direction: column;
			}
		}

		&-buttons {
			display: flex;
			gap: var(--padding-small);
			transition: var(--transition-fast);
			margin-left: auto;

			&.with-search {
				@include break.min-tablet {
					margin-left: 0;
				}
			}

			@include break.max-tablet {
				margin: 0 auto;
				justify-content: center;
				align-items: center;
				flex-direction: column-reverse;

				&.no-reverse {
					flex-direction: column;
				}
			}
		}

		@include break.max-tablet {
			padding: var(--padding-small);
		}
	}
}

.navigation-top-offset {
	padding-top: 7rem;

	&-small {
		padding-top: 5rem;
	}
}