.drop {
    padding: 2px 5px;
    display: block;
    color: #6c7a89;
    text-decoration: none;
    white-space: nowrap;
    position: relative;

    summary {
        display: block;
        cursor: pointer;
        user-select: none;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary::after {
        margin-left: .5em;
        font-family: monospace;
        content: '▶';
    }

    &.down {
        summary ~ * {
            top: 2em;
        }

        &[open] {
            summary::after {
                font-family: monospace;
                content: '▼';
            }
        }
    }

    &.up {
        summary ~ * {
            bottom: 2em;
        }

        &[open] {
            summary::after {
                font-family: monospace;
                content: '▲';
            }
        }
    }

    summary ~ * {
        z-index: 100;
        position: absolute;
        border: solid 2px #00101f;
        border-radius: .5em;
        background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
        box-shadow: 0 1px 1em #000;
        max-height: 50vh;
        overflow: auto;
        left: 30%;
    }

    nav a {
        display: block;
        padding: .2em 3em;
        color: #6c7a89;
        text-decoration: none;

        &.selected {
            color: orange;
        }

        &:hover {
            color: #fff;
            text-decoration: underline;
            background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
        }
    }
}