.navigation {
	line-height: 1;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);

	@media (min-width: /* --brk-tablet */ 675px) {
		padding: var(--space-sm);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	@media (min-width: /* --brk-md-desktop */ 1300px) {
		display: block;
		border-bottom: none;
		/*border-right: 1px solid var(--color-border);*/
		background-color: transparent;
	}

	nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-md);
		padding: var(--space-sm);

		@media (min-width: /* --brk-md-desktop */ 1300px) {
			flex-direction: column;
			background-color: var(--color-surface);
			margin-top: var(--space-sm);
		}
	}

	.logo {
		display: block;
		background-color: var(--color-bg-alt);
		font-family: var(--font-family-brand);
		font-size: var(--font-size-lg);
		font-weight: 600;
		color: var(--color-text);
		text-decoration: none;
		padding: var(--space-sm);

		@media (min-width: /* --brk-tablet */ 675px) {
			padding: 3px;
		}
	}

	/*.nav-link {
        font-size: var(--font-size-base);
        color: var(--color-text);
        text-decoration: none;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
    }*/

	.nav-link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
	}

	.nav-notifications-badge {
		min-width: 1.25rem;
		height: 1.25rem;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--color-link);
		color: var(--color-bg);
		font-size: var(--font-size-xs);
		line-height: 1;
		padding: 0 var(--space-xs);
	}

	.nav-notifications-badge:empty {
		display: none;
	}

	.nav-link:hover {
		background-color: var(--color-bg);
		color: var(--color-link);
	}
}