.link-tree {
  position: relative;
  max-height: min(100vh, 100%);
  padding: 1em;
  overflow-y: auto;

  &__icon {
    max-height: 1.5em;
  }

  &__switch {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    cursor: pointer;
    transition: transform ease-in-out 0.2s;

    &:hover {
      transform: rotate(180deg);
    }
  }

  &__heading {
    margin-bottom: 0.5em;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, lightgray, transparent) 1;

    &-text {
      display: block;
      text-decoration: unset;
      text-align: center;
      color: var(--c-primary);
    }
  }

  &__nav {
    &-list {
      margin: 0;
      padding-left: 0.5em;
      list-style: none;

      ul {
        border-left: 1px solid lightgray;
      }
    }
    &-list-item {
      margin-block: 0.25em;
    }
    &-list-text {
      padding-inline: 0.25em;
      text-decoration: unset;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.link {
        color: var(--c-primary);
      }

      &:not(.current):hover {
        text-decoration: underline;
      }

      &.current {
        background-color: var(--c-primary);
        border: unset;
        border-radius: 0.33em;
        color: white;
        cursor: pointer;
      }
    }
  }
}

#link-tree-mode {
  &:checked ~ .v-prime {
    display: none;
  }
  &:not(:checked) ~ .v-alt {
    display: none;
  }
}