nav {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  user-select: none;
  -webkit-user-select: none;

  ul {
    list-style: none;
    padding: 0;
  }

  > ul > li {
    text-transform: uppercase;

    & + * {
      margin-top: 1.25rem;
    }

    > details,
    > label {
      ul {
        margin-left: 0.25rem;
      }
    }

    a,
    summary {
      padding: 0.25rem 0;
    }

    a:visited {
      font-style: italic;
      /*color: var(--orange);*/
    }

    ul {
      color: var(--off-color);
      overflow: hidden;

      li {
        text-transform: lowercase;
        display: block;
        position: relative;
        padding-left: 0.75rem;
        border-left: 1px;
      }
    }
  }
}

li[data-highlight] {
  > details > summary,
  > a {
    text-transform: uppercase;
    color: var(--color);
  }

  > details > summary > small {
    opacity: 1;
  }

  > a::after,
  > details:not([open]) > summary::after {
    content: "";
    background-color: var(--orange);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 0.125rem;
    margin-left: 0.375rem;
  }
}
