.link-tree { position: relative; padding: 1em; overflow-y: auto; &__switch { position: absolute; top: 0.5em; left: 0.5em; cursor: pointer; img { max-height: 1.5em; } } &__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 { // } &-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; } }