Rating input

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


rating : Int -> Html msg
rating score =
    List.range 1 5
        |> List.reverse
        |> List.map (starView score)
        |> Html.Styled.Keyed.node "div"
            [ Css.displayFlex
            , Css.alignItems Css.center
            , Css.flexDirection Css.rowReverse
            , Css.Global.descendants
                [ Css.Global.selector ".rating__star"
                    [ Css.backgroundColor Css.transparent
                    , Css.color (Css.hex "efefef")
                    , Css.cursor Css.pointer
                    ]
                , Css.Global.selector ".rating__star:hover"
                    [ Css.color (Css.hex "88c0d0") ]
                , Css.Global.selector ".rating__star:hover ~ .rating__star"
                    [ Css.color (Css.hex "88c0d0") ]
                ]
            ]


starView : Int -> Int -> ( String, Html Msg )
starView index score =
    ( "star_" ++ String.fromInt index
    , Html.span
        [ Html.class "rating__star" ]
        [ Html.text "★" ]
    )