/* 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);
            }
        }
    }
}
