// The sidebar spans the full height of the workspace (the grid otherwise
// start-aligns it to its own content), so the menu scrolls away with the page
// while the footer below can stick.
.portal-sidebar {
    align-self: stretch;
    padding: 34px 22px 28px;
    background: $portal-soft;
    border-right: 1px solid rgba($portal-line, 0.55);
}
.portal-sidebar__footer {
    position: sticky;
    bottom: 28px;
    margin-top: auto;
}

.portal-sidebar__footer .avatar--small {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 10px;
}

.portal-menu {
    gap: 30px;
}

.portal-menu__group h2 {
    margin: 0 0 14px;
    color: $portal-muted-light;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.portal-menu__items {
    gap: 4px;
}

.portal-menu__item {
    min-height: 37px;
    padding: 8px 12px;
    border-radius: 8px;
    color: $portal-menu-text;
    font-size: 14px;
    line-height: 1.2;
}

.portal-menu__item.is-active {
    background: $portal-white;
    color: $portal-black;
    font-weight: 700;
}

.portal-menu-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    object-fit: contain;
}

.icon-placeholder {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid $portal-subtle-line;
    border-radius: 8px;
    background: $portal-icon-soft;
}

.icon-placeholder--compact {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    border: 0;
    border-radius: 4px;
    background: $portal-icon;
}

.icon-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}