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

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

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 Abs
mobileTabletLimit = (px 520)

tabletDesktopLimit :: Size Abs
tabletDesktopLimit = (px 950)