.table-of-contents {
  position: sticky;
  top: var(--ds-size-6);
  max-width: 220px;
  padding: var(--ds-size-4);
  background-color: var(--ds-color-neutral-background-tinted);
  border-radius: var(--ds-border-radius-lg);

  > h2 {
    font-weight: 500;
    margin-bottom: var(--ds-size-4);
  }
  > ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-inline-start: 1px solid var(--ds-color-neutral-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-2);
    > li {
      > a {
        color: inherit;
        display: block;
        position: relative;
        text-decoration: none;
        padding-inline-start: var(--ds-size-4);
        border-radius: var(--ds-border-radius-md);

        /*It needs to be decided if level 3 should be included
        and if so, how to style it. This is just placeholder*/
        &[data-level='3'] {
          color: var(--ds-color-neutral-text-subtle);
          padding-inline-start: var(--ds-size-6);
        }

        &:focus-visible {
          color: var(--ds-color-neutral-base-contrast-default);
        }

        &[aria-current='true'] {
          font-weight: 500;
          margin-inline-end: -3px; /*prevents line break due to bolder text*/
          &::before {
            content: '';
            width: 3px;
            background-color: var(--ds-color-neutral-border-default);
            position: absolute;
            top: 0;
            left: -2px;
            bottom: 0;
            border-radius: 3px;
          }
        }
      }
    }
  }
}
