/* Menu */

menu, results {

ul {
    @include vendor('user-select', 'none');
    color: _palette(fg-bold);
    font-family: _font(family-heading);
    font-family: _font(weight-heading-alt);
    letter-spacing: _font(kerning-heading);
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    text-transform: uppercase;
    a, span {
        border-bottom: 0;
        color: inherit;
        cursor: pointer;
        display: block;
        font-size: 0.9em;
        padding: 0.625em 0;
        &:hover {
            color: _palette(accent);
        }
        &.opener {
            @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
            @include icon(false, solid);
            -webkit-tap-highlight-color: rgba(255,255,255,0);
            position: relative;
            &:before {
                @include vendor('transition', (
                    'color #{_duration(transition)} ease-in-out',
                    'transform #{_duration(transition)} ease-in-out'
                ));
                color: _palette(fg-light);
                content: '\f078';
                position: absolute;
                right: 0;
            }
            &:hover {
                &:before {
                    color: _palette(accent);
                }
            }
            &.active {
                & + ul {
                    display: block;
                }
                &:before {
                    @include vendor('transform', 'rotate(-180deg)');
                }
            }
        }
    }
}
> ul {
    > li {
        position: relative;
        border-top: solid 1px _palette(border);
        margin: 0.5em 0 0 0;
        padding: 0.5em 0 0 0;
        > ul {
            color: _palette(fg-light);
            display: none;
            margin: 0.5em 0 1.5em 0;
            padding-left: 1em;
            a, span {
                font-size: 0.8em;
            }
            > li {
                margin: 0.125em 0 0 0;
                padding: 0.125em 0 0 0;
            }
        }
        &:first-child {
            border-top: 0;
            margin-top: 0;
            padding-top: 0;
        }
        &::before {
            border-left: 6px solid transparent;
            content: "";
            display: block;
            position: absolute;
            left: -1em;
            top: 0;
            height: 100%;
        }
        &.current::before {
            border-left: 6px solid _palette(accent);
        }
        &:hover::before {
            border-left: 6px solid _palette(accent-cp);
        }
    }
}

}

/* Inverted */

.inverted menu, .inverted results {

ul {
    color: _palette(fg-bold-inverted);
    a, span {
        color: inherit;
        &:hover {
            color: _palette(accent-cp);
        }
        &.opener {
            &:before {
                color: _palette(fg-light-inverted);
            }
            &:hover {
                &:before {
                    color: _palette(accent-cp);
                }
            }
        }
    }
}
> ul {
    > li {
        border-top: solid 1px _palette(border-inverted);
        > ul {
            color: _palette(fg-light-inverted);
        }
        &:first-child {
            border-top: 0;
            margin-top: 0;
            padding-top: 0;
        }
        &.current::before {
            border-left: 6px solid _palette(accent-inverted);
        }
        &:hover::before {
            border-left: 6px solid _palette(accent-cp);
        }
    }
}

}