#sidebar {
	@include coat-auto-responsive(sidebar-nav);

	@media #{$medium} {
		nav {
			position: sticky;
			top: 7em;
			z-index: 2;
			display: inline-flex;
			margin: 0;
			width: 100%;
		}
		nav a {
			display: inline-block;
			white-space: nowrap;
			text-decoration: none;
			@include coat-auto-responsive(sidebar-nav-link);
			&:hover {
				@include coat-auto-responsive(sidebar-nav-link, hover);
			}
		}

		nav li.active > a {
			@include coat-auto-responsive(sidebar-nav-link, active);
			&:hover {
				@include coat-auto-responsive(sidebar-nav-link, active-hover);
			}
		}
		nav a + a {
			margin: 0;
			margin-left: calc(#{coat(sidebar-nav, padding)} / 2);
		}
		nav a + ul {
			margin-top: 0;
		}
		nav > ul {
			display: flex;
			flex-direction: column;
			@include coat-auto-responsive(sidebar-nav);
		}
		nav > ul li {
			position: relative;
			margin: 0;
			&::before {
				content: none;
			}
		}

		nav > ul ul {
			padding-left: calc(#{coat(padding)} / 2);
		}
		nav > ul ul li {
			a {
				@include coat-auto-responsive(sidebar-nav-link-sub);
				&:hover {
					@include coat-auto-responsive(sidebar-nav-link-sub, hover);
				}
			}
			&.active > a {
				@include coat-auto-responsive(sidebar-nav-link-sub, active);
				&:hover {
					@include coat-auto-responsive(sidebar-nav-link-sub, active-hover);
				}
			}
		}
		/* Spacing */
		nav li {
			padding: 0;
			& + li {
				margin: 0;
			}
			li + li {
				margin: 0;
			}
		}
	}
}