module Design.View.Header
  ( design
  ) where

import           Data.Monoid  ((<>))

import           Clay

import           Design.Color as Color
import qualified Design.Media as Media

design :: Css
design = do
  let headerPadding = "padding" -: "0 20px"
  display flex
  "flex-wrap" -: "wrap"
  lineHeightMedia
  position relative
  backgroundColor Color.chestnutRose
  color Color.white
  Media.desktop $ marginBottom (em 3)
  Media.mobileTablet $ marginBottom (em 2)
  Media.mobile $ marginBottom (em 1.5)

  ".title" <> ".item" ? headerPadding

  ".title" ? do
    height (pct 100)
    textAlign (alignSide sideLeft)

    Media.mobile $ fontSize (px 22)
    Media.mobileTablet $ width (pct 100)
    Media.tabletDesktop $ do
      display inlineBlock
      fontSize (px 35)

  ".item" ? do
    display inlineBlock
    transition "background-color" (ms 50) easeIn (sec 0)
    ".current" & backgroundColor (Color.chestnutRose -. 20)
    Media.mobile $ fontSize (px 13)

  (".item" # hover) <> (".item" # focus) ?
    backgroundColor (Color.chestnutRose +. 10)

  (".item.current" # hover) <> (".item.current" # focus) ?
    backgroundColor (Color.chestnutRose -. 10)

  ".nameSignOut" ? do
    display flex
    heightMedia
    position absolute
    top (px 0)
    right (px 0)

    ".name" ? do
      Media.mobile $ display none
      Media.tabletDesktop $ headerPadding

    ".signOut" ? do
      display flex
      justifyContent center
      alignItems center
      svg ? do
        Media.tabletDesktop $ width (px 30)
        Media.mobile $ width (px 20)
        "path" ? ("fill" -: "white")

lineHeightMedia :: Css
lineHeightMedia = do
  Media.desktop $ lineHeight (px 80)
  Media.tablet $ lineHeight (px 65)
  Media.mobile $ lineHeight (px 50)

heightMedia :: Css
heightMedia = do
  Media.desktop $ height (px 80)
  Media.tablet $ height (px 65)
  Media.mobile $ height (px 50)