// Hugo generates this so to apply bem we'd have to rewrite the internals
// not worth it!

.c-toc {
  color: var(--theme-color--accent);
  max-width: var(--theme-spacing--container);
  box-shadow: var(--theme-box-shadow);
  padding: var(--theme-spacing--1) var(--theme-spacing--2)
    var(--theme-spacing--4);
  overflow-y: auto;
  counter-reset: item;

  ol {
    color: var(--theme-color--ink);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  // I'm doing this because we might have multiple ordered lists in this section
  // it's not an access problem in particular and it's a significant chunk of template code to merge the lists
  // https://github.com/gohugoio/hugo/issues/1778#issuecomment-313895910
  // so instead of writing all that I'm resetting the counter and running them together that way
  // feel free to tackle if you have spare time
  ol > li {
    
    font-family: var(--theme-font--display);
    font-weight: 300;
    &:before {
      display: inline-block;
      content: counter(item) ". ";
      counter-increment: item;
      min-width: 2.5ch;
      line-height: 1.375;
    }

    a,
    a:link {
      text-decoration: none;
      position: relative;
      &.is-active {
        color: var(--theme-color--pop);
        border-bottom: 1px solid var(--theme-color--pop);
      }
    }

    li {
      text-transform: none;
      font-family: var(--theme-font--copy);
      &::marker {
        color: var(--theme-color--pop);
      }
    }
  }

  &__top {
    --bookmark: var(--theme-spacing--touchtarget);
    position: fixed;
    left: calc(
      calc(
          calc(100vw - var(--theme-spacing--container)) / 2 +
            var(--theme-spacing--container)
        ) - calc(var(--bookmark) / 2)
    );
    text-shadow: 0.5px 0.5px var(--theme-color--ink),
      -0.5px 1px var(--theme-color--pop),
      0px 3.25px 6px var(--theme-color--outline);
    font-size: var(--bookmark);
    transform: translateY(calc(-1 * calc(var(--bookmark) / 2)));
  }
}
