#aside {
    grid-area: aside;
    padding: 20px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    border-radius: 15px;
    background-color: white;
    width: 250px;
    height: fit-content;
}

#asideNav {
    display: grid;
    row-gap: 15px;
}

.asideNavLink {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background-color: #ECF1F5;
    border-radius: 6px;
    border: 1px solid transparent;
}

.asideNavLink:hover,
.asideNavLink.active {
    box-shadow: var(--hover-shadow);
}

/* role-restricted links hidden by default; revealed based on html[data-role] */
.asideNavLink[data-role] {
    display: none;
}

html[data-role="admin"] .asideNavLink[data-role="admin"],
html[data-role="admin"] .asideNavLink[data-role="project_manager"],
html[data-role="project_manager"] .asideNavLink[data-role="project_manager"] {
    display: flex;
}

.asideNavLinkIcon {
    width: 20px;
    height: 20px;
}

.asideNavLinkLabel {

}

@media (max-width: 800px) {
    #aside {
        width: 100%;
    }
}