/* Header */
.header {
	border-bottom: light-dark(1px solid #edf0f3, 1px solid #151e34);
}

.inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 64px;
}

.burger {
	@media (--gt-sm) {
		display: none;
	}
}

.links {
	padding-top: var(--mantine-spacing-lg);
	height: 72px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	@media (--lt-sm) {
		display: none;
	}
}

.link {
	font-size: var(--mantine-font-size-sm);

	border-bottom: 2px solid transparent;
	transition:
		border-color 100ms ease,
		color 100ms ease;
	text-decoration: none;

	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));

	@media (--gt-sm) {
		padding: 27px var(--mantine-spacing-sm);

		&:hover {
			text-decoration: none;
			color: var(--mantine-color-purple);
		}
	}
}

.active {
	font-weight: 700;

	color: var(--mantine-color-purple);

	@media (--gt-sm) {
		color: var(--mantine-color-purple);
		border-bottom-color: var(--mantine-color-purple);
	}
}

.mobile-links {
	height: 100vh;
	padding: 24px 16px;
	align-content: center;

	background-color: light-dark(var(--mantine-color-background-1), var(--mantine-color-background-5));
}

.mobile-link {
	display: flex;

	&:hover {
		color: var(--mantine-color-purple-0);
	}
}
