Search box input

import Css
import Css.Global
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html


searchBox : Html msg
searchBox =
    Html.div
        [ Html.css
            [ Css.position Css.relative
            , Css.Global.descendants
                [ Css.Global.selector ".search-box__input:not(:placeholder-shown) + label"
                    [ Css.displayFlex
                    , Css.alignItems Css.center
                    , Css.border3 (Css.px 1) Css.solid (Css.hex "efefef")
                    , Css.padding <| Css.px 8
                    ]
                ]
            ]
        ]
        [ Html.input
            [ Html.class "search-box__input"
            , Html.placeholder "Search"
            , Html.css
                [ Css.border <| Css.px 0
                , Css.flex <| Css.int 1
                ]
            ]
            []
        ]