// // Search input and autocomplete // .search { position: relative; z-index: 99; flex-grow: 1; height: 100%; margin-bottom: $sp-3; @include mq(md) { margin-bottom: 0; } } .search-input-wrap { display: flex; height: 100%; background-color: $body-background-color; padding: $sp-2; border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @include mq(md) { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-radius: 0; box-shadow: none; } } .search-input { align-self: center; width: 100%; padding-top: $sp-1; padding-bottom: $sp-1; background-color: $body-background-color; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; order: 2; &:focus { outline: 0; box-shadow: none; + .search-icon { fill: $link-color; } } @include fs-4; @include mq(md) { @include fs-3; } } .search-icon { align-self: center; margin-right: $sp-2; fill: $grey-dk-000; order: 1; } .search-results-wrap { position: absolute; display: none; z-index: 100; width: 100%; border-radius: $border-radius; background: lighten($body-background-color, 1%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); &.active { display: block; } } .search-results-list { padding-left: 0; margin-top: $sp-1; margin-bottom: $sp-1; list-style: none; @include fs-4; @include mq(md) { @include fs-3; } } .search-results-list-item { padding: 0; margin: 0; } .search-results-link { display: block; padding-top: $sp-1; padding-right: $sp-3; padding-bottom: $sp-1; padding-left: $sp-3; &:hover { color: $body-heading-color; background-color: darken($body-background-color, 2%); } }