/* single toc list */
.toc-wrp {
    position: relative;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: min(3em, 10vw);
    margin-bottom: min(5em, 10vw);
}

.toc-wrp .toc-title {
    display: block;
    width: fit-content;
    font-family: var(--en);
    font-weight: 600;
    padding: 1em;
    position: absolute;
    top: 0;
    left: 1em;
    background-color: #fff;
    transform: translate(0, -50%);
    margin: 0;
}

.toc-list {
    padding: 2em 0 1em;
    position: relative;
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;

    counter-reset: number;
}

.toc-list li:not(.skip) {
    position: relative;
    padding-left: 2em;
}

.toc-list li:not(.skip):not(.is-child)::before {
    content: counter(number, decimal-leading-zero) '.';
    counter-increment: number;
    position: absolute;
    left: 0;
    font-size: .8em;
    line-height: 2;
    font-family: var(--en);
    font-weight: 600;
}

/* children */
.toc-list li.is-child {
    font-size: .95em;
    margin-left: 2em;
    padding-left: 1em;
    position: relative;
}

.toc-list li.is-child+li:not(.is-child) {
    margin-top: .5em;
}

.toc-list li.is-child::before {
    content: '';
    width: .35em;
    height: .35em;
    border-radius: 100%;
    background-color: var(--main_color);
    position: absolute;
    top: calc(50% - .125em);
    left: 0;
}

.toc-list li.is-child.is-child-numbered {
    padding-left: 2em;
}

.toc-list li.is-child.is-child-numbered::before {
    content: attr(data-child-number);
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    font-size: .8em;
    line-height: 2;
    font-family: var(--en);
    font-weight: 600;
    top: 0;
}

/* .toc-list::before {
    content: 'Explore this article';
    display: inline-block;
    width: fit-content;
    font-family: var(--en);
    font-weight: 600;
    padding: 1em;
    position: absolute;
    top: 0;
    left: 1em;
    background-color: #fff;
    transform: translate(0, -50%);
} */