.jex-article-toc {
    margin-block: var(--md-sys-spacing-xl);
    padding: var(--md-sys-spacing-lg);
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
}

.jex-article-toc.jex-article-toc--sidebar {
    max-height: calc(100vh - 50px);
    margin-block: 0;
    padding: var(--md-sys-spacing-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--md-sys-typescale-body-large-size);
    background: var(--md-sys-color-surface-container-lowest);
    border: 0;
    border-radius: 25px;
    box-shadow: var(--md-sys-elevation-1);
    scrollbar-gutter: stable;
}

.sidebar-inner-wrap:has(.jex-article-toc--sidebar) > .widget:has(> .wp-block-heading:empty) {
    display: none;
}

@media (min-width: 1025px) {
    .primary-sidebar .sidebar-inner-wrap:has(.jex-article-toc--sidebar) {
        position: sticky;
        top: 25px;
    }
}

.jex-article-toc__title {
    margin: 0 0 var(--md-sys-spacing-sm);
    font-family: var(--md-sys-typescale-title-large-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    color: var(--md-sys-color-on-surface);
}

.jex-article-toc__list {
    display: grid;
    gap: var(--md-sys-spacing-xs);
    margin: 0;
    padding-inline-start: var(--md-sys-spacing-lg);
}

.jex-article-toc__item {
    padding-inline-start: var(--md-sys-spacing-xs);
    color: var(--md-sys-color-on-surface-variant);
}

.jex-article-toc__link {
    display: inline-block;
    padding-block: var(--md-sys-spacing-xs);
    color: var(--md-sys-color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    border-radius: var(--md-sys-shape-corner-small);
}

.jex-article-toc__link:hover {
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
}

.jex-article-toc__link:focus-visible {
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.jex-article-toc-heading {
    scroll-margin-top: calc(var(--md-sys-spacing-xl) * 2);
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.jex-article-toc) {
        scroll-behavior: smooth;
    }
}

@media (max-width: 600px) {
    .jex-article-toc {
        margin-block: var(--md-sys-spacing-lg);
        padding: var(--md-sys-spacing-md);
        border-radius: var(--md-sys-shape-corner-medium);
    }

    .jex-article-toc__list {
        padding-inline-start: var(--md-sys-spacing-md);
    }

    .jex-article-toc__link {
        display: block;
        padding-block: var(--md-sys-spacing-sm);
    }
}