.sidebar {
    height: calc(var(--spacing-unit) * 64);
    overflow: auto;
    position: sticky;
    top: calc(var(--navbar-height) + var(--page-content-py));
}

.sidebar__item {
    border-left: 2px solid var(--color-background);
    padding: calc(var(--spacing-unit) * 0.5) 0 calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    transition: all 0.25s ease;
}

.sidebar__item:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    background-clip: text;
    border-left: 2px solid var(--color-primary);
    color: transparent;
    box-shadow: var(--box-shadow);
}

.sidebar::-webkit-scrollbar {
    width: calc(var(--spacing-unit) * 0.5);
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: calc(var(--spacing-unit) * 0.75);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--color-primary-alpha);
    border-radius: calc(var(--spacing-unit) * 0.5);
    transition: all 0.25s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .page__content .ms-3 {
        margin-left: 0 !important;
    }
}

.sidebar__item--active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    background-clip: text;
    border-left: 2px solid var(--color-primary);
    color: transparent;
}