.search
    
    display                 grid
    grid-template-rows      auto
    grid-template-columns   auto 2rem
    grid-gap                0%
    
    outline     none
    position    relative
    text-align  left

    shadowUnder(#e4a7ad)

    > input[type=text]
        background-color    transparent
        border              0
        border-bottom       1px solid #960018
        color               #600
        font-family         sniglet
        font-size           1rem
        height              2rem
        margin              0
        outline             none
        padding             auto 1rem .1rem 0rem
        position            relative
        text-align          left
        width               100%

        &::placeholder
            color               #600
            opacity             .5
            font-family         sniglet
            font-size           .8em
            font-style          italic
        
        /* Style for selected text */
        &::selection
            background-color    #960018
            color               #fff
        
        /* Style for selected text, for Firefox */
        &::-moz-selection
            background-color    #960018
            color               #fff

    > input[type=submit]
        background-color    #fff
        background-image    url("search.svg")
        background-position center
        background-repeat   no-repeat
        background-size     auto 1rem
        border              0
        border-bottom       1px solid #960018
        height              2rem
        outline             none
        width               2rem

        &:hover
            cursor              pointer

    /* Search results, box */
    > .suggestions
        background-color    #fff
        border              1px solid #fff
        display             none
        margin              2rem 0 0 0
        max-height          50vh
        max-width           50vw
        min-width           100%
        overflow-x          hidden
        overflow-y          auto
        position            absolute
        right               0
        z-index             9999
        
        flex-direction  column
        flex-wrap       nowrap
        justify-content flex-start
        align-content   flex-start
        align-items     stretch
        
        boxShadowShiftedDown()
        
        /* A single search result */
        > a, a:visited
            flex-grow   0
            flex-shrink 0
            flex-basis  0
            align-self  auto
            
            color           #000
            padding         .5rem 1rem .5rem .5rem
            white-space     nowrap
            
        > a.highlight
            background-color    #960018
            border-top          1px solid #fff
            color               #fff
