module Media
  ( mobile
  , mobileTablet
  , tablet
  , tabletDesktop
  , desktop
  ) where

import           Clay            hiding (query)
import qualified Clay
import qualified Clay.Media      as Media
import           Clay.Stylesheet (Feature)

mobile :: Css -> Css
mobile = query [Media.maxWidth mobileTabletLimit]

mobileTablet :: Css -> Css
mobileTablet = query [Media.maxWidth tabletDesktopLimit]

tablet :: Css -> Css
tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]

tabletDesktop :: Css -> Css
tabletDesktop = query [Media.minWidth mobileTabletLimit]

desktop :: Css -> Css
desktop = query [Media.minWidth tabletDesktopLimit]

query :: [Feature] -> Css -> Css
query = Clay.query Media.screen

mobileTabletLimit :: Size LengthUnit
mobileTabletLimit = (px 520)

tabletDesktopLimit :: Size LengthUnit
tabletDesktopLimit = (px 950)