.navSearch {
$search-width: 530px; display: flex; justify-content: center; flex: 1; padding: 0 40px; position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%); @include media(max-width 1315px) { position: relative; transform: none; top: 0; } @include media(max-width 1000px) { padding: 0 30px 0 40px; } @include media($mobile) { display: none; } &--hidden { display: none; } &__icon { fill: rgba($black, 0.4); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); } &--light &__icon { fill: $white; } &__form { border: 0; margin: 0; position: relative; max-width: $search-width; width: 100%; } &__input[type="search"] { @include placeholder(rgba($black, 0.4)); transition: all 0.3s ease; color: $text-color; border: 0; margin: 0; background-color: rgba($black, 0.06); flex: 1; width: 100%; display: flex; padding-left: 60px; height: 40px; border-radius: 4px; appearance: none; &:focus { outline: none; } } &--light &__input { @include placeholder(rgba($white, 0.6)); background-color: rgba($white, 0.10); color: rgba($white, 0.8); &:focus { @include placeholder(rgba($black, 0.6)); color: rgba($black, 0.7); border: 0; background-color: rgba($white, 1); box-shadow: 0 2px 10px rgba($black, 0.2); } } &--light &__input:focus + &__icon { fill: rgba($black, 0.7); } &__results { @keyframes searchResults { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } animation: searchResults 0.3s $CurveFastOutSlowIn both; padding: 0 40px; position: absolute; top: 50px; left: 0; right: 0; width: 100%; opacity: 0; display: flex; align-items: center; justify-content: center; @include media(max-width 1000px) { padding: 0 30px 0 40px; } } &__resultsContainer { overflow: hidden; border-radius: $base-border-radius; background: $white; max-width: $search-width; width: 100%; box-shadow: 0 8px 10px 1px rgba($black, 0.14), 0 3px 14px 2px rgba($black, 0.12), 0 5px 5px -3px rgba($black, 0.4); } &__entries { padding: 10px 0; max-height: 500px; overflow: auto; } &__searchResult { text-align: left; display: flex; flex: 1; flex-direction: row; align-items: center; border: 0; color: $text-color; padding: 10px 20px; font-size: 16px; &:hover, &:focus, &:active { outline: none; border: 0; color: $text-color; background: rgba($black, 0.06); } &--notFound { padding-left: 20px; } }
}