.btn-nav-toggler-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	@media (max-width: calc(theme("screens.lg") - 1px)) {
		position: fixed;
		top: 20px;
		right: 20px;
		width: 35px;
		height: 35px;
	}
	@media (min-width: theme("screens.lg")) {
		position: relative;
		width: 40px;
		height: 100px;
	}

	&:before {
		content: "";
		position: absolute;
		background-color: theme("colors.white");
		opacity: 0.5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		@media (min-width: theme("screens.lg")) {
			background-color: transparent;
		}
	}
}
.btn-nav-toggler {
	width: 22px;
	height: 0px;
	position: relative;
	top: 0%;
	left: 0%;
	transition: all 0.3s ease;
	@media (min-width: theme("screens.lg")) {
		width: 40px;

		margin-bottom: 16px;
	}
	.icon {
		transition-duration: 0.5s;
		position: relative;
		background-color: theme("colors.blue.400");
		height: 2px;
		width: 22px;
		@media (min-width: theme("screens.lg")) {
			background-color: theme("colors.yellow");
			width: 40px;
		}

		&:before,
		&:after {
			transition-duration: 0.5s;
			position: absolute;
			background-color: theme("colors.blue.400");
			height: 2px;
			width: 22px;
			@media (min-width: theme("screens.lg")) {
				background-color: theme("colors.yellow");
				width: 40px;
			}
			content: "";
		}

		&:before {
			top: -8px;
			@media (min-width: theme("screens.lg")) {
				top: -12px;
			}
			left: 0;
		}

		&:after {
			top: 8px;
			@media (min-width: theme("screens.lg")) {
				top: 12px;
			}
			left: 0;
		}
	}

	&:hover {
		cursor: pointer;

		.icon {
			&:before {
				top: -10px;
			}

			&:after {
				top: 10px;
			}
		}
	}
}

body.js-menu-open {

	.btn-nav-toggler {
		transform: rotate(90deg);

		.icon {
			background-color: transparent;

			&:before {
				top: 0;
				transform: rotate(45deg);
			}

			&:after {
				top: 0;
				transform: rotate(-45deg);
			}
		}
	}
}

.btn-primary {
	@apply text-red inline-flex items-center justify-center gap-[6px] font-normal;

	transition: none;

	span:first-child svg {
		height: 16px;
	}
	span:nth-child(2) {
		@media (min-width: theme("screens.lg")) {
			margin-top: -3px;
		}
	}
	.icon {
		svg {
			height: 12px;
		}
		svg:first-child {
			display: block;
		}
		svg:last-child {
			display: none;
		}
	}

	&:hover {
		color: theme("colors.orange");
		path {
			fill: theme("colors.orange");
		}
		.icon {
			svg:first-child {
				display: none;
			}
			svg:last-child {
				display: block;
			}
		}
	}
}

.btn-collapse {
	@apply text-red inline-flex items-center justify-center gap-[6px] font-normal;

	transition: none;

	span:first-child svg {
		height: 16px;
	}
	span:nth-child(2) {
		@media (min-width: theme("screens.lg")) {
			margin-top: -3px;
		}
	}
	.icon {
		margin-top: 2px;
		svg {
			height: 14px;
			transform-origin: center;
			transform: rotate(180deg);
			transition: all 0.3s ease;
		}
	}

	&:hover {
		color: theme("colors.orange");
		path {
			fill: theme("colors.orange");
		}
	}
}

.btn-backtotop {
	@apply invisible  fixed bottom-10 right-10 z-50 hidden h-[80px] w-16 cursor-pointer opacity-0 transition-all duration-300 ease-out lg:block;
	@apply data-[open=true]:visible data-[open=true]:opacity-100;

	svg {
		@apply absolute left-1/2  top-0;
	}
	path {
		transition: fill 0.3s ease;
	}
	&:hover {
		.hover {
			fill: theme("colors.red");
		}
	}
}
