.community-nav-links { padding: 0 var(--base); margin-top: var(--base); border-top: 1px solid var(--theme-elevation-100); padding-top: var(--base); &__header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-elevation-500); } &__icon { font-size: 14px; } &__title { flex: 1; } &__list { display: flex; flex-direction: column; gap: 2px; } &__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--theme-elevation-800); font-size: 13px; transition: all 0.15s ease; &:hover { background-color: var(--theme-elevation-50); color: var(--theme-elevation-900); } &--active { background-color: var(--theme-elevation-100); color: var(--theme-text); font-weight: 500; &:hover { background-color: var(--theme-elevation-150); } } } &__link-icon { font-size: 16px; width: 20px; text-align: center; } &__link-label { flex: 1; } } // Dark mode adjustments [data-theme='dark'] { .community-nav-links { &__link { &:hover { background-color: var(--theme-elevation-100); } &--active { background-color: var(--theme-elevation-150); &:hover { background-color: var(--theme-elevation-200); } } } } }