#footer {
	position: relative;
	@include coat-auto(footer-nav);

	nav {
		z-index: 2;
		display: inline-flex;
		justify-content: center;
		width: 100%;
		margin: 0;
	}
	nav a {
		display: block;
		@include coat-auto-responsive(footer-nav-link);
		white-space: nowrap;
		text-decoration: none;

		&:hover {
			@include coat-auto-responsive(footer-nav-link, hover);
		}
	}
	nav li.active > a {
		@include coat-auto-responsive(footer-nav-link, active);
		&:hover {
			@include coat-auto-responsive(footer-nav-link, active-hover);
		}
	}

	nav > ul {
		width: 100%;
		@include coat-auto(footer-nav-list);
		@media #{$medium} {
			padding: coat(footer-nav, padding);
			display: flex;
			justify-content: center;
		}
		ul {
			padding-left: 0;
		}
	}
	nav > ul li {
		position: relative;
		margin: 0;
		a {
			border-radius: coat(footer-nav, border-radius);
		}

		&::before {
			content: none;
		}
	}

	nav > ul > li > ul {
		margin: 0;
	}
	nav > ul ul li {
		a {
			@include coat-auto-responsive(footer-nav-link-sub);
			&:hover {
				@include coat-auto-responsive(footer-nav-link-sub, hover);
			}
		}
		&.active a {
			@include coat-auto-responsive(footer-nav-link-sub, active);
			&:hover {
				@include coat-auto-responsive(footer-nav-link-sub, active-hover);
			}
			@media #{$medium} {
				&:hover {
					@include coat-auto(footer-nav-link-sub, desktop-active-hover);
				}
			}
		}
	}
	/* Spacing */
	nav li {
		padding: 0;
		& + li {
			margin: 0;
		}
		li + li {
			margin: 0;
		}
	}
}