#table-of-contents {
  padding: 24px;
  border: 4px solid var(--color);
  margin-top: 20px;
  border-radius: 24px;
  opacity: 0;
  animation: show 125ms forwards;
  animation-delay: 250ms;
}
#table-of-contents ul {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 8px;
}
#table-of-contents.visible ul {
  display: flex;
}
#table-of-contents li a {
  display: flex;
  gap: 4px;
  color: var(--color);
  width: fit-content;
}
#table-of-contents li svg {
  flex-shrink: 0;
  position: relative;
  top: 3px;
  transition: 250ms;
  transition-timing-function: var(--cubic-bezier);
}
.toc__h3 {
  padding-left: 24px;
}
.toc__h3 + .toc__h2 {
  margin-top: 8px;
}
.toc__summary {
  font-size: calc(24 / 16 * 1rem);
  line-height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--main);
}
.toc__summary > svg {
  margin-left: auto;
}
#table-of-contents.visible .toc__summary > svg  {
  rotate: 180deg;
}

@media(hover: hover) {
  #table-of-contents li a:hover svg {
    transform: translateX(2px);
    transition: 125ms;
  }
}