.Toc {
  border-radius: 5px;
  font-size: map-get($font-size-aliases, "template");
  background: #fff;
  box-shadow: $box-shadow-depth-100;
  max-width: map-get($max-w, "prose");
  margin-inline: auto;
  position: relative;

  @media (min-width: $screen-lg) {
    background-color: transparent;
    border-radius: initial;
    box-shadow: 0 0 0 transparent;
  }

  .Toc__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    text-align: left;
    transition: background-color $transition-speed,
      border-color $transition-speed;
    width: 100%;

    @media (min-width: $screen-lg) {
      cursor: text;
      padding-bottom: 6px;
      padding-top: 6px;
    }

    &::after {
      background: url("~/images/icons/angle-down.svg") 50% 50% no-repeat;
      content: "";
      height: 8px;
      transition: transform 300ms;
      width: 8px;
      transform: rotate(0deg);

      @media (min-width: $screen-lg) {
        content: initial;
      }
    }

    &--is-collapsed {
      &::after {
        transform: rotate(-180deg);
      }
    }
  }

  .Toc__title {
    font-family: $font-family-base;
    font-size: map-get($font-size-aliases, "template");
    margin-bottom: 0;
    margin-top: 0;
  }

  .Toc__list {
    &--is-collapsed {
      display: none;

      @media (min-width: $screen-lg) {
        display: block;
      }
    }
  }

  > .Toc__list {
    margin-bottom: 1rem;
    padding: 0 8px 8px;
  }

  .Toc__list-item {
    list-style-type: none;
    margin-bottom: 2px;
    margin-top: 2px;
  }

  .Toc__list-item.active {
    > .Toc__link {
      color: $purple-600;
      transform: translate(5px);
    }
  }

  .Toc__link {
    border-radius: 5px;
    color: $navy-500;
    display: block;
    padding: 6px 16px;
    text-decoration: none;
    display: inline-block;

    &:hover {
      color: $purple-600;
    }
  }

  .Toc__link--h3 {
    font-size: 0.875rem;
  }
}

.Toc__list-item .Toc__list {
  padding-left: 16px;
}

.Toc svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;

  @media (min-width: $screen-lg) {
    display: initial;
  }
}

.Toc path {
  fill: transparent;
  stroke: $purple-600;
  stroke-width: 3px;
  stroke-dasharray: 0 0 0 1000;
}

// Less animations on page load.
.Toc--is-ready {
  path {
    transition: all 300ms ease;
  }

  .Toc__link {
    transition: color 300ms ease-in-out, transform 300ms ease-in-out;
  }
}
