// ugh... I don't like removing the body's scrollbar as this also scrolls the
// user up. Though this fixes the sure-to-be-annoying "double scrollbars" issue.
body.with-search {
    overflow-y: hidden;
}

#search-engine {
    background: #fff;
    padding: @gutter;
    position: fixed;
    top: @header-height;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;

    // The global TOC is later in the DOM.
    // This ensures the search is on top of the TOC.
    z-index: 10;

    // Text shown when there are no results.
    .is-empty {
        text-align: center;
        font-style: italic;
    }

    // Results list
    .results {
        ul {
            margin: 0;
            margin-left: -@gutter;
            margin-right: -@gutter;
        }

        li {
            position: relative;
            list-style-type: none;
            margin: 0;
            padding: 0;
            padding-top:    @gutter;
            padding-bottom: @gutter;
            padding-left: @gutter;
            padding-right: @gutter;
            &:not(:last-child) {
                &::after {
                    content: "";
                    display: block;
                    border-top: 1px solid rgba(0, 0, 0, 0.6);
                    position: absolute;
                    bottom: 0;
                    left: @gutter;
                    right: @gutter;
                }
            }

            &:hover {
                cursor: pointer;
                background-color: lighten(#7EBAE4, 22%);
            }

            a {
                font-weight: bold;
                display: block;
            }

            // We know there's only one <p>, so it's safe to make
            // this a larger selector.
            p {
                margin-bottom: 0;
            }
        }
        em {
            @_overlap: 0.3rem;
            font-style: italic;
            background-color: lighten(#7EBAE4, 17%);
            padding-left:  @_overlap;
            padding-right: @_overlap;
            margin-left:  -@_overlap;
            margin-right: -@_overlap;
        }
    }

    input {
        display: block;
        width: 100%;
        padding-left:@gutter/2;
        padding-right:@gutter/2;
    }

    &:not(.is-loading) .status {
        display: none;
    }
    &.is-loading > * {
        opacity: 0.5
    }
}