$footerMenuType: 'columns';
// $footerMenuType: 'linear';

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-navbar {
	display: flex;
	flex-direction: column;
	gap: $sp-4;
	> li {
		> .menu-item {
			width: 100%;
			padding: $sp-3 0;
			color: $text-color;
			text-decoration: none;

			.ico-start { margin-right: $sp-1;}
			.ico-end { vertical-align: 0;}

			&:hover,
			&:focus,
			&.show {
				color: $text-color;
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}

		&.is-active > .menu-item {
			text-decoration: underline;
			text-decoration-thickness: 1px;
		}
	}
}

@if $footerMenuType == 'columns' {
	.menu-footer {
		> li {
			> a,
			> span {
				display: inline-block;
				margin-bottom: $sp-1;
			}
			> a {
				color: $text-color;
				text-decoration: none;
				@include hover() {
					color: $text-color;
					text-decoration: underline;
					text-decoration-thickness: 1px;
				}
			}

			> span {
				color: $co-gray-40;
			}

			&.is-active > a {
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}

		&-2 {
			li {
				position: relative;
				padding-left: $sp-3;
				&:after {
					content: '•';
					position: absolute;
					left: 0;
					top: 0;
					color: $co-gray-40;
				}
			}
		}
	}

	.footer-title,
	.menu-footer-1 > li > a,
	.menu-footer-1 > li > span {
		font-size: $font-size-large;
		margin-bottom: $sp-3;
	}
	.menu-footer-2 {
		margin-bottom: $sp-3;
	}
}

@if $footerMenuType == 'linear' {
	.menu-footer {
		ul, li { display: inline;}

		li {
			position: relative;
			&:before {
				content: "•";
				margin-left: $sp-1;
				margin-right: $sp-2;
				color: $co-gray-40;
			}
		}

		a,
		span {
			display: inline-block;
			margin-bottom: $sp-2;
		}

		a {
			color: $text-color;
			text-decoration: none;
			@include hover() {
				color: $text-color;
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}

		span {
			color: $co-gray-40;
		}

		&-1 {
			> li:first-child:before { display: none;}
		}
	}
}

.menu-sitemap {
	> li > a,
	> li > span {
		display: inline-block;
		color: $text-color;
	}

	> li > a {
		text-decoration: none;
		@include hover() {
			color: $co-alpha;
		}
	}

	> li > span { color: $co-gray-40; }

	&-1 {
		border-bottom: 1px solid $co-gray-80;
		> li {
			border-bottom: 1px solid $co-gray-80;
			margin-bottom: -1px;
		}

		> li > a,
		> li > span {
			font-size: $font-size-large;
			padding: $sp-4 0;
		}
	}

	&-2,
	&-3 {
		border-top: 1px solid $co-gray-80;
		> li {
			position: relative;
			margin-bottom: -1px;
			border-bottom: 1px solid $co-gray-80;
			&:last-child { border-bottom: none;}
			&:first-child { border-top: none;}

			> a,
			> span {
				padding: $sp-2 0;
			}

			> a {
				&:after {
					content:"";
					position: absolute;
					display: block;
					top: 1em;
					right: .3rem;
					width: .8rem;
					height: .8rem;
					border-right: 2px solid $co-gray-40;
					border-top: 2px solid $co-gray-40;
					transform: rotate(45deg);
				}
				@include hover() {
					&:after { border-color: $co-alpha;}
				}
			}
		}
	}

	&-3 {
		padding-left: $sp-4;
	}
}


@include mediaQ(bpMax) {
	// reset bs & popper (dropdown-menu)
	.menu.menu-navbar {
		> li {
			> .menu-item {
				// display: flex;
				// align-items: center;
				padding: $sp-1 0;
				// .ico { margin-left: auto;}
			}
		}

		li.dropdown,
		li.dropend {
			> .menu-item,
			> .dropdown-item {
				position: relative;
				padding-right: 1em;
				&:after {
					content:"+";
					position: absolute;
					right: 0;
					color: $co-gray-40;
					font-family: $font-family-monospace;
					transform: scale(1.25);
					transform-origin: 100% 50%;
				}
			}

			> .menu-item.show,
			> .dropdown-item.show {
				&:after { content:"-";}
			}
		}

		.dropdown-menu {
			position: static !important;
			margin: 0 !important;
			transform: none !important;
			padding: 0;
			padding-left: $sp-3;
			border: none;
			border-radius: 0;
			background-color: transparent;
			box-shadow: none;

			> li:after {
				display: none;
			}

			.dropdown-menu {
				padding-top: $sp-1;
			}

			.dropdown-item {
				padding: $sp-2 0;
			}
		}
	}
}

@include mediaQ(xs) {
	.menu-sitemap {
		&-1 {
			display: flex;
			flex-wrap: wrap;

			> li {
				width: 50%;
				padding-right: $sp-6;
			}
		}
	}
}

@if $footerMenuType == 'columns' {
	@include mediaQ(md) {
		.menu-footer {
			&-1 {
				display: grid;
				gap: 0 $sp-6;
				grid-template-columns: 1fr 1fr;
			}
		}
	}
}

@include mediaQ(lg) {
	.menu-sitemap {
		&-1 {
			> li { width: 33.333%;}
		}
		&-2 {
			border-top: none;
		}
	}
}

@include mediaQ(bp) {
	.menu-navbar {
		flex-direction: row;
		align-items: center;
		gap: $sp-5;

		.dropdown-menu > li + li {
			position: relative;
			&:after {
				content:"";
				position: absolute;
				top: 0;
				left: $sp-4;
				right: $sp-4;
				border-bottom: 1px solid $co-gray-80;
			}
		}
	}
}