:root {
  --toc-gap-left: calc(var(--grid-gutter) / 2)
}
@block table-of-contents {
  @element list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: var(--toc-gap-left);
  }

  @element item {
    margin: 0 0 calc(var(--grid-gutter) / 4);
    padding: 0;
    font-size: 0.9em;
    line-height: 1.8;
  }

  @element link {
    display: block;
    color: var(--color-text-grey);

    &.active {
      position: relative;
      font-family: var(--font-medium);
      color: var(--color-text-default);

      &:before,
      &:after {
        position: absolute;
        top: 0;
      }
      &:before {
        content: '';
        left: calc(var(--toc-gap-left) * 3 * -1);
        bottom: 0;
        width: 3px;
        background: var(--color-course-active);
      }
      &:after {
        content: '👁';
        left: calc(var(--toc-gap-left) * 2 * -1);
      }
    }
  }
}