/* Based on https://web.dev/articles/website-navigation, as in helpdesk. */
.nav {
    display: flex;
    flex-direction: column;
}

/* Headings and text are inset like a button's label, so they line up with the links' icons. */
.nav__heading {
    margin: 0 0 var(--spacing-xs);
    padding-inline: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-on-surface-muted);
}

.nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    width: 100%;
    justify-content: flex-start;
}