/* TocRail — organism. Spec: component-specs/toc-rail.md */

.toc-rail {
    position: sticky;
    top: calc(64px + var(--page-top-padding, 24px));
    align-self: start;
    min-width: 250px;
    max-height: calc(100vh - 64px - var(--page-top-padding, 24px));
    overflow-y: auto;
    flex-shrink: 0;
    /* Level with the page heading area (compensates MarkdownActions' 24px). */
    padding-top: 24px;
}

@media (width <= 1024px) {
    .toc-rail {
        display: none;
    }
}

.toc-rail-container {
    position: relative;
    padding-block: 4px;
    padding-left: 16px;
}

.toc-rail-progress {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 3px;
    width: 2px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    overflow: hidden;
}

.toc-rail-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--text-primary);
    transform: scaleY(var(--toc-progress, 0));
    transform-origin: top;
}

.toc-rail-list {
    display: flex;
    flex-direction: column;
    gap: calc(2px + 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-rail-item {
    margin: 0;
    margin-left: calc(var(--toc-level, 0) * 12px);
}

.toc-rail-link {
    display: block;
    padding-block: 4px;
    font-size: var(--text-mini-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.toc-rail-item[data-active='true'] .toc-rail-link {
    color: var(--text-primary);
}