.popup-navigation {
	/* Navigation. */
	nav {
		--navigation--link--padding-v: var(--spacing-4);
		--navigation--link--padding-h: var(--spacing-5);

		margin: auto calc(var(--navigation--link--padding-h) * -1);
		font-size: var(--font-small);
		font-weight: 450;
	}

	nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Link. */
	a.nav-link,
	button.nav-link {
		position: relative;
		display: flex;
		padding: 0;
		padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h);
		border: 0;
		border-radius: var(--radius-2);
		background-color: transparent;
		color: var(--color-contrast);
		text-decoration: none;
		transition: background-color .2s ease, color .2s ease;

		> .label {
			transition: transform .2s ease;
		}
	}

	li:hover > a.nav-link,
	li:hover > button.nav-link,
	a.nav-link:hover,
	button.nav-link:hover {
		background-color: var(--color-background-200);
		color: var(--color-contrast);

		> .label {
			transform: translateX(var(--spacing-1));
		}

		&::before {
			transform: translateX(2px);
		}
	}

	.nav-link-current {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			left: calc(var(--navigation--link--padding-h) + 4px);
			width: 3px;
			height: 1lh;
			border-radius: 3px;
			background-color: var(--ghost-accent-color);
			translate: 0 -50%;
			content: "";
			transition: transform .2s ease;
		}
	}

	/* Separator. */
	.nav-separator {
		margin-right: var(--navigation--link--padding-h);
		margin-left: var(--navigation--link--padding-h);
		border-top: 1px solid var(--color-border);

		&:not(:first-child) {
			margin-top: var(--spacing-5);
		}

		&:not(:last-child) {
			margin-bottom: var(--spacing-5);
		}
	}

	/* Section. */
	.nav-section:not(:first-child) {
		margin-top: var(--spacing-5);
	}

	.nav-section-link {
		color: var(--color-secondary);
	}

	span.nav-section-link {
		display: block;
		padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h);
	}

	/* Collapse toggle. */
	.collapse-toggle {
		--collapse--icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L13 10L8 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --collapse--icon--rotate: 0deg;
    --collapse-open--icon--rotate: 90deg;

		gap: var(--spacing-6);

		/* Icon. */
		&::after {
			margin-top: calc(0.5lh - var(--collapse--icon--size) * 0.5);
			margin-left: auto;
			color: var(--color-mute);
			opacity: 0;
			transition: transform .2s ease, opacity .15s ease;
		}

		&[aria-expanded="true"]::after,
		&:hover::after,
		&:focus-visible::after {
			opacity: 1;
		}
	}

	/* Collapse. */
	.collapse {
		ul {
			min-height: max-content;
			margin-left: -2px;
			padding-left: calc(var(--spacing-4) + 4px);
			opacity: 0;
			transform: translateY(-40%);
			transition: transform .3s ease, filter .35s ease, opacity .35s ease;
			transform-origin: left;
			filter: blur(4px);
		}

		li:first-child {
			padding-top: var(--spacing-1);
		}

		.nav-link {
			outline-offset: -2px;
		}
	}

	.collapse-toggle[aria-expanded="true"] ~ .collapse-ready,
	.collapse-toggle[aria-expanded="true"] ~ .collapse:not(.collapse-ready, :has(.nav-link-current)) {
		> ul {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}
}