nav.main.menu
{
	position: sticky;
	top: 0;

	background: var(--primary-gradient);
	color: var(--background);

	z-index: 2;

	.floating
	{
		justify-content: flex-start;
	}
	.floating[data-placement="left-start"]
	{
		justify-content: flex-end;
	}

	> ul
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		margin: 0;
		padding: 0;

		list-style: none;

		> li
		{
			margin: 0;
			padding: 0;

			> a
			{
				transition: background 0.2s ease;
				display: block;

				padding: 0.75em 1em;

				background: transparent;
				color: var(--background);

				text-align: center;
				text-decoration: none;
				cursor: pointer;

				&:hover
				{
					background: var(--menu-hover);
				}

				&.active
				{
					background: var(--menu-active);
				}

				svg
				{ // Icon style.
					display: inline-block;
					margin-top: -0.2em;
					margin-right: 0.2em;
					vertical-align: middle;
				}
			}
		}
	}


	.submenu.card
	{
		box-shadow: 0 0 0.15em 0 var(--foreground-shadow);
		border: none;
		background: var(--primary-gradient);

		.submenu
		{
			> .item
			{
				color: var(--background);

				&:hover
				{
					background: var(--menu-hover);
				}

				&.active
				{
					background: var(--menu-active);
				}
			}
		}
	}
}