//
// kremalicious3
// --------------
// Search
//

.has-search-open
    overflow: hidden

    .site__content
        @extend .transition
        filter: blur(10px) opacity(0.3)
        user-select: none
        pointer-events: none

.search-btn
    right: 70px
    padding: .65em .85em

    @media $screen-md
        right: 50px

.search-close
    position: absolute
    right: 14px

    &,
    &:active
        top: 8%

.search-area
    @extend .transition
    position: absolute
    left: 0
    top: -7px
    z-index: 3
    margin-left: ($spacer / 2)
    margin-right: ($spacer / 2)
    width: "calc(100% - %s)" % $spacer

    // hidden by default
    display: none

    @media $screen-md
        margin-left: 0
        margin-right: 0
        width: 100%

    &.is-ready
        display: block

    .form-control
        background: #fff


.search-popover
    position: absolute
    left: 0
    top: ($spacer*2.4)
    bottom: 0
    z-index: 6
    width: 100%
    max-height: 90vh
    padding: ($spacer / 2) 0
    overflow: auto
    -webkit-overflow-scrolling: touch

    @media $screen-sm
        top: ($spacer * 3)

.search-results
    @extend .breakoutviewport
    padding-bottom: $spacer

.search-link
    @extend .h4
    line-height: $line-height-small
    margin: 0
    padding: ($spacer / 2)
    display: block
    border-bottom: 1px solid alpha($brand-grey-light, .2)
    box-shadow: 0 1px 0 alpha(#fff,.2)

    &:hover
        background: $link-color
        color: #fff