:root {
  --toc-gap-left: calc(var(--spacing));
  --toc-gap-total: calc(var(--toc-gap-left) + var(--spacing) * 0.5);
}
@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(--spacing) * 0.25);
    padding: 0;
    font-size: 0.9em;
    line-height: 1.8;
  }

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

    &:hover,
    &.active {
      color: var(--color-text-default);
    }

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

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

    &.visited {
      position:relative;

      &:before,
      &:after {
        position: absolute;
        top: 0;
      }
      &:after {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        top: 50%;
        left: calc(var(--toc-gap-total) / 2 * -1 - 8px);
        transform: translateY(-50%);

        background: url('/images/icon-viewed.svg') no-repeat center center;
        background-size: contain;
      }
    }
  }
}