.blocks:has(.toc) {
  padding-block: 0;
}

.toc {
  background: var(--color-white);
  height: auto;
  margin: 0;
  padding-inline: 0;
}

.toc ul {
  display: flex;
  flex-direction: column;
  padding-inline: 0;
  width: 100%;
}

.toc li {
  padding-block: var(--size-5);
  width: 100%;
}

.toc li + li {
  border-block-start: var(--size-0) solid var(--color-purple-700);
}

.toc a {
  align-items: center;
  color: var(--color-orange-500);
  display: flex;
  font-size: var(--step-1);
  height: 100%;
  justify-content: space-between;
  line-height: 1.24;
  width: 100%;
}

.toc a::after {
  background-color: var(--color-orange-500);
  mask-image: url('data:image/svg+xml,<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 1L8.5 8.5L1 0.999999" stroke="%23CF3E1B" stroke-width="2"/></svg>');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  content: '';
  display: block;
  height: 10px;
  right: 0;
  /* position: absolute; */
  width: 17px;
}

.toc a:hover,
.toc a:active {
  color: var(--color-orange-700);
}

@media (width >= 60rem) {
  .toc ul {
    flex-direction: row;
    justify-content: center;
    gap: var(--size-26);
  }

  .toc li {
    margin-block: var(--size-5) var(--size-15);
    padding-block: 0;
    width: auto;
  }

  .toc li + li {
    border-block-start: none;
  }

  .toc a {
    display: inline;
    font-size: var(--step-2);
    padding-bottom: var(--size-6);
    position: relative;
  }

  .toc a::after {
    bottom: calc(-1 * var(--size-6));
    position: absolute;
    right: 50%;
  }
}