.docs-site-nav {
	display: flex;
	flex-direction: column;
	flex: 1;
	grid-column: 1 / -1;
	grid-row: 1;

	ul {
		list-style: none;
		font-size: var(--step-1);
		margin-top: 1rem;
		margin-block-start: 1rem;
		margin-bottom: 2rem;
		margin-block-end: 2rem;

		@media all and (min-width: 1024px) {
			font-size: var(--step-0);
			margin-top: 0;
			margin-block-start: 0;
			margin-bottom: 0;
			margin-block-end: 0;
			align-items: center;
			display: flex;
		}
	}

	.flexer {
		display: flex;
		justify-self: flex-end;
		align-self: flex-end;
	}

	a:not(.c-btn) {
		text-decoration: none;
		color: inherit;
		transition: color 0.2s linear;
		display: block;

		&:hover {
			color: var(--link-color);
		}
	}

	a:not(.c-btn)[aria-current="page"],
	a:not(.c-btn)[aria-current="true"] {
		color: var(--link-color);
		text-decoration: none;
		font-weight: 500;
	}
}

.docs-nav-panel {
	@media all and (min-width: 1024px) {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	&[data-open="false"] {
		display: none;
	}

	&[data-open="true"] {
		@media all and (min-width: 1024px) {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
}

.docs-nav-panel .mobile-only {
	@media all and (min-width: 1024px) {
		display: none;
	}
}

.docs-site-nav-toggle {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	margin-right: -10px;
	margin-inline-start: 0.5rem;
	margin-inline-end: -10px;

	svg {
		width: 40px;
		height: 40px;
		color: var(--headings-color);
		fill: none;
		stroke-width: 4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	#ham-top,
	#ham-middle,
	#ham-bottom {
		transition: all 0.2s linear;
	}

	#ham-top {
		transform-origin: 30px 37px;
	}

	#ham-bottom {
		transform-origin: 30px 63px;
	}

	&[aria-expanded="true"] {
		#ham-middle {
			opacity: 0;
		}

		#ham-top {
			transform: rotate(41deg);
		}

		#ham-bottom {
			transform: rotate(-41deg);
		}
	}
}

@media all and (min-width: 1024px) {
	.docs-site-nav {
		flex-direction: row;
		grid-column: auto;
		gap: 2rem;

		ul {
			display: flex;
			gap: 2rem;
			font-size: var(--step-0);

			li {
				margin-bottom: 0;
				margin-block-end: 0;
			}
		}

		.flexer {
			order: 1;
		}
	}
}
