@use '../../../components/organisms/navigation';
@use '../../../base/mixins/breakpoints' as break;
@use '../../../base/mixins/typography' as font;
@use '../../../base/functions' as *;

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

			.nav-dropdown {
				&::after {
					color: var(--action-secondary);
				}
			}

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

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

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

		&-wrapper {
			@include break.max-tablet {
				// need a custom value here since none of the BUI values close the gap
				// between the navigation and the top of the screen properly.
				margin-top: 4.5rem;
			}
		}

		.nav-login {
			&-menu {
				top: 3rem;
			}

			&-label {
				font-family: 'Geist mono', monospace;
			}

			&-accordion {
				&-label {
					font-family: 'Geist mono', monospace;

					&::after {
						color: var(--action-secondary);
					}
				}

				&-links {
					.login-link {
						&-label {
							font-family: 'Geist mono', monospace;
						}

						&-desc {
							font-family: 'Geist mono', monospace;
						}

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

					.login-link.link-external {
						&::after {
							color: var(--action-secondary);
						}
					}
				}

				&-disclaimer {
					font-family: 'Geist mono', monospace;

					a {
						color: var(--action-secondary);

						&:hover {
							color: var(--ui-body);
						}
					}
				}
			}
		}
	}
}