/* "Жидкое" оглавление (js/toc-liquid.js) */

.toc__menu.toc-liquid-on {
    position: relative;
}

.toc__menu.toc-liquid-on ul {
    position: relative;
    z-index: 1;
}

/* Пункт — "таблетка" по ширине текста; отрицательный отступ сохраняет выравнивание текста */
.toc__menu.toc-liquid-on li {
    margin-bottom: 4px;
}

.toc__menu.toc-liquid-on .toc__menu-item {
    display: inline-block;
    vertical-align: top;
    margin-left: -22px;
    padding: 6px 16px 6px 22px;
    border-radius: 20px;
    transition: color .35s ease;
}

/* Скрипт шаблона подсвечивает все видимые секции — зелёным оставляем только пункт под плашкой */
.toc__menu.toc-liquid-on .toc__menu-item_is_active {
    color: #121213;
}

.toc__menu.toc-liquid-on .toc__menu-item:hover {
    color: var(--color-alt, #8FC626);
}

.toc__menu.toc-liquid-on .toc-liquid__current,
.toc__menu.toc-liquid-on .toc-liquid__current:hover {
    color: #fff;
}

.toc-liquid {
    position: absolute;
    top: -24px;
    right: -24px;
    bottom: -24px;
    left: -24px;
    z-index: 0;
    pointer-events: none;
    filter: url(#toc-goo);
}

.toc-liquid__blob,
.toc-liquid__drop {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 20px;
    background: var(--color-alt, #8FC626);
    will-change: transform;
}

.toc-liquid__drop {
    border-radius: 50%;
}

.toc-liquid__hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 20px;
    background: rgba(143, 198, 38, .16);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}

@media screen and (max-width: 768px) {
    .toc__menu.toc-liquid-on li {
        margin-bottom: 4px;
    }

    .toc__menu.toc-liquid-on .toc__menu-item {
        padding: 4px 12px;
        margin-left: -12px;
    }
}