content: {-# LANGUAGE OverloadedStrings #-}
  {-# LANGUAGE ScopedTypeVariables #-}
  
  -- | Some commonly useful CSS styles
  module Rib.Extra.CSS where
  
  import Clay
  import qualified Data.Text as T
  import Lucid
  import Relude
  
  -- | Stock CSS for the <kbd> element
  --
  -- Based on the MDN demo at,
  -- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
  mozillaKbdStyle :: Css
  mozillaKbdStyle = do
    backgroundColor $ rgb 238 238 238
    color $ rgb 51 51 51
    sym borderRadius (px 3)
    border solid (px 1) $ rgb 180 180 180
    padding (px 2) (px 4) (px 2) (px 4)
    boxShadow $
      (bsColor (rgba 0 0 0 0.2) $ shadowWithBlur (px 0) (px 1) (px 1))
        :| [(bsColor (rgba 255 255 255 0.7) $ bsInset $ shadowWithSpread (px 0) (px 2) (px 0) (px 0))]
    fontSize $ em 0.85
    fontWeight $ weight 700
    lineHeight $ px 1
    whiteSpace nowrap
  
  -- | Include the specified Google Fonts
  googleFonts :: Monad m => [Text] -> HtmlT m ()
  googleFonts fs =
    let fsEncoded = T.intercalate "|" $ T.replace " " "+" <$> fs
        fsUrl = "https://fonts.googleapis.com/css?family=" <> fsEncoded <> "&display=swap"
     in stylesheet fsUrl
  
  -- | Include the specified stylesheet URL
  stylesheet :: Monad m => Text -> HtmlT m ()
  stylesheet x = link_ [rel_ "stylesheet", href_ x]
  