* + .toc {
    margin-top: 20px;
}

.toc {
   
    display: grid;
    border-radius: 12px;
    background: #1C1917;
    padding: 24px;
}

.toc.active .toc__title::after {
    transform: rotate(-180deg)
}

.toc.active .toc__list, .toc.active ol {
    display: flex;
}

.toc__title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    cursor: pointer;
  color: #fff
}

.toc__title::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M9.64645 12.6464L4.85355 7.85355C4.53857 7.53857 4.76165 7 5.20711 7H7.79289C7.9255 7 8.05268 7.05268 8.14645 7.14645L9.64645 8.64645C9.84171 8.84171 10.1583 8.84171 10.3536 8.64645L11.8536 7.14645C11.9473 7.05268 12.0745 7 12.2071 7H14.7929C15.2383 7 15.4614 7.53857 15.1464 7.85355L10.3536 12.6464C10.1583 12.8417 9.84171 12.8417 9.64645 12.6464Z" fill="%2381EFA6"/></svg>');
    display: block;
    width: 30px;
    height: 30px;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    will-change: transform
}

.toc__title::after {
   
    border-radius: 50%;
    position: absolute;
    
    right: -5px;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    background-color: transparent;
    transition-property: background-color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    will-change: background-color
}


.toc__list, .toc ol {
    display: none;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0
}

.toc ol li::before {
    content: none;
}

.toc__item, .toc ol li {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 0;

}

.toc__item a, .toc a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 4px;
    background: var(--Stroke, rgba(255, 255, 255, .08));
    color: var(--Text, #d9d9d9);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    will-change: background
}

.toc__item a:active, .toc a:active {
    background: rgba(255, 255, 255, .21)
}

.toc__item a::after, .toc a::after {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.985 17.485h-6.778a.5.5 0 0 1-.353-.853l1.828-1.829a.5.5 0 0 1 .354-.146h2.12a.5.5 0 0 0 .5-.5v-2.121a.5.5 0 0 1 .147-.354l1.829-1.828a.5.5 0 0 1 .853.353v6.778a.5.5 0 0 1-.5.5" fill="%2381EFA6"/><path d="M16 16 7 7" stroke="%2381EFA6" stroke-width="2" stroke-linecap="round"/></svg>');
    width: 24px;
    height: 24px;
    display: block
}
.wp-block-table {
    overflow-x: auto;
    display: block;
}

.wp-block-table table {
    table-layout: fixed;
    width: 100%;
    min-width: 500px;
}

@media (max-width: 991.9px) {
  
  .toc {
    padding: 18px;
  }
  
  .toc__title::after {
    transform: translate(0);
    
  }

}