module Design.View.Pages
  ( design
  ) where

import           Clay

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media

design :: Css
design =
  ".pages" ? do
    display flex
    justifyContent center

    Media.desktop $ do
      padding (px 40) (px 30) (px 30) (px 30)

    Media.tablet $ do
      padding (px 30) (px 30) (px 30) (px 30)

    Media.mobile $ do
      padding (px 20) (px 0) (px 20) (px 0)
      lineHeight (px 40)

    svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)

    ".page" ? do
      display inlineBlock
      fontWeight bold

      Media.desktop $ do
        Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken

      Media.tabletDesktop $ do
        border solid (px 2) Color.dustyGray
        marginRight (px 10)

      Media.tablet $ do
        Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
        fontSize (px 15)

      Media.mobile $ do
        Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
        fontSize (px 12)
        border solid (px 1) Color.dustyGray
        marginRight (px 5)

      ":not(.current)" & cursor pointer

      ".current" & do
        borderColor Color.chestnutRose
        color Color.chestnutRose