explainegy-nextjs/styles/Nav.module.scss

@import "variables.scss";
.nav {
	background-color: var(--color-background-nav);
	height: 60px;
	margin-bottom: 50px;
	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;
		}
	}

	.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);
		}
	}
}