// ----------------------
// Main menu
// ----------------------
.nav {
	align-items: center;
	position: relative;
	gap: 0.5rem;
	font-size: $font-size-md;

	.hide-aside {
		padding: 0.5rem;
		text-align: right;
	}
}

.nav__link {
	display: block;
	position: relative;
}

.nav__link--download {
	border: 1px solid var(--nav-download-border-color);
	transition: background-color 300ms, color 300ms;
	border-radius: $border-radius;
	margin-left: auto;

	&:hover {
		background-color: var(--nav-download-hover-bg);
	}
}

.nav__sub {
	padding: 0.6rem 0.75rem;
	font-weight: $font-weight-medium;
	color: var(--text-color);
	border-radius: $border-radius;

	&,
	& > small {
		display: block;
	}

	& > small {
		color: var(--text-muted-color);
		font-weight: normal;
		font-size: 0.8rem;
		opacity: 0.75;
		margin-top: 0.25rem;
	}

	&:hover {
		background-color: var(--theme-light-bg);
		color: var(--text-color);
	}
}

.nav__column__title {
	text-transform: uppercase;
	font-size: 0.6rem;
	padding-left: 0.75rem;
	margin-bottom: 0.5rem;
	line-height: 100%;
	color: var(--text-muted-color);
}

.nav__lead {
	&,
	&:hover {
		color: var(--text-color);
	}

	display: flex;
	align-items: center;

	& > img {
		width: 30px;
		flex-shrink: 0;
		margin-right: 0.75rem;
	}
}

.nav__separator {
	border-left: 1px solid var(--theme-light-bg);
	margin: 0 1rem;
}


:root {
	&:not(.read-mode) {
		.nav {
			margin: 0.5rem 0 0 -1rem;
			display: flex;
	
			.nav__link {
				padding-right: 1rem;
				padding-left: 1rem;
			}
		}
		
		.nav__item {
			&:hover {
				.nav__link {
					&:after {
						opacity: 1;
					}
				}

				.nav__dropdown,
				& ~ .nav__dropdown--product {
					opacity: 1;
					pointer-events: auto;
				}

				.nav__link--dropdown {
					& > span {
						&:before {
							opacity: 0;
						}
					}
				}
			}

			.nav__link {
				padding-right: 1.25rem;
				margin-right: 0.5rem;
				background: var(--nav-item-arrow) no-repeat top 20px right 0.25rem;
	
				&:after {
					opacity: 0;
					pointer-events: none;
					box-sizing: border-box;
					left: 50%;
					margin-left: -3px;
					content: "";
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 6px 4px;
					border-color: transparent transparent var(--nav-dropdown-bg);
					position: absolute;
					bottom: 0;
					transition: opacity 200ms;
					z-index: 2;
				}
			}	
		}

		.nav__link {
			padding: 0.5rem 0 0.6rem;
			cursor: pointer;
			color: var(--nav-text-color);
			
			&:hover {
				color: $white;
			}
	
			& > span {
				position: relative;
	
				&:before {
					height: 1px;
					width: 100%;
					background-color: var(--nav-item-border-color);
					position: absolute;
					bottom: -4px;
					left: 0;
					content: "";
					transform: translateY(5px);
					opacity: 0;
					transition: opacity 300ms, transform 300ms;
				}
			}

			&.nav__link--active {
				& > span {
					&:before {
						opacity: 1;
						transform: translateY(0);
					}
				}
			}
	
			&:not(.nav__link--dropdown) {
				&:hover {
					& > span {
						&:before {
							transform: translateY(0);
							opacity: 1;
						}
					}
				}
			}
		}

		.nav__dropdown {
			width: 365px;
			position: absolute;
			left: 0;
			top: 100%;
			opacity: 0;
			transition: opacity 200ms;
			pointer-events: none;
			border-radius: $border-radius-lg;
			overflow: hidden;
			box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13);
			background-color: var(--nav-dropdown-bg);
			z-index: 1;
	
			.nav__dropdown__inner {
				padding: 1.5rem;
				max-height: calc(100vh - 5rem);
				overflow-y: auto;
				border-radius: $border-radius-lg;	
			}
		}

		.nav__dropdown--product {
			&:hover {
				opacity: 1;
				pointer-events: auto;
			}
	
			max-width: 1200px;
			width: 100%;
			transform: translateX(0);
			left: 0;
	
			.nav__dropdown__inner {
				padding: 2.5rem 2.25rem;
			}
		}

		.nav__feature {
			display: flex;
		}

		.nav__column {
			padding: 0 1rem;
		
			&:not(:last-child) {
				flex: 1;
			}
	
			&:last-child {
				& > .nav__sub {
					margin-top: 1rem;
				}
			}
		}
		
		.nav__jump {
			padding-left: 2.6rem;
			margin-top: -0.2rem;
	
			& > a {
				&,
				&:hover {
					color: var(--text-muted-color);
				}
	
				&:hover {
					text-decoration: underline;
				}
	
				font-weight: normal;
				display: block;
				font-size: 0.8rem;
				margin-top: 0.5rem;
			}
		}

		.nav__link--download {
			padding: 0.25rem 1rem 0.35rem;
		}
	}

	&.read-mode {
		.nav {
			margin-top: 0;
			height: 100vh;
			width: $nav-mobile-width;
			position: fixed;
			right: 0;
			top: 0;
			flex-direction: column;
			transform: translate3d($nav-mobile-width, 0, 0);
			opacity: 0;
			box-shadow: 0 0 10px rgba($black, 0.25);
			overflow-y: auto;
			background-color: var(--nav-bg);
			padding: 0.75rem;
		}

		&.nav-active {
			.nav {
				transform: translate3d(0, 0, 0);
				opacity: 1;
				z-index: $nav-active-z-index;
			}
		}

		.nav__link {
			font-weight: $font-weight-medium;
			border-radius: $border-radius;
			color: var(--headings-color);
	
			& > span { 
				display: block;
				padding: 0.5rem 0.75rem;
			}
		}

		.nav__link--download {
			margin: 1.5rem 0.75rem 1rem;
			text-align: center;
			padding: 0.5rem 1rem;
			display: block;
			
			&:hover {
				color: var(--header-headings-color);
			}
		}

		.nav__dropdown {
			.nav__dropdown__inner {
				margin-bottom: 1rem;
			}
		}

		.nav__sub {
			font-size: $font-size-sm;
			font-weight: normal;

			& > small {
				display: none;
			}
		}

		a.nav__link:not(.nav__link--download),
		.nav__sub {
			&:hover {
				background-color: var(--theme-light-bg);
			}
		}

		.nav__column__title {
			margin-top: 1rem;
		}

		.nav__lead {
			& > img {
				display: none;
			}
		}

		.nav__jump {
			display: none;
		}

		.nav__separator {
			display: none;
		}
	}

	&.nav-active,
	&.doc-active {
		height: 100vh;
		overflow: hidden;
	}
}


// ----------------------
// Platform nav
// ----------------------
.platform-nav {
	background-color: var(--content-nav-bg);
	font-size: $font-size-md;
    position: relative;
    box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15);

    & > .container {
        white-space: nowrap;
        overflow-x: auto;
        display: flex;
        @include hide-scrollbars();

		&:after {
			background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%);
		}
    }
}

:root {
    &:not(.dark-mode):not(.read-mode) {
        .platform-nav__inner {
            & > a.active {
                & > img {
                    &:first-child {
                        display: block;
                    }

                    &:last-child {
                        display: none;
                    }
                }
            }
        }
    }
}

.platform-nav__inner {
	margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
	gap: 2.5rem;
	align-items: center;
    flex: 1;

	@include breakpoint-max(breakpoints(lg)) {
		gap: 1.75rem;
	}

    & > a {
        color: var(--text-muted-color);
        font-weight: $font-weight-medium;
        display: flex;
        align-items: center;
        padding: 0.75rem 0 0.7rem;
        border-bottom: 2px solid transparent;
        transition: color 300ms;

        & > img {
            margin-right: 0.75rem;
            opacity: 0.65;
            transition: opacity 300ms;
            filter: var(--content-nav-icon-filter);

            &:first-child {
                display: none;
            }
        }

        &.active {
            border-bottom-color: var(--content-nav-active-border-color);
            color: var(--text-muted-hover-color);
        }

        &:hover,
        &.active {
            & > img {
                opacity: 1;
            }
        }

        &:hover {
            color: var(--text-muted-hover-color);
        }
    }

    .search-toggle {
        margin-left: auto;
		position: relative;
		z-index: 2;
        
        @include breakpoint-max(breakpoints(lg)) {
            display: none !important;
        }
    }
};

.platform-nav__dropdown {
    background-color: var(--content-nav-sub-bg);
    font-size: $font-size-sm;
	
	&:after {
		background-image: linear-gradient(270deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 10%, transparent 100%);
	}

    nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        &:not(.active) {
            display: none;
        }

        & > a {
            font-weight: $font-weight-medium;
            color: var(--content-nav-sub-color);
            border-bottom: 2px solid transparent;
            padding: 0.7rem 0;
            transition: color 300ms;
    
            &.active {
                border-bottom-color: var(--content-nav-sub-active-border-color);
                color: var(--content-nav-sub-active-color);
                font-weight: $font-weight-bold;
            }

            &:not(.active) {
                &:hover {
                    color: var(--content-nav-sub-hover-color);
                }
            }
        }
    }
}

.platform-nav > .container,
.platform-nav__dropdown {
	position: relative;

	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 3rem;
		height: 100%;
		z-index: 1;
		height: 100%;
		pointer-events: none;
	}
}