.sidebar {
	display: flex;
	height: 100svh;
	max-height: 100svh;
	flex-direction: column;
	background: var(--color-surface-page);
	border-right: var(--border);
}

.sidebar header > div {
	display: flex;
	padding: var(--space-l);
	flex-direction: column;
	gap: var(--space-l);
	border-bottom: var(--border);
}

.sidebar header strong {
	font-size: var(--size-step-2);
}

.sidebar header nav {
	border-bottom: var(--border);
}

.sidebar nav {
	display: flex;
	padding: var(--space-l);
	flex-direction: column;
	gap: var(--space-m);
}

.sidebar > nav {
	overflow-y: auto;
	align-self: stretch;
	flex: 1 0 0;
	min-block-size: 0;
	mask-image: linear-gradient(
		to bottom,
		transparent,
		#000 var(--space-l),
		#000 calc(100% - var(--space-l)),
		transparent
	);
}

.sidebar nav ul {
	padding: 0;
	list-style: none;
}

.sidebar footer {
	padding: var(--space-l);
	border-top: var(--border);
}