/**
 * @section Navbar Navigation
 */

@layer kelp.core {
	.navbar {
		--justify: center;
		--gap: var(--size-m);
		display: flex;
		column-gap: var(--gap);
		row-gap: calc(var(--gap) * 0.5);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--size-m);
		text-align: var(--justify);
	}

	.logo {
		--color: var(--color, var(--color-text-normal));
		--color-hover: var(--color-text-link);
		--decoration: none;
		--decoration-hover: none;
		font-weight: bold;
	}

	.menu {
		--gap: var(--size-m);
		display: flex;
		column-gap: var(--gap);
		row-gap: calc(var(--gap) * 0.5);
	}

	:is(.navbar, .menu) > ul {
		--gap: var(--size-m);
		display: flex;
		align-items: center;
		justify-content: var(--justify);
		column-gap: var(--gap);
		list-style-type: "";
		padding: 0;
		margin: 0;
	}

	.navbar,
	:not(.no-wrap) :is(.menu, .navbar > ul, .menu > ul) {
		flex-wrap: wrap;
	}

	.navbar a,
	.nav-collapse a {
		--decoration: none;
	}

	:is(.navbar, .menu) li:last-child .plain {
		margin-inline-end: calc(-1 * var(--padding-inline));
	}

	@media (max-width: 52em) {
		.navbar:not(.no-wrap) > * {
			flex-basis: 100%;
		}

		:not(.no-wrap) .menu {
			justify-content: var(--justify);
		}
	}
}