// Search suggestions dropdown structure and styling
.search-suggestions {
    position: fixed;
    top: 65px;
    z-index: 9001;
    visibility: hidden;
    opacity: 0;
    min-height: 45px;
    background-color: #fff;
    width: 340px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    margin: 0 -20px;
    padding: 0 10px;
    @include transition(0.4s);
    @include transform(translate(0,-5px));
}

// Search suggestions dropdown when displayed
.search-suggestions.suggestion-in {
    visibility: visible;
    opacity: 1;
    @include transition(0.4s);
    @include transform(translate(0));
}



@media only screen and (max-width:768px) {
    // Search suggestions dropdown structure and styling on small screens
    .search-suggestions {
        position: absolute;
        top: 62px !important;
        margin: 0;
        left: 0;
        right: 0;
        width: auto;
    }

    // Hides nav/menu items when search is in on mobile
    .navbar-nav, .head_nav {
        @include transition(0.3s);
    }
    .mobile-search {
        .navbar-nav, .head_nav {
            visibility: hidden;
            opacity: 0;
            @include transition(0.3s);
        }

    }

}

// Styling os Search suggestions wrapper - the height is overwritten with javascript.
.search-suggestions-inner,
.search-suggestions-inner.close-inner {
    position: relative;
    transition: margin .1s, height .1s, opacity .1s;
    height: 0;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

// Search suggestions inner - show results
.search-suggestions-inner.open-inner {
    opacity: 1;
    transition: height .2s, opacity .2s;
}


// Suggestion item image sizing
.suggestion-item-image {
    min-width: 25px;
    width: 25px;
}
