article-nav {
  --li-left: -14px;
}
article-nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--article-nav-font-color);
}
article-nav ul:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 0.5px;
  height: 100%;
  background-color: #808080;
}
article-nav ul li {
  position: relative;
  padding: 2px 0;
  margin: 8px 12px;
  list-style: none;
}
article-nav li:before {
  position: absolute;
  top: -1px;
  left: -11px;
  z-index: 2;
  display: block;
  width: 0.5px;
  height: 100%;
  content: "";
  background-color: #808080;
  transition: all ease 0.2s;
  z-index: 10;
}
article-nav a {
  color: inherit;
  text-decoration: none;
}
article-nav li.invis {
  color: var(--article-nav-font-hover-color);
}
article-nav li.active {
  color: var(--article-nav-font-active-color);
}
article-nav li.active:before {
  left: var(--li-left);
  width: 5px;
  background-color: var(--active-color);
}
article-nav [type="h3"] {
  margin-left: 20px;
}
article-nav [type="h3"]:before {
  left: -19px;
}
article-nav [type="h3"].active:before {
  left: calc(var(--li-left) - 8px);
}
article-nav [type="h4"],
article-nav [type="h5"] {
  margin-left: 28px;
}
article-nav [type="h4"]:before,
article-nav [type="h5"]:before {
  left: -27px;
}
article-nav [type="h4"].active:before,
article-nav [type="h5"].active:before {
  left: calc(var(--li-left) - 16px);
}