.search-form 
    display -webkit-box
    display -ms-flexbox
    display flex
    -webkit-box-pack start
    -ms-flex-pack start
    justify-content flex-start
    margin-top 1.5rem

    .search-input
        -webkit-box-flex 1
        -ms-flex 1 1 auto
        flex 1 1 auto
        -webkit-transition border-bottom-color 0.18s cubic-bezier(0.4, 0, 0.2, 1)
        -o-transition border-bottom-color 0.18s cubic-bezier(0.4, 0, 0.2, 1)
        transition border-bottom-color 0.18s cubic-bezier(0.4, 0, 0.2, 1)
        color var(--body-color)
        opacity 0.87
        border none
        outline none
        border-bottom 1px solid var(--border-color)
        background-color transparent

        &::-webkit-search-decoration
        &::-webkit-search-cancel-button
        &::-webkit-search-results-button
        &::-webkit-search-results-decoration
            display none

        &:focus
            border none
            border-bottom 1px solid var(--main-color)

    #search-input 
        width 100%

.search-result
    .search-result__notice
        opacity .67
        max-width var(--content-width)
        margin 0 auto
        padding-top calc(var(--space)/4)
        padding-bottom calc(var(--space)/4)

    .search-result__list:empty
        display none

    a.search-result__link
        color inherit

        &:hover
            text-decoration none
        
        &:not(:first-of-type)
            .search-result__item
                padding-top calc(var(--space)/4)

        &:not(:last-of-type)
            .search-result__item
                padding-bottom calc(var(--space)/4)
                border-bottom 1px solid var(--border-color)