.toc {
    &,
    ol { counter-reset: item; }

    &,
    li { padding-left: 0; }

    &:before {
        @extend .h5;
        content: 'Contents';
        font-size: $font-size-base;
        display: block;
        margin-top: 0;
    }

    li,
    ol,
    ul { margin: 0; }

    li {
        display: block;
    }

    > li {
        // custom numbers
        &:before {
            content: counters(item, '.') '. ';
            counter-increment: item;
            margin-right: $spacer / 4;
            color: $brand-main-gray-light;
            width: 1rem;
            display: inline-block;
        }
    }
}

// output by Kramdown

/* stylelint-disable selector-no-id  */
#markdown-toc,
.section-nav {
    @extend .toc;
}

/* stylelint-enable  */