.header {
	height: rem(60px);
	border-bottom: rem(1px) solid
		light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.link {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: var(--mantine-spacing-md);
	padding-right: var(--mantine-spacing-md);
	text-decoration: none;
	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
	font-weight: 500;
	font-size: var(--mantine-font-size-sm);

	@media (max-width: $mantine-breakpoint-sm) {
		height: rem(42px);
		width: 100%;
	}

	@mixin hover {
		background-color: light-dark(
			var(--mantine-color-gray-0),
			var(--mantine-color-dark-6)
		);
	}
}