explainegy-nextjs/styles/modules/Nav.module.scss

@import "../variables.scss";
.nav {
	background-color: var(--color-background-nav);
	height: $nav-height-inital;
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	box-shadow: var(--color-shadow-nav) 0px 4px 8px;

	@media (max-width: $nav-breakpoint-1) {
		grid-template-columns: 1fr 1fr 0.25fr;
	}

	@media (max-width: $nav-breakpoint-2) {
		grid-template-columns: 1fr 1fr;
		height: 100px;
	}

	& > div {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.containerLeft {
		@media (max-width: $nav-breakpoint-2) {
			grid-column: 1;
			grid-row: 1;
		}

		@media (max-width: $nav-breakpoint-3) {
			column-gap: 20px;
		}

		.links {
			font-size: 0.8em;
			font-weight: bold;

			.dropDown {
				color: var(--color-font-link);
				text-decoration: none;
				cursor: pointer;
				&:hover {
					.dropDownContainer {
						display: block;
					}
				}
				.dropDownContainer {
					display: none;
					position: absolute;
					z-index: 1;
					.content {
						background-color: var(--color-background-dropdown);
						min-width: 160px;
						box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2);
						margin-top: 21px;

						a {
							float: none;
							color: var(--color-font-link);
							padding: 12px 16px;
							text-decoration: none;
							display: block;
							text-align: left;
							border-left: 2px solid transparent;
							transition: all 50ms linear;

							&:hover {
								border-color: var(--color-accent);
							}
						}
					}
				}
			}
		}
	}

	.containerCenter {
		width: 100%;

		@media (max-width: $nav-breakpoint-2) {
			grid-row: 2;
			grid-column: span 2;
		}
		.searchBar {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid rgba(95, 95, 95, 0.5);
			border-radius: 5px;
			padding-left: 10px;
			transition: all 50ms linear;

			&:hover {
				border-color: rgba(91, 91, 91, 0.9);

				.icon {
					svg {
						fill: var(--color-font);
					}
				}
			}

			&:focus-within {
				border-color: rgba(91, 91, 91, 0.9);
				.icon {
					svg {
						fill: var(--color-font);
					}
				}
			}

			input {
				width: 300px;
				height: 30px;
				background-color: transparent;
				border: 0px;
				outline: 0;
				padding-right: 10px;
				color: var(--color-font);

				@media (max-width: $nav-breakpoint-4) {
					width: 200px;
				}
			}

			.icon {
				display: block;
				padding-right: 10px;
				svg {
					height: 15px;
				}
			}
		}
	}

	.containerRight {
		justify-content: flex-end;
		padding-right: 50px;

		@media (max-width: $nav-breakpoint-2) {
			grid-row: 1;
		}

		@media (max-width: $nav-breakpoint-4) {
			padding-right: 20px;
		}

		.themeSwitch {
			svg {
				transition: all 50ms linear;
				height: 24px;
				cursor: pointer;
				animation-duration: 150ms;
				animation-timing-function: linear;
				animation-iteration-count: 1;

				animation-direction: normal;
				&:hover {
					fill: var(--color-font);
				}
			}
		}
	}

	svg {
		aspect-ratio: 1;
		fill: var(--color-svg-nav);
	}

	@keyframes spinThemeSwitch {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(-180deg);
		}
	}
}