.logo svg {
	width: 35px;
}

#side-bar {
	@media (min-width: theme("screens.lg")) {
		@apply text-yellow fixed flex h-full w-[100px] flex-col items-center justify-between bg-blue-400 pb-10 pt-5;
	}
	.socials {
		a {
			path {
				transition: all 0.3s ease;
			}
		}
		a:hover {
			path {
				fill: theme("colors.white");
			}
		}
	}
}

#menu {
	transform: translateX(-100%);
	transition: all 0.9s ease;
	@apply bg-yellow fixed left-0 top-0 z-0 flex h-full w-full flex-col items-center justify-center text-center font-medium text-blue-500;
	@media (min-width: theme("screens.lg")) {
		@apply lg:pl-[100px];
	}
	.top,
	.bottom {
		@screen lg {
			flex: 1;
		}
	}
	.bottom {
		@apply absolute bottom-0 mb-6;
		@screen lg {
			position: relative;
			margin-bottom: 0;
		}
	}
}
#primary-menu-container {
	@apply flex grow items-center;
	transform: translateY(-20px);
}
#primary-menu {
	@apply flex grow flex-col gap-[60px] text-[30px] font-medium uppercase;
	li {
		opacity: 0;
		transform: translateY(-5px);
		transition: all 0.6s ease;

		a {
			letter-spacing: 0px;
			transition: all 0.3s ease;
			position: relative;
			padding-bottom: 10px;
			&:after {
				transition: all 0.3s ease;
				position: absolute;
				left: 50%;
				bottom: 0px;
				transform: translate(-50%, 100%);
				content: "";
				background-color: theme("colors.green");
				width: 30px;
				height: 15px;
				border-bottom-left-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		}

		&.current-menu-item,
		&:hover {
			a {
				letter-spacing: 1px;
				&:after {
					background-color: theme("colors.red");
				}
			}
		}
	}
}
#socials-menu {
	@apply mb-5 flex justify-center gap-10;

	a {
		opacity: 0;
		transform: translateY(0px);
		transition: all 0.3s ease;
	}

	@media (min-width: theme("screens.lg")) {
		@apply hidden;
	}
	path {
		fill: theme("colors.blue.500");
	}
}

#footer-menu {
	@apply flex flex-1 flex-wrap gap-1 text-blue-400;

	@media (min-width: theme("screens.lg")) {
		@apply flex-col flex-wrap gap-1;
	}

	li {
		opacity: 0;
		transform: translateY(-5px);
		transition: all 0.6s ease;
		color: theme("colors.green");

		a {
			line-height: 1;
			transition: all 0.3s ease;
			position: relative;
			font-size: 16px;
			line-height: 1.2;

			&:hover {
				color: theme("colors.red");
			}

			@screen md {
				&:after {
					display: none;
				}
			}
		}

		&:not(:last-child) {
			position: relative;
			a:after {
				position: absolute;
				right: 0;
				top: 0;
				width: 12px;
				height: 12px;
				content: "·";
				transform: translateX(100%);
			}
		}
	}
}

.js-menu-open {
	#menu {
		transform: translateX(0%);
	}
	#primary-menu {
		li {
			opacity: 1;
			transform: translateY(0px);
			&:nth-child(1) {
				transition-delay: 0.6s;
			}
			&:nth-child(2) {
				transition-delay: 0.8s;
			}
			&:nth-child(3) {
				transition-delay: 1s;
			}
			&:nth-child(4) {
				transition-delay: 1.2s;
			}
			&:nth-child(5) {
				transition-delay: 1.4s;
			}
		}
	}
	#socials-menu {
		a {
			opacity: 1;
			transform: translateY(0px);

			&:nth-child(1) {
				transition-delay: 1.4s;
			}
			&:nth-child(2) {
				transition-delay: 1.6s;
			}
			&:nth-child(3) {
				transition-delay: 1.8s;
			}
		}
	}
	#footer-menu {
		li {
			opacity: 1;
			transform: translateY(0px);

			&:nth-child(1) {
				transition-delay: 2s;
			}
			&:nth-child(2) {
				transition-delay: 2.2s;
			}

			@screen lg {
				&:nth-child(1) {
					transition-delay: 1.4s;
				}
				&:nth-child(2) {
					transition-delay: 1.6s;
				}
			}
		}
	}
}
