/* LeftSidebar */

.wrapper {
	position: sticky;
	top: 40px;
	display: flex;
	flex-direction: column;
	width: 240px;
	padding: 24px 0;

	border-radius: 4px;

	border: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));

	@media (--lt-sm) {
		top: 0;
		padding-top: 0;
		border: none;
		width: 100%;
	}
}

.route-item {
	display: flex;
	border-radius: 0;
	padding: 10px 24px;
	text-decoration: none;

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

	&[data-active="true"] {
		color: var(--mantine-color-purple);
	}

	@media (--gt-sm) {
		&[data-active="true"] {
			border-left: 1px solid var(--mantine-color-purple);
		}

		&:hover {
			border-left: 1px solid var(--mantine-color-purple);
		}
	}
}

.sections {
	display: flex;
	flex-direction: column;
	padding: 8px 24px;
}

.section-item {
	align-items: center;
	padding: 8px 16px;
	margin-bottom: 4px;
	border-radius: 4px;
	text-decoration: none;

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

	&[data-active="true"] {
		color: var(--mantine-color-purple);
		background-color: var(--mantine-color-purpleHover-0);
	}
}
