/* ============================== */
/* counter                        */
/* ============================== */

.toc-progress{
font-size:13px;
opacity:.8;
margin:12px 0 4px 16px;
font-weight:500;
}

/* ============================== */
/* progress container             */
/* ============================== */

.toc-bar{
position:relative;
height:1px;
margin:10px 16px 14px 16px;
border-radius:4px;
overflow:visible;
background:var(--toc-bar-bg);
}

/* ============================== */
/* progress fill                  */
/* ============================== */

.toc-bar-fill{
height:100%;
width:0%;
background:var(--toc-bar-fill);
transition:width .35s ease;
border-radius:4px;
}

/* ============================== */
/* moving percent indicator       */
/* ============================== */

.toc-indicator{
position:absolute;
top:-18px;
left:0;
font-size:12px;
opacity:.75;
white-space:nowrap;
transform:translateX(-6px);
transition:left .35s ease;
pointer-events:none;
}

/* ============================== */
/* theme colors                   */
/* ============================== */

:root{

--toc-bar-bg:#e5e7eb;
--toc-bar-fill:#4ade80;

}

/* ZenoFusion Dark Mode */

html.zf-dark{

--toc-bar-bg:#1f2a38;
--toc-bar-fill:#4ade80;

}


/* ============================== */
/* toc links                      */
/* ============================== */

.mce-toc a{
transition:opacity .25s ease;
}

.mce-toc a.read{
opacity:.85;
}

/* ============================== */
/* checkmark animation            */
/* ============================== */

.toc-check{
color:#4ade80;
margin-left:6px;
font-weight:600;
opacity:0;
animation:tocCheck .35s ease forwards;
}

@keyframes tocCheck{

0%{
transform:scale(.7);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}