[{"name":"CssHooks","comment":" Make Elm inline styles respond to selectors and CSS at-rules. Start with a\nbase style, then use `on` to change it when a condition matches.\n\n    config =\n        CssHooks.define (\\hover -> { hover = hover })\n            |> CssHooks.add \"&:hover\"\n\n    buttonStyle =\n        [ ( \"background\", \"navy\" ) ]\n            |> CssHooks.on config .hover\n                [ ( \"background\", \"blue\" ) ]\n\n    view =\n        Html.div []\n            [ CssHooks.styleElement config\n            , Html.button\n                [ CssHooks.attribute buttonStyle ]\n                [ Html.text \"Save\" ]\n            ]\n\n`define` gives the condition a name. `add` adds its selector to the config.\nPut `styleElement config` in the page once; the style values on each element\nremain inline.\n\n# Configuring hooks\n\n@docs Config, Condition, define, add\n\n# Styling elements\n\n@docs Style, on, attribute, styleElement, styleSheet\n\n# Combining conditions\n\n@docs and, or, not\n\n","unions":[{"name":"Config","comment":" A named set of conditions. The type parameter is the record of names you\nchoose for the conditions.\n","args":["a"],"cases":[]},{"name":"Condition","comment":" A condition created by `add`, or a combination made with `and`, `or`, or\n`not`. Use one with `on` to change an inline style.\n","args":[],"cases":[]}],"aliases":[{"name":"Style","comment":" CSS property and value pairs. Write property names in kebab case and include\nunits where needed, as in `( \"padding\", \"12px\" )`. Elm does not check CSS syntax\nin these strings.\n","args":[],"type":"List.List ( String.String, String.String )"}],"values":[{"name":"on","comment":" Set properties when a condition matches. Select a named condition with a\nrecord accessor such as `.hover`, or combine conditions with a function such\nas `(\\c -> CssHooks.or [ c.hover, c.wide ])`.\n\nStart with a base style and pipe it through `on`. Each call takes the config,\nthe condition to select, and the properties to change:\n\n    [ ( \"background\", \"navy\" ) ]\n        |> CssHooks.on config\n            .hover\n            [ ( \"background\", \"blue\" ) ]\n\nYou can use multiple `on` calls. The later call wins if two calls set the same\nproperty. A property with no base value falls back to `revert-layer` when its\ncondition does not match.\n\nAvoid mixing a shorthand such as `margin` with a longhand such as `margin-left`\non the same element.\n","type":"CssHooks.Config a -> (a -> CssHooks.Condition) -> CssHooks.Style -> CssHooks.Style -> CssHooks.Style"},{"name":"or","comment":" Match when at least one condition matches. An empty list never matches.\n\n    CssHooks.on config\n        (\\c -> CssHooks.or [ c.hover, c.wide ])\n        [ ( \"background\", \"blue\" ) ]\n\n","type":"List.List CssHooks.Condition -> CssHooks.Condition"},{"name":"add","comment":" Add a selector or at-rule to a config. Each call supplies one condition to\nthe function in `define`, in argument order. Supported at-rules are `@media`,\n`@container`, `@supports`, `@scope`, and `@starting-style`.\n\n    config =\n        CssHooks.define (\\hover -> { hover = hover })\n            |> CssHooks.add \"&:hover\"\n\nUse `&` to mark the styled element in a selector. For example, `&:hover`\nmatches the element when hovered; `.group:hover &` matches it when an ancestor\nwith the `group` class is hovered. Elm does not check selector syntax, so pass\ntrusted strings to `add`.\n","type":"String.String -> CssHooks.Config (CssHooks.Condition -> a) -> CssHooks.Config a"},{"name":"and","comment":" Match when every condition matches. An empty list always matches.\n\n    CssHooks.on config\n        (\\c -> CssHooks.and [ c.hover, c.wide ])\n        [ ( \"background\", \"blue\" ) ]\n\n","type":"List.List CssHooks.Condition -> CssHooks.Condition"},{"name":"not","comment":" Match when a condition does not match. For example, `not c.wide` matches\nwidths below the registered media query:\n\n    CssHooks.on config\n        (\\c -> CssHooks.not c.wide)\n        [ ( \"padding\", \"8px\" ) ]\n\n","type":"CssHooks.Condition -> CssHooks.Condition"},{"name":"define","comment":" Start a config. The function names the conditions supplied by later `add`\ncalls. Its arguments and the `add` calls must be in the same order:\n\n    CssHooks.define\n        (\\hover wide ->\n            { hover = hover\n            , wide = wide\n            }\n        )\n        |> CssHooks.add \"&:hover\"\n        |> CssHooks.add \"@media (min-width: 600px)\"\n\n","type":"a -> CssHooks.Config a"},{"name":"attribute","comment":" Turn a style into one HTML `style` attribute. Apply `on` before calling\nthis function.\n\n    Html.button\n        [ CssHooks.attribute [ ( \"color\", \"white\" ) ] ]\n        [ Html.text \"Save\" ]\n\n","type":"CssHooks.Style -> Html.Attribute msg"},{"name":"styleSheet","comment":" Get the stylesheet as a string, for use when you manage the page's CSS\nyourself. Include it once. For Elm views, `styleElement` does this for you.\n","type":"CssHooks.Config a -> String.String"},{"name":"styleElement","comment":" Add the hook stylesheet to the page. Place this element once near the root\nof a view that uses `on` with this config.\n","type":"CssHooks.Config a -> Html.Html msg"}],"binops":[]}]