.link {
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	text-decoration: none;
	font-size: var(--mantine-font-size-sm);
	color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
	padding: rem(8px) rem(12px);
	border-radius: var(--mantine-radius-sm);
	font-weight: 500;

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

		.linkIcon {
			color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
		}
	}

	&[data-active] {
		&,
		&:hover {
			background-color: var(--mantine-color-blue-light);
			color: var(--mantine-color-blue-light-color);

			.linkIcon {
				color: var(--mantine-color-blue-light-color);
			}
		}
	}
}

.linkIcon {
	color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
	margin-right: var(--mantine-spacing-sm);
	width: rem(25px);
	height: rem(25px);
	min-width: rem(25px);
}