.dko-toc-slider {
    background-color: var(--crf--white);
    border-top: 1px solid var(--crf--light-grey);
    border-bottom: 1px solid var(--crf--light-grey);
    
    position: sticky;
    z-index: 1; /* to be above the following buttons */
    
    margin: 0px;
    
    background-color: var(--crf--white);
}

.dko-toc-slider__wrapper {
    display: flex;
    flex-flow: row nowrap;
    height: fit-content;
}
.dko-toc-slider__item {
    background-color: var(--crf--white);
    color: var(--crf--black);
    width: auto;
    max-width: min(80vw, 250px);
    height: auto;
    font-size: 14px;
    line-height: 14px; /* was 26px */
    flex-grow: 1;
    
    border-right: 1px solid var(--crf--light-grey);
}
.dko-toc-slider__item.active {
    background-color: var(--crf--shiny-blue);
    color: var(--crf--white);
}
.dko-toc-slider__item__link {
    width: 100%;
    height: 100%;
    padding: 16px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dko-toc-slider {
    transition: transform 600ms ease 0s;
    z-index: var(--z-index--toc-slider);
}
.dko-toc-slider--hidden {
    transform: translateY(-100%);
}


@media screen and (max-width: 600px) {
    .dko-toc-slider {
        top: var(--header--height, 60px);
    }
}
@media screen and (min-width: 601px) and (max-width: 991px) {
    .dko-toc-slider {
        top: calc(var(--header--height, 60px) + var(--wp-admin--admin-bar--height, 0px));
    }
}
@media screen and (min-width: 992px) {
    .dko-toc-slider {
        top: calc(var(--header--height, 60px) + var(--wp-admin--admin-bar--height, 0px));
    }
}