@utility indentlist-scaffold {
  --indentlist-depth: 0;

  :where(li li) {
    margin-inline-start: var(--indent, 1em);
  }

  /* prettier-ignore */
  li {
    --depth: 1; 
    a { --depth: 1; }
    
    li, 
    li a { --depth: 2; }
    
    li li, 
    li li a { --depth: 3; }
    
    li li li, 
    li li li a { --depth: 4; }
    
    li li li li, 
    li li li li a { --depth: 5; }
  }

  /* Resets left padding */
  :where(ul, ol, li) {
    padding-inline-start: 0;
  }

  /* Use Fill to update colors. */
  a {
    display: block;
    padding-block: 0.125em;
  }
}

@utility indentlist {
  @apply indentlist-scaffold;

  /* Keeps markers inside the box */
  padding-inline-start: var(--indent, 1em);

  li {
    list-style-type: disc;
  }
}

@utility indentlist-guides {
  @apply indentlist-scaffold;

  li {
    position: relative;
    margin-block: 0;
    margin-inline-start: 0;
    padding-inline-start: var(--indent, 1em);
    list-style-type: none;

    a {
      position: relative;
      margin-inline-start: calc(var(--indent, 1em) * -2);
      padding-inline-start: var(--indent, 1em);
    }

    li::before,
    a::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: var(--guide-width, 1px);
      background-color: var(--guide-color, transparent);
    }

    a:hover::before {
      background-color: var(--guide-hover-color, var(--guide-color));
    }

    a:focus::before {
      background-color: var(
        --guide-focus-color,
        var(--guide-hover-color, var(--guide-color))
      );
    }
  }

  li li a {
    margin-inline-start: calc(var(--indent, 1em) * -2);
  }
}

@utility indentlist-singleguide {
  @apply indentlist-guides;

  li {
    position: relative;
    margin-inline-start: calc(var(--indent, 1em) * -1);
    padding-inline-start: 0;

    li a,
    a {
      position: relative;
      margin-inline-start: 0;
      padding-inline-start: calc(var(--indent, 1em) * var(--depth));
    }
  }

  li li {
    margin-inline-start: 0;
  }
}