.long-form__toc {
    --toc-dark: theme('colors.neutral.900');
    --toc-silver: theme('colors.neutral.300');
}

.long-form__toc-title {
    @apply text-xl mb-2 block;
}

.long-form__toc > li {
    @apply relative px-0 py-3;

    a:is(.active) {
        @apply underline underline-offset-4;
    }

    &:not(:last-child)::before {
        @apply absolute block h-full bg-[var(--toc-dark)];

        top: 25px;
        left: 8px;
        width: 2px;
        content: "";
    }

    > a {
        @apply block text-base ps-8 font-semibold;
    }

    > a::after {
        @apply bg-[var(--toc-dark)] absolute inline-block rounded-full w-4 h-4;

        top: 18px;
        left: 1px;
        content: "";
    }

    &.active ~ ::before,
    &.active ~ li a::after {
        @apply bg-[var(--toc-silver)];
    }

    ol {
        @apply mt-2;

        a {
            @apply p-2 ps-8 text-sm;
        }
    }
}

.region__wrap .region--content-suffix .region__container {
    @apply lg:sticky lg:top-8;
}

body:has(.toolbar-menu-administration) .region__wrap .region--content-suffix .region__container {
    @apply lg:top-16;
}